SharePoint 2007 (MOSS) Branding CSS Tricks

Having done branding (meaning applying custom CSS to change colors, fonts, etc.) to quite a few MOSS Site Collections, I wanted to offer a few tips and tricks to keep things clean and easy to maintain.  I’ve mentioned some of these tips before, but I wanted to get them all into one post so that they could be more useful.

  • Never edit default.master; take a copy and name it something logical, like myportal.master.  You might need default.master again, and once you customize it, you are out of luck.
  • Edit your myportal.master as you need to in SharePoint Designer.  I usually limit these edits to images that I want on every site in the Site Collection and changes to Web Part Zones that should apply across the board.
  • Attach a custom CSS file to your master page.  I store this custom CSS in the Style Library folder and I name it the same as my master page, e.g, myportal.css.  Storing it in the Style Library folder means that it will be backed up with the rest of the Site Collection.  (You have set up daily backups of your Site Collection, right?!?!?)
  • Definitely, definitely, definitely install the Internet Explorer Developer Toolbar.  This invaluable tool does many things, but most importantly for this exercise, you can use the Find / Select Element By Click option to figure out what CSS classes you want to override.
  • Only add classes and elements into the custom CSS that you are using to override the default.  If you copy and paste from core.css (the default CSS file) using Designer, you will get the entire class’s definition.  This will make your custom CSS much bigger than it should be and more confusing to maintain.  Here’s an example…If you copy from core.css, you might have:

    .ms-globalbreadcrumb {
        font-size: 8pt;
        text-align: right;
        background-color: #FFFFFF;
        padding: 2px 10px 2px 5px;
    }

    If you only want to change the background color, then you should have:

    .ms-globalbreadcrumb {
        background-color: #FFFFFF;
    }

    since this is the only thing that you are overriding.

  • Be sure that you only include each class once in your custom CSS.  If classes exist more than once it will cause you problems because you will probably change the first one and then the second one will override your override!
  • Try to keep the CSS classes in an order that generally goes from the top left of the page to the bottom right, just like the way you read a page.  It makes finding things easier and is worth the little bit of extra effort it takes.
  • Comments are good!
  • Don’t forget to check in a major version of your master page and approve it, and check in your custom CSS (no need to approve here).  If you don’t, you will see all of your changes, but everyone else will be asking you why you haven’t changed anything!

 

Technorati tags: , , , ,

9 Comments

  1. Thanks for your quick response and the offer of getting in touch with you…somehow I have a feeling I will take you up on that one or or another time, as I am not really a web developer kinda guy, but somhow this project ended up in my lap ;-)
     
    Thanks again,
    Marcus. 
    Reply
  2. Marcus:
     
    Glad to hear that you found this useful!  Feel free to get in touch with questions if I can help along the way: marc dot anderson at jornata dot com.
     
    As for the classroom training, no I have not taken that course.  However, looking at the outline it seems to cover an awful lot.  You might want to decide what specific things you need to know and see if there aren’t more focused courses on those topics (for instance, you might not be interested in the BI piece).
     
    M. 
    Reply
  3. Marc,
     
    This is awesome information. I was toying with the idea to customize some of the CSS of our intranet portal since some time now, especially font sizes and colors. With the above info I feel a little more confident to not screw things up completely ;-)
     
    On another note, and I am not sure if you have any idea about this subject, but as I am primarily responsible for maintenance and design of our corporate intranet, I am interested in some MS classroom training. Did you ever take any MOSS 2007 classes, and do you think course #5061 would be a good start? I have the server up and running and some basic portals for departments set up. No problem if you have no idea about it, just figured I ask!
     
    Thanks a lot already in advance…
    Reply
  4. Hi Marc,

    Speaking of CSS…

    Have you ever noticed that when you create a custom list form in SPD 2007 and then render it in the browser that if rows are blank, some or all of the table row borders are missing? For instance, I just went in and created a new DispForm however, when I render it in the browser, the horizontal lines that span the top are missing. Makes the form look silly.

    Any ideas on how to fix this? I have verified that the appropriate classes are being identified for each row. [ms-formbody].

    Kind regards,
    Tim

    Reply
    • Tim:

      It sounds like you’ve got the wrong CSS classes applied. You need to use ms-formlabel for the left column (column names) and ms-formbody (as you mention) for the right column (the fields) if you want things to match the look and feel of the default forms. Someone at Microsoft, in their infinite wisdom, decided that a customized form should start with different classes.

      M.

      Reply
  5. Hello Marc

    Excellent write-up. I’m running into a problem seemingly with permissions. I have created custom master and css pages, but only the system account and I can see the page as it is intended. I’ve checked both the master page gallery and the style library to make sure that all authenticated and domain users have read access to both the libraries themselves, as well as the individual files.

    Any idea as to what could be causing this?

    Reply
    • Generally speaking, the master page must be checked in and approved, and the CSS file must be checked in. Missing any of those steps is the most common reason for what you are seeing.

      M.

      Reply
  6. I have sharepoint search box webpart in my master page..I want to change the width of the box.Where i can find this file imean the code for it so i can the webpart in 14 hive structure?

    Reply
    • king:

      You should never change files in the 14 hive directly. You can change the width of the search box simply by overriding the CSS class(es) applied to it.

      M.

      Reply

Have a thought or opinion?