0

I'm using a copy of the Oslo master page with some custom css for branding. Now I'm trying to move the search box towards the center of the page, positioning it directly after the top navigation bar. No matter what I do, however, the search box is sticked to the far right of the screen. Does anyone have a solution for how to accomplish this?

I'm still a SP newbie and having a hard time wrapping my head around how the master page and it's default css-classes play together with my custom css. Any help would be appreciated.

enter image description here

<div id="titlerow" class="ms-dialogHidden ms-core-header ms-tableRow">
                    <div id="titleAreaBox" class="ms-noList ms-table">
                        <div id="titleAreaRow" class="ms-tableRow">
                            <div id="siteIcon" class="ms-tableCell ms-verticalAlignBottom">
                                <!--CS: Start Site Logo Snippet-->
                                <!--MS:<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server">-->
                                    <!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" id="onetidProjectPropertyTitleGraphic">-->
                                        <!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=23" runat="server">-->
                                            <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ctl00_onetidHeadbnnr2" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="http://sptst01global.beijerelectronics.com/_layouts/15/images/siteIcon.png?rev=23" alt="Content site" /><!--PE: End of READ-ONLY PREVIEW-->
                                        <!--ME:</SharePoint:SiteLogoImage>-->
                                    <!--ME:</SharePoint:SPSimpleSiteLink>-->
                                <!--ME:</SharePoint:AjaxDelta>-->
                                <!--CE:End Site Logo Snippet-->
                            </div>
                            <div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignBottom">
                                <h1 id="pageTitle" class="ms-core-pageTitle">
                                    <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageSiteName" class="ms-core-navigation" runat="server">-->
                                    <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server">-->
                                    <!--SPM:<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitle1">-->
                                    <!--SPM:<SharePoint:ProjectProperty Property="Title" runat="server"/>-->
                                    <!--PS: Start of READ-ONLY PREVIEW (do not modify)-->Default Publishing Site<!--PE: End of READ-ONLY PREVIEW-->
                                    <!--SPM:</SharePoint:SPLinkButton>-->
                                    <!--SPM:</asp:ContentPlaceHolder>-->
                                    <!--SPM:</SharePoint:AjaxDelta>-->
                                </h1>
                                <!--SPM:<SharePoint:AjaxDelta id="DeltaHorizontalQuickLaunch" class="ms-core-navigation ms-belltown-quicklaunch" role="navigation" BlockElement="true" runat="server">-->
                                <div class="ms-quicklaunchouter">
                                    <div class="ms-quickLaunch">
                                        <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div><div class="noindex ms-core-listMenu-horizontalBox"><ul class="root ms-core-listMenu-root static"><li class="static selected"><span class="ms-core-listMenu-horizSeparator">|</span><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabIndex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Home</span><span class="ms-hidden">Currently selected</span></span></a></li><li class="static"><span class="ms-core-listMenu-horizSeparator">|</span><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabIndex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">About Us</span></span></a></li><li class="static"><span class="ms-core-listMenu-horizSeparator">|</span><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabIndex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Contact Us</span></span></a></li><li class="static"><span class="ms-core-listMenu-horizSeparator">|</span><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabIndex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Directions</span></span></a></li></ul></div></div><!--PE: End of READ-ONLY PREVIEW -->
                                        <!--SPM:<Sharepoint:SPNavigationManager id="QuickLaunchNavigationManager" runat="server" QuickLaunchControlId="V4QuickLaunchMenu" ContainedControl="QuickLaunch" EnableViewState="false">-->
                                        <!--SPM:<SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">-->
                                        <!--SPM:<Template_Controls>-->
                                        <!--SPM:<asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ShowStartingNode="False" id="QuickLaunchSiteMap" StartingNodeUrl="sid:1025" runat="server"/>-->
                                        <!--SPM:</Template_Controls>-->
                                        <!--SPM:</SharePoint:DelegateControl>-->
                                        <!--SPM:<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Horizontal" StaticDisplayLevels="1" DynamicHorizontalOffset="0" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=23" StaticPopoutImageTextFormatString="" SkipLinkText="" StaticSubMenuIndent="0"/>-->
                                        <!--SPM:</Sharepoint:SPNavigationManager>-->
                                    </div>
                                </div>
                            </div>
                            <div class="ms-tableCell ms-verticalAlignTop">
                                <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageHeader"  class="ms-belltown-pageheader" BlockElement="true" runat="server">-->
                                <!--SPM:<SharePoint:DelegateControl runat="server" ControlId="PageHeader" AllowMultipleControls="false"/>-->
                                <!--SPM:</SharePoint:AjaxDelta>-->
                                <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" class="ms-belltown-searcharea" BlockElement="true" runat="server">-->
                                <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-belltown-searcharea" id="ctl00_DeltaPlaceHolderSearchArea"><!--PE: End of READ-ONLY PREVIEW-->
                                <div class="ms-pub-logon">
                                    <!--SPM:<wssucw:Welcome id="IdOsloWelcome" runat="server" EnableViewState="false"/>-->
                                </div>
                                <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">-->
                                    <div id="searchInputBox" class="ms-tableCell">
                                        <!--SPM:<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox"/>-->
                                        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_SmallSearchInputBox1_csr_sboxdiv"><input type="text" value="Search This Site..." maxlength="2048" accessKey="S" title="Search This Site..." id="ctl00_SmallSearchInputBox1_csr_sbox" autocomplete="off" autocorrect="off" class="ms-srch-sb-prompt ms-helperText" /><a title="Search" class="ms-srch-sb-searchLink" id="ctl00_SmallSearchInputBox1_csr_SearchLink" href="javascript: {}"><img src="http://sptst01global.beijerelectronics.com/_layouts/15/images/searchresultui.png" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a></div></div></div><div componentid="ctl00_SmallSearchInputBox1_csr" id="ctl00_SmallSearchInputBox1_csr"></div><div id="ctl00_SmallSearchInputBox1"></div><div class="ms-clear"></div></div></div><!--PE: End of READ-ONLY PREVIEW-->
                                    </div>
                                    <!--SPM:</asp:ContentPlaceHolder>-->
                                <!--SPM:</SharePoint:AjaxDelta>-->
                                <!--PS: Start of READ-ONLY PREVIEW (do not modify)--></div><!--PE: End of READ-ONLY PREVIEW-->
                                <!--SPM:</SharePoint:AjaxDelta>-->
                            </div>
                        </div>
                    </div>
                </div>
0

Change the css property of

ms-breadcrumb-box

width: 100% 

to

width: auto;

enter image description here

  • That did move everything (both the navbar and the search box) more to the center. There is still, however, a big gap between them. The div with the class "ms-breadcrumb-box" is almost twice the width of the div with ID "zz12_V4QuickLaunchMenu" (which contains the navbar/menu elements). Any suggestions? – arvnik Mar 16 '17 at 7:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.