0

Disclaimer: I am not a programmer and a relative SP newbie. I have inherited the role in our district to maintain the site and am learning enough to be dangerous, but far from a power user!

We upgraded to SP2016 in May and I want to update the default look. I found some code and customized it to my liking and it worked great in a webpart script...the problem is it was only on that particular site. I wanted it to span ALL sites / subsites, so I saved a CSS file and called that file in the Seattle.html (I assume this is all correct so far). The problem is it did NOT work. The homepage's top toolbar now has invisible text (only shows up on mouseover). I'm not sure how this happened.

I deleted the reference and the CSS file, so the default toolbar is now in place. However, if I place the CSS in a webpart script (like I originally did), it goes back to the invisible text! I even restored a previous version of the Seattle.html (before I edited it) and the same results! I can successfully use the CSS in a script on other site/subsites and it works fine.

How it should look: My top toolbar

How it looks now though: Broken toolbar

<style>
/*** Top Navigaion Menu Items container DIV ***/
.ms-core-listMenu-horizontalBox {
background: linear-gradient(to bottom, #34597a 40%, #152e55 60%);
} 

/*** Top Navigaion Static Menu Items ***/
.ms-core-listMenu-horizontalBox li.static {
border: 1px solid white;
}

/*** Top Navigaion Static Menu Item Links  ***/
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
white-space: nowrap;
border: 1px solid transparent;
padding: 10px;
padding-left: 5px;
margin-right: 1px;
} 

/* Top Navigation static Menu Item Links Hover Style  */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
background-color: #0A85C4;
color: #fff;
text-decoration: none;
}

/*** Top Navigaion Static Menu Selected ***/
.ms-core-listMenu-horizontalBox li.selected a.selected {
background: linear-gradient(to bottom, #34597a 40%, #152e55 60%);
color: #fff;
text-decoration: none;
border: 1px #134072 solid;
padding: 10px 10px;
margin: 1px;
} 


/*** Sub-Menu/Flyover/Dynamic Menu Container ***/
ul.dynamic {
border: 1px solid #34597a;
padding: 1px;
margin-top: 5px;
} 
/***  Sub-Menu Items (HyperLinks) Style ***/
ul.dynamic .ms-core-listMenu-item {
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color:#34597a;
padding: 10px 10px 10px 10px;
white-space: nowrap;
} 


/*** Sub-Menu Items (HyperLinks) Hover Style ***/
ul.dynamic .ms-core-listMenu-item:hover {
background-color: #0A85C4;
color: #FFF;
} 

/** Hide "Edit Links" ***/
.ms-listMenu-editLink {
display: none !important;
}
</style>  
  • I tested the code that you provided and it worked fine in my environment. What browser are you using? Can you duplicate the missing background in multiple browsers and on multiple computers? Are you familiar with inspector tools like in Firefox? If so, that is a quick way to debug your code and discover what is preventing proper display. – Heather Solomon Sep 12 '18 at 21:39
  • Also, you don't have a backup included in your CSS for background when you specify the linear gradients. I suggest adding that in: background: #34597a linear-gradient(to bottom, #34597a 40%, #152e55 60%); – Heather Solomon Sep 12 '18 at 21:41
  • Majority of users in our district use IE11 as that was all that was allowed until literally two months ago (Chrome was added). So I had been solely testing in IE11, but I just tried it in Chrome and it works fine. – Andrew Sep 14 '18 at 17:53
  • The issue that really puzzles me is the code works on any other sites / subsites that I add it to - it just doesn't on our homepage. I cannot for the life of me figure out why. Ultimately I want it called from the master.html so that it is standard across our entire platform rather than me manually add to each page. I'll have to test that out again and use Chrome this time out of curiosity. – Andrew Sep 14 '18 at 17:56
1

Since you stated that your code is not working in IE11 but works in Chrome and I successfully tested the code in Firefox, I suggest you try this:

.ms-core-listMenu-horizontalBox {
  background-color: #34597a;
  background-image: -ms-linear-gradient(to bottom, #34597a 40%, #152e55 60%);
  background-image: linear-gradient(to bottom, #34597a 40%, #152e55 60%);
}

The -ms- prefix may help you out. Even though IE11 supports linear gradients, SharePoint may be triggering IE to render as an older version based on a meta tag (or lack of) in the master page. At a minimum you will get a solid background so your text appears, even if the browser does not properly show the gradient.

  • First off, you're incredibly helpful, so thanks for taking the time. Adding the background helped with my "invisible" issue on the homepage. In IE11 it defaults to the 34597a, but no gradient. The gradient renders properly in Chrome. I can add my old (or your new revised) code to any other page / site and it renders properly in IE11. Just not our main homepage. No idea why, but at least I have something usable now. – Andrew Sep 17 '18 at 15:12
  • As an update...maybe I'm doing something wrong. I opened Notepad, pasted the new code in its entirety, saved as a .css, and uploaded to my themes folder. I then called the file using this <!--SPM:<SharePoint:CssRegistration Name="https://MY-SITE/AE_top_toolbar.css" runat="server" After="corev15.css" />--> immediately AFTER the <!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->. Now no matter which browser I use, the toolbar is invisible!! If I delete the reference out of the Seattle.html and add the css as a webpart snipit instead, it works perfectly.. – Andrew Sep 17 '18 at 15:31
  • Did you publish the CSS file? When you use CSSRegistration, the CSS file must be checked in and published in order to load in your site. You don't need to use CSS Registration or store your CSS in the themes folder. You can just link to a CSS file like you would in regular HTML and upload the CSS file to the Style Library. <link rel="stylesheet" type="text/css" href="insert path and CSS file here"/> – Heather Solomon Sep 17 '18 at 17:03
  • I'm happy to hear I was able to help. As for your home page with no gradient issue, you can check to see if the home page is using a different master page and if so, is it providing a meta tag that specifies which version of IE to render as. You can check for the same issue in the page layout being used by the home page. You can also use IE's inspector to see if the gradient is being overridden by something else coming from either the master page, page layout or a script editor web part on the page. I would start here (with the inspector) to track down what is happening with the gradient. – Heather Solomon Sep 17 '18 at 17:11
0

Just an addition to the excellent answer provided earlier.

You may need to use the !important to override another css file being used by SP from somewhere else.

.ms-core-listMenu-horizontalBox {
  background-color: #34597a !important;
  background-image: -ms-linear-gradient(to bottom, #34597a 40%, #152e55 60%) !important;
  background-image: linear-gradient(to bottom, #34597a 40%, #152e55 60%) !important;
}

It is obvious that the Browser Wars are still going strong. MS edge behaves differently from IE11 and Firefox, and Chrome, etc... Depending on your circumstances, develop towards your client base.

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.