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

Improve this question
1
  • 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, 2018 at 0:42

1 Answer 1

Reset to default
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

Improve this answer
3
  • 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, 2018 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, 2018 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, 2018 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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