无法使用自定义CSS左对齐.ms-siteicon-img [英] Cannot left align .ms-siteicon-img using custom css

问题描述

I have custom CSS on a SharePoint 2013 page and I am struggling with getting the site icon/logo to appear to the left (as pictured)..

<style>
div#WebPartWPQ2_ChromeTitle:before {
  content: '\f187';
  font-family: fontawesome;
}
</style>
<style>
div#WebPartTitleWPQ2_ChromeTitle:before {
  content: 'f187';
  font-family: fontawesome;
}
</style>
<script>
function AppendMenuFontAwesomeIcons() {
    var elements = document.querySelectorAll('ul[id^=zz][id$=_RootAspMenu] li span.menu-item-text');

    for (var i = 0; i < elements.length; i++) {
        var icon;
        // Set the FontAwesome icon based on the text of the menu item...
        switch (elements[i].innerHTML) {
            case 'Archive':
                icon = 'far fa-folder-open';
                break;
            case 'Board + Committee Records':
                icon = 'fas fa-copy';
                break;
        case 'Business Plan and Annual Reports':
                icon = 'fas fa-chart-pie';
                break;
            case 'CCTV Register':
                icon = 'fas fa-video';
                break;
            case 'IT Training Manuals':
                icon = 'fas fa-book';
                break;
        case 'Policy + Procedures':
                icon = 'fas fa-folder-open';
                break;
        case 'Recruitment Toolkit':
                icon = 'fas fa-briefcase';
                break;
        case 'Risk Assessments + COSSH Data':
                icon = 'fas fa-exclamation-triangle';
                break;
        case 'Structure Charts':
                icon = 'fas fa-sitemap';
                break;
        case 'Touchdown Points':
                icon = 'far fa-map-marker';
                break;
            case 'Library Admin Center':
                icon = 'fas fa-cog';
                break;
        }            
        elements[i].innerHTML = '<i class="fa fa-fw fa-' + icon + '"></i> ' + elements[i].innerHTML;
    }
 }

_spBodyOnLoadFunctionNames.push('AppendMenuFontAwesomeIcons');
</script>
<style type="text/css"> 
.ms-webpartPage-root { border-spacing: 0px !important; padding: 0px !important;}

 .ms-webpartzone-cell { margin: 0px !important; padding: 0px !important;}
 </style>
<style>#s4-titlerow{border-bottom: 0px #FFF solid !important; background-color: #E73855; !important;}</style>
<style>
#s4-bodyContainer #titleAreaBox.ms-table, #s4-bodyContainer #titleAreaBox > #titleAreaRow {display:block;}
#s4-bodyContainer #titleAreaBox > #titleAreaRow > #siteIcon {float:none;display:block;margin:0 auto}
</style>
<style>
/* Page title text */
#pageTitle {
    color: #FFF;
    font-weight: normal;   
}
</style>
<style>
.ms-core-listMenu-horizontalBox a.ms-core-listMenu-item:hover, .ms-core-listMenu-horizontalBox a.ms-core-listMenu-item.ms-core-listMenu-selected:hover, a.ms-tv-item:hover, a.ms-tv-header:hover {
    background-color: transparent;
    color: #FFF;
}
.ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:link, .ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:visited, .ms-core-listMenu-horizontalBox .ms-core-listMenu-selected, .ms-tv-selected:link {
    background-color: transparent;
    color: #FFF;
}
</style>
<style>
.ctl00_PlaceHolderMain_ctl01_label
{
display: none !important;
}
</style>
<style type="text/css">
  .ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
   background-color: #CDB271;  
   font-family: Century Gothic;
   font-size: 24px;    
   font-weight: bold;  
   color: white;
   hover: white;
   padding: 5px 5px;}
</style>
<style>
.ms-webpart-titleText > a:hover {
    color: #FFF;
}
.article-content, .welcome-content {
    margin: 0px 0 0;
}
div.article, div.welcome {
    padding: 0px 0px;
}
</style>
<style>
.ms-webpart-titleText img {
    width: auto !important;
    height: auto !important;
    vertical-align: absmiddle !important;
}
</style>
<style>
.ms-alternating{
background-color: #F2F1EC;
}
</style>
<style type="text/css">
     .ms-webpartPage-root {
         border-spacing: 0px !important;
     }
       .ms-webpartzone-cell {
         margin: 0px !important;
     }
 </style>
<style>
#pageTitle
        {
           display:none;
        }
