【问题标题】:How to put SharePoint 2013 logo above menu?如何将 SharePoint 2013 徽标放在菜单上方?
【发布时间】:2017-03-21 19:58:26
【问题描述】:

有没有办法将徽标从其默认位置(菜单左侧)移动到菜单上方?我找不到任何有关如何执行此操作的资源。

我已尝试下载现有母版页(西雅图)并对其进行更改(并签入等),并进行了一些调整,但没有任何影响,以至于我不得不验证它实际上是否处于活动状态。

一个改变包括移动这个:

<div id="siteIcon" class="ms-tableCell ms-verticalAlignTop">
<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server">
    <SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server"   id="onetidProjectPropertyTitleGraphic" >
        <SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=23" runat="server"/>
    </SharePoint:SPSimpleSiteLink>
</SharePoint:AjaxDelta>
</div>

从第 354 行到各个位置,例如第 216、217、218 或 219 行上方,或 326 之后(在功能区部分上方)。不用找了。我承认是在猜测。

【问题讨论】:

    标签: css sharepoint sharepoint-2013 master-pages


    【解决方案1】:

    您可以通过 CSS 执行此操作。甚至不一定需要编辑母版页。

    #s4-bodyContainer #titleAreaBox.ms-table, #s4-bodyContainer #titleAreaBox > #titleAreaRow {display:block;}
    #s4-bodyContainer #titleAreaBox > #titleAreaRow > #siteIcon {float:none;display:block;margin:0 auto}
    

    要获得您想要的任何其他格式,当然需要其他样式:) 但这将使站点图标居中。

    【讨论】:

    • 嗨,马丁。这很好,但我实际上想要它在左边。此外,它仍然很小,我需要将徽标做得更大一些。我一直在尝试调整您的代码以修复两者,但还没有弄清楚。还有其他提示吗?
    • 如果你想要它更大,只需将#siteIcon 的高度/宽度设置为你想要的任何大小。
    • 谢谢,但这似乎不对。如果我设置 height 属性,#siteIcon 会使它周围的容器更大。通过 Chrome 的开发工具深入研究,我发现: 但这没有效果(如果我以 img id 为目标)。有任何想法吗?我无法影响徽标的大小或使其位于左侧(居中)。谢谢
    • 好吧,我把它变大了:.ms-siteicon-img { max-height: 200px;最大宽度:500px;现在我只需要把它放在左边而不是居中
    • 好的,当然,将“#siteIcon {float:none}”更改为 float:left。在我所有的修补中丢失了那个细节。
    【解决方案2】:

    完整的答案在这里,基于 Maarten 的。这包括隐藏左侧导航。我不得不将#siteicon(一个容器)提高到 100 像素高,以便在徽标和它下方的菜单之间添加一些空间。

    <style type="text/css">
    
    #sideNavBox { display: none; }
    #contentBox { margin-left: 20px; }
    #topNav {  margin-top: 50px; }
    
    #siteIcon { height: 100px; }
    
    .ms-siteicon-img {
    max-height: 200px;
    max-width: 500px; }
    
    #s4-bodyContainer #titleAreaBox.ms-table, #s4-bodyContainer #titleAreaBox > 
    #titleAreaRow {display:block;}
    
    #s4-bodyContainer #titleAreaBox > #titleAreaRow > #siteIcon 
    {float:left;display:block;margin:0 auto;}
    
    </style>
    

    【讨论】:

      猜你喜欢
      • 2019-07-07
      • 1970-01-01
      • 1970-01-01
      • 2018-12-06
      • 1970-01-01
      • 1970-01-01
      • 2015-07-16
      • 1970-01-01
      • 2021-10-09
      相关资源
      最近更新 更多