如何将 SharePoint 2013 徽标放在菜单上方？答案

【问题标题】：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>

【讨论】：