Multiple Sites with Varying Designs in a Single CSS File
Hi, everyone! It’s your friendly neighborhood SharePoint hacker Dustin here with a slick trick you have to try out to believe!
Recently, Heather wrote an article (Master Pages, who needs them anyways?) that talked about creating your custom designs in SharePoint using only a single Master Page. From the very first delivery of our SharePoint UI/UX Class, our students have excitedly jumped on board – it’s amazing just how much you can do with a single master page!
One student in particular spoke up: “Okay, great, one master page to rule them all. What about one CSS file? Any fancy tricks that will let me keep all my design work for all the sites and site collections in my entire farm in a single CSS file? Even those department sites that want different colors?”
It didn’t seem like too much to ask. Continue reading →
SharePoint master pages, who needs them anyways?
A common misconception about SharePoint master pages is that you need several of them. In our SharePoint UI/UX class, Dustin and I meet people who have created several master pages for their SharePoint sites(s) due to branding and site layout needs. Based on design differences, a master page is created for the home page, another master page for the sub pages, and perhaps even another master page for sub site(s) that need different branding and/or layout. There are very few reasons to have more than one master page, and differing home page vs. sub page vs. sub site designs isn’t one of them. Continue reading →
CSS specificity (weight) and SharePoint
When dealing with SharePoint CSS one of your biggest friends is specificity. It also happens to be one of the harder things to wrap your head around, especially if you are just getting into creating and editing CSS. Specificity is a key thing to understand for SharePoint branding and something that I cover in all my branding classes. Continue reading →
Branding SharePoint can be a great experience or can be a swirling vortex straight into coding hell. It can also fall anywhere on that scale. :-) Help avoid a swirlie by checking out these top mistakes in SharePoint branding. Continue reading →
I recently posted some methods for styling SharePoint web parts using attribute selectors. I heard back from several people about how they can’t use this option due to IE6′s lack of support for attribute selectors. I was aware of this at the time of the post but neglected to point it out in the post text. Continue reading →
I often get questions about how can a particular web part be branded separately from all the rest or be branded by type. For example you want every Contacts list to have a green header bar instead of a tan header bar. Or perhaps you want a column of web parts on a page to look different than the main area that contains other web parts.
The latter I have always had a solution for, the former I figured out something today. As with everything that I focus on, these are “no custom development” / “no .NET code” solutions. You can usually build whatever customization you need with custom code. If you would like to just rely on CSS however, here you go….
Controlling Single Web Parts with CSS
I often get questions about how can a particular web part be branded separately from all the rest or be branded by type. For example you want every Contacts list to have a green header bar instead of a tan header bar. Or perhaps you want a column of web parts on a page to look different than the main area that contains other web parts. Continue reading →
If you are working with the default navigation menus in SharePoint, you may come across the need to modify the sub menu arrow that appears to the right of the navigation text, see a screen shot: View image. Continue reading →
Application screens (a.k.a. “_layouts” screens) usually don’t display the search in the header. There does appear to be a few screens out there that do, and depending on your design for application screens, this may throw a wrench in how your page looks. To stop the search from showing in any application screen, add the following CSS style to your theme or alternate CSS file:
.ms-searchform {
display: none
}
I recently discovered that your custom master page may affect the Gantt view of a SharePoint list. I have seen the colored task bars extend past the framed container of the chart when a custom master page and CSS is applied to the site. If this happens to you, you can try the following:
- Systematically strip out the CSS and HTML to identify what code is causing the problem. Be sure to make backups of your files first.
- Adjust the DOCTYPE tag that you are using. When this happened to me, I had to go way back and use the following DOCTYPE to get the Gantt view to show correctly: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
And finally, add this on to your list of items to test while developing custom master pages for SharePoint!
