Customizing CSS for theming

Nov 13, 2013 at 10:14 PM
Can I customize the CSS that you are dishing out with a custom bootstrap theme? If so, can one point me in the right direction on how to take an existing bootstrap CSS file with theme/color and apply it to this mod?

-Costoda
Coordinator
Nov 14, 2013 at 5:50 AM
Hi Costoda,

That is a good question. A bootstrap theme should work just fine, but I am not sure how much that would affect SharePoint. SharePoint provides so many styles of its own that a Bootstrap theme likely won't address enough elements for you.

All you should have to do to apply a theme would be to update the Master Page to either link to your custom bootstrap css stylesheet, or add another reference after bootstrap.min.css to your theme file.

I would suggest looking at composed looks to augment Bootstrap if you are working with SharePoint 2013. Composed Looks are essentially 2010 themes all beefed up.

I hope this helps.

Eric
Nov 14, 2013 at 8:02 PM
Eric,

It looks like the stuff you do in the bootstrap3-custom.css file to fix the left and top navigation bars break most of the themes I've tried from various online sites regarding a:link color and selecting. I'm having issues where text selection is causing extra selection bars across the entire page with the navigation menu on the left. I'm diving into the source code now of this file since both CSS files provided in the WSP file are min based and it's hard to read those to figure out what you are doing.

-Costoda
Nov 14, 2013 at 8:41 PM
Found the items in the custom file you are providing:

li > a.ms-core-listMenu-item:link, .ms-core-listMenu-item:hover, li > a.ms-core-listMenu-item:active { ... }
.ms-navedit-editLinksText > span > .ms-metadata, .ms-navedit-editLinksText > span > .ms-navedit-editLinksIconWrapper { ... }
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item, .ms-navedit-editLinksText { ... }

I'm providing a custom Site.css file with changes for these and it's working so far.

I noticed now when I look at the site in mobile that the left side navigation bar doesn't follow the normal theme colors. I'm looking into that next. Odd that the top navigation bar takes the theme properly but the side doesn't. Any ideas why that is? Looks like you convert it to a bootstrap nav, no idea why it wouldn't take the standard bootstrap CSS stuff. If you don't have time to answer that, no big deal I'll dig further down the CSS rabbit whole.

-Costoda
Developer
Nov 15, 2013 at 5:44 AM
Hi Costoda,

Let me chime in since Ugo and I are responsible for the WSPs. We did diverge a bit from the stock Bootstrap and Foundation master pages Eric originally built and I believe that one of the improvements we made was to make the left navigation bar show up as a mobile menu, while it previously was completely hidden.

We also made a conscious choice to show the top bar menu and the left nav menu in different colors (it really did not look that good in our first interations when they were both black), but feel free to override these colors in a custom stylesheet file that you can insert after the bootstrap3-custom.css file.

Also, though we did minify the CSS and JS files in the WSPs, the original files are available in the Visual Studio solution that you can find in the source code in the... VisualStudio folder, of course ;-)

I hope this helps!

Raphael.
Nov 15, 2013 at 4:09 PM
Rapheal,

Thank you for all the hard work you did on this. It is really amazing to see bootstrap actually work for the most part with SharePoint 2013. My hats off to you. And I'm greatful for the work that you did with the left navbar. It's nice to see it included.

My only issues are really tying to make this work like bootstrap does out of the box with a theme file. I'm really spending a lot of time going through the customization file trying to find all the stuff you did to make the left menu something other than the default navbar stuff. The colors you picked really don't work well with the theme file I have.

Only recommendation I could make is to maybe move the coloring of the navbar or any other kind of stuff that fights the built in stuff in bootstrap to a seperate css file that people can include or not include depending on if they like the stock bootstrap theme navbar, etc for the left navbar. Kind of both sides of the fence win.

Then again, maybe I'm the only guy that doesn't like the stock colors in bootstrap.

-Costoda
Developer
Nov 26, 2013 at 7:57 AM
Hi Costoda,

Thank you for the kind feedback and suggestion. I guess that the custom CSS would actually deserve more comments to make it easy for folks to find the relevant pieces they can comment out or modify (I am not sure that separating our custom CSS into multiple files will be very useful though).

In the meantime, can I suggest you use the IE developer toolbar or the Firefox Inspector to easily find the properties (like background color) of specific HTML controls? Those tools are usually very helpful to determine which css file and class is responsible for specific properties of an HTML object.

Raphael.