1

Sorry the (what I believe is) very basic question. I am in doing (trying to do) some branding in our company's intranet site, which uses SPS2013. The site is a publishing site.

I posted the two questions I wanted to ask in the illustration attached. I am sorry I am not allowed to share the real site screenshots. I can post the codes, though, if necessary.

enter image description here

If my question is obscure or lack information, please let me know. I am a long time SPS user but new to branding it. Thank you in advance.

enter image description here

  • I wanted also to add that I want to achieve this by: -Using CSS only (ideally) -Using CSS and jQuery or JS (if the above is not possible) - Modifying master pages (if the above both are not possible. In this case, I'll be very glad if I could get a more step-by-step-like explanation) – Jim Moriya Nov 21 '18 at 0:42
1

You can play around on below mentioned CSS selectors:

// to Hide the page Title

.ms-core-pageTitle{
   display: None !important;
}

// change the size of breadcrumb

.ms-breadcrumb-box{
    background-color: #1a5276 ;
    height: 0px !important;

}

// change the Top navigation color, size , location


.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{
    color: White !important;
    margin-top: 8px;
}

//modify the search box

.ms-mpSearchBox{
    background-color: #1a5276;
    padding-top: 3 px !important;
    padding-left: 3 px;
}

#searchInputBox{
    padding-top: 2px;
    padding-right: 2px;
}

.ms-srch-sb-border{
    border: 2px solid white;
}

.ms-helperText, input.ms-helperText{
    color: white !important;
}

You can put this css altogether in script editor and add it on your page.

enter image description here

  • Thank you very much for the proposed answer. It seems I wasn't clear enough about what I wanted to achieve, so I edited my previous post adding another graphic illustrating what I looks now and what I want it to look like. Hope this helps understanding what I need. – Jim Moriya Nov 21 '18 at 0:32
  • Hi Jim, My answer is same, you can play around with given CSS selector and added my demo image in my previous post.. – THIVAGAR SEGAR Nov 21 '18 at 9:39
  • Thank you! Can I clarify two things? 1) Because I wanted each item in my menu to look button-like, I added some CSS/jQuery. But when I do that, because of the background-color and border lines, it becomes clear that the text (green) is not centralized to its container (orange). How can I centralized the text here? 2) In the image you provided we can see that we have exactly what I have now (as in my illustration above). Do you have idea how we can stretch the ms-breadcrumb-top so the HOME (in your image) goes to the far left and the other items are distributed along the page? – Jim Moriya Nov 21 '18 at 10:35

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.