0

I'm new to branding SharePoint and I've been asked to overhaul the look of the global navigation bar in SP 2013. I've read that I can change a lot of elements such as ms-breadcrumb-top and menu-item-text

However, in the dev toolbar, I'm finding that it would be useful to change some of these elements that appear to be specially named. 

#zz12_TopNavigationMenu
#ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager
#zz14_V4QuickLaunchMenu
#zz15_RootAspMenu

It looks to me as if they're dynamically generated depending on what I have on the page. Which leads me to believe I should leave them alone.

Is it ok to apply CSS styles to these or will they change? What's the general rule of thumb?

I know there's more.. but these are examples.

|improve this question
4

The ID will remain the same on your single SharePoint-Environment, but it can be different on other site collections.

The name and the zz are always the same, but the number will change, so you have to build your css with wildcards, e.g.:

div[id^=zz][id$=_TopNavigationMenu] {
  display: none;
}
|improve this answer
0

You can use these IDs as it is. That will remain same every time. You can use jquery like:

$("#s4-workspace").hide();

or you can also use wildcard for these Ids.

You can also show hide on the basis ofcss class name. Also check:

How To Hide The Last Top Nav Tab in SharePoint 2010

http://geekswithblogs.net/venkatx5/archive/2010/11/17/how-to-hide-top-bar-ribbon-quick-launch-in-sharepoint.aspx

http://www.codeproject.com/Tips/363642/Hiding-Title-Bar-Navigation-Breadcrumb-section-in

|improve this answer
  • If I want to keep it in css, and hide that particular element, I could also do #s4-workspace{display:none;}, right? So you are saying that I CAN apply styles to the elements that I mentioned in my post? What do you mean "use wildcard for these ids"? – spex5 Sep 12 '14 at 15:44
  • Yes you can keep it in css. By wildcard i meant in jquery you can select the element using wildcard like $('div[id^="list_"]') – Aanchal Sep 12 '14 at 15:47
  • Can you please explain what those elements in my original post are, what they mean, and what they do? (zz, ct..) – spex5 Sep 12 '14 at 15:50
  • I just noticed that in some cases one of the elements is zz13_TopNavigationMenu chrisstahl.files.wordpress.com/2013/11/htmlnav.png However, on my site, it's zz12_TopNavigationMenu.. Can anyone explain this or tell me where it is explained? – spex5 Sep 12 '14 at 17:17
  • @Aanchal Selecting with wildcards is not a jquery feature. It's a normal css selector, which can be used in CSS-Files and in vanilla JavasScript with document.querySelectorAll(). See youmightnotneedjquery.com :-) – Fensterbank Sep 15 '14 at 7:37

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.