</style>
<style>
ul.ms-core-listMenu-root > li:first-child > a
{
    display: none !important; 
}
</style>
<style>
.ms-viewheadertr a,
.ms-viewheadertr div {
color: white;
font-family: Century Gothic;
font-size: 14pt ! important; }
.ms-vh2 {
font-family: Century Gothic;
font-size: 14pt ! important; }
.ms-vh {
font-family: Century Gothic;
font-size: 14pt ! important; }
.ms-viewheadertr {
font-family: Century Gothic;
font-size: 14pt ! important; }
.ms-viewheadertr {
background-color: #E73855; }
ms-headerSortTitleLink; {
color: white; }
</style>
<style>
table.ms-listviewtable {
    border-collapse: separate;
    width: 100% !important;
}
</style>
<style>
body {
    background-color: #5a5f6f !important;
}
</style>
<style>
#WebPartWPQ2{
background-color: white !important;
}
</style>
<style>
.ms-cui-topBar2 {
    border-bottom: 1px solid rgba( 239,239,239,0.78 );
    height: 34px;
    background-color: white;
}
</style>
<style>
.ms-webpart-chrome-title {
    vertical-align: middle;
    
    margin-bottom: -7px;
}
</style>
<style>
.ms-core-menu-title:hover{
   color: black; }
.ms-core-menu-title{
   color: black; }
</style>
<style>
div.spjs-tile-content span{
    text-align:center;

}
div.spjs-tile-content img{
           
}
</style>
<style>
s4-body.ms-backgroundImage {
   background-color: #1C1B38;
}
</style>
<style>
.ms-rte-layoutszone-inner {
    background-color: #fff;
</style>
<style>
.ms-siteicon-a {
   display:inline-block;
   max-width:180px;
   max-height:64px;
}
.ms-siteicon-img {
   display:block;
   max-width:180px;
   max-height:64px;
}
</style>
<style>
.ms-siteicon-img {

max-width: none;

max-height: none;

width: 581px;

height: 89px;

margin-

}
</style>
<style>
/* Width of entire Search Box */
.ms-mpSearchBox{
    width: 400px;
    background: rgb(233, 234, 232);
    border-radius:4px;
}

/* Modify default formatting for input */
.ms-srch-sb input {
    width: 330px;
    font-size: 14px;
    color: #000;
}

.ms-srch-sb, .ms-srch-sb:hover{
    padding-
    padding-bottom: 5px;
    background: #fff;
    border: 0px;
    border-radius:4px;
}

#searchInputBox{
    float:left;
    margin: -52px;
}

.ms-mpSearchBox {
    width: 380px;
    border-radius: 4px;
    background-color: #E73855;
}

</style>
<style>
#suiteBarLeft {
    background-color: #0A1C99;
</style>
<style>
#suiteBarLeft {
    background-color: #0A1C99;
</style>
<style>
/* Add colour to Quick Launch (side nav bar) */
#sideNavBox{
    background-color: #FFF;
}

.ms-core-listMenu-verticalBox {
    background-color: #1C1B38;
}
/* Folders/Headings */
.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-navedit-linkNode{

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#84BD00, endColorstr=#D7F1F7, GradientType=1); /* Gradient workaround for IE9+ */
    font-size:14px;
    padding-
    padding-
    padding-bottom: 7px;
    color: #FFF;
    font-family: MuseoSans300Regular, Arial, Helvetica, freesans, sans-serif;
    font-weight: normal;
    border-bottom: 1px #F4F4F4 solid;
}
.ms-core-listMenu-item:visited{
    color: #FFF;
}

.ms-core-listMenu-heading{
    font-weight:bold;
}

li > a.ms-core-listMenu-item.ms-core-listMenu-selected:hover, li > a.ms-core-listMenu-item:hover, .ms-core-listMenu-heading:hover{
    background-color:#999;
    color:#fff;
}

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item{
    padding-
    padding-bottom:7px;
    padding-
}

li > a.ms-core-listMenu-item.ms-core-listMenu-selected{
    background-color: #CDB271;
    color: #FFF;
}

.ms-core-listMenu-item, .ms-core-listMenu-item:link{
    color:#FFF;
}
</style>

推荐答案

我们可以在下面添加CSS样式，以使网站徽标左对齐.

We can add the CSS style below to make the site logo left align.

<style>
#siteIcon 
{
	text-align:left;
}
</style>

最好的问候，

丹尼斯

这篇关于无法使用自定义CSS左对齐.ms-siteicon-img的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！