Moving the “welcomeMenuBox” Div to be at the right most side of the page

Question

I have added the following to my seatle.master page, to display the current date and time and I moved the search box to be in the upper side of the page.as follow:-

<div id="welcomeMenuBox" style="text-align:right">

  <wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false" />

<p id="currentdate" ></p>

<p id="currenttime" ></p>

<div id="uppersearch">

<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="ms-mpSearchBox ms-floatRight" runat="server">

  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">

               <div id="searchInputBox">

                 <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />

               </div>

  </asp:ContentPlaceHolder>

</SharePoint:AjaxDelta>              

 </div>

  </div>

But the result was as follow:-

So how I can shift the date&time and search box to be at the right most side of the page?

Answer 1

To get the elements to go againts the right side of the screen, you'll need to place them in the suiteBarButtons div instead of the welcomeMenuBox div.  However, you'll then have the welcomeMenuBox pushed to the left for the width of the search box, you can adjust that a bit with css but it may not be exactly what you're looking for.

Answer 2

To get the elements to go againts the right side of the screen, you'll need to place them in the suiteBarButtons div instead of the welcomeMenuBox div.  However, you'll then have the welcomeMenuBox pushed to the left for the width of the search box, you can adjust that a bit with css but it may not be exactly what you're looking for.

thanks for the reply, but placing them in the suiteBarButtons Div,   will not produce what i am looking for as the username drop down list will become out of the layout as follow:-

Answer 3

Maybe try adding some new spans/divs to get what you are looking for.  I assume you would like the username dropdown and site icons to stay where they are, and the date/time/search to appear below.

So for example, try nesting as follows:

<div id="new_group_lvl1">
  <div id="new_group_lvl2" style="text-align:right">
      <div id="welcomeMenuBox">
          ....existing code goes here.....
      </div>
      <div id="suiteBarButtons">
          ......existing code goes here.......
       </div>
   </div>
   <div id="date_time_search" style="text-align:right">
         .....new code goes here....
   </div>
</div>

I confirmed in my environment that this should work - assuming this is what you are looking for.

Answer 4

Maybe try adding some new spans/divs to get what you are looking for.  I assume you would like the username dropdown and site icons to stay where they are, and the date/time/search to appear below.

So for example, try nesting as follows:

<div id="new_group_lvl1">
  <div id="new_group_lvl2" style="text-align:right">
      <div id="welcomeMenuBox">
          ....existing code goes here.....
      </div>
      <div id="suiteBarButtons">
          ......existing code goes here.......
       </div>
   </div>
   <div id="date_time_search" style="text-align:right">
         .....new code goes here....
   </div>
</div>

I confirmed in my environment that this should work - assuming this is what you are looking for.

Thanks for the reply, the date and time was shifted correctly but i am not sure why i have blue  boarder around my  company logo as follow, baring in mind that before applying the new changes the logo  did not have any blue boarder around it :-

Answer 5

My thought is you are seeing some colour around the logo is due to the increased hight of the suitebar with the addition of the date/time/search lines and the logo is too small to fully cover the new area, so you are seeing the background colour above and below the logo.  Maybe try adjusting the height of the logo in CSS to see if that helps.

.ms-siteicon-img {max-height:<newheighthere> }

If you've kept it in the original code snippet that should be what needs to be adjusted.

Answer 6

My thought is you are seeing some colour around the logo is due to the increased hight of the suitebar with the addition of the date/time/search lines and the logo is too small to fully cover the new area, so you are seeing the background colour above and below the logo.  Maybe try adjusting the height of the logo in CSS to see if that helps.

.ms-siteicon-img {max-height:<newheighthere> }

If you've kept it in the original code snippet that should be what needs to be adjusted.

thanks a lot for your reply, i have actually changed my logo using the following script :-

$webApp = Get-SPWebApplication http://gvstg01:40708
$webApp.SuiteBarBrandingElementHtml = '<a href="/sites/Intranet/"><img src="/sites/Intranet/SiteAssets/logo_CMYK.png"/></a>'
$webApp.Update()

so i did not specify any height or width ..

Answer 7

Try changing the height of the image in the png file?  Or add a height tag to the code such as this:

$webApp.SuiteBarBrandingElementHtml = '<a href="/sites/Intranet/"><img src="/sites/Intranet/SiteAssets/logo_CMYK.png" height="###"/></a>'

Answer 8

You are right , i just modify the .png logo height and width and it have expanded as needed.