CSS is a wonderful tool for branding SharePoint; unfortunately SharePoint 2010 has done a decent job of making things pretty hairy and confusing with working with CSS in a SharePoint site. Something we get asked all the time in our classes is “where do I link to my custom CSS file?” Great question and the answer isn’t just “from your master page”. Continue reading
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
I recently read an interesting post that I think is a good starting list for judging CSS files. You can check it out here: Judging CSS / Spotting Bad Code
Reading that article and my ensuing comment that I posted based on my experience with SharePoint led me to think… why not write this up for SharePoint? So here I am. 
Let’s get started with chatting briefly about why you should even care about what makes good SharePoint CSS code. Continue reading
I recently refreshed my Just the Essentials SharePoint 2010 master pages and a part of that refresh included the addition of HTML5 versions of the master page files. In this post I am going to step through how to convert a SharePoint 2010 master page to HTML5. Continue reading
This is the fourth post in a SharePoint 2010 ribbon series. Be sure to check out posts 1through 3 as well:
1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs
3) The Docked Ribbon
The ribbon doesn’t have to be big and scary. SharePoint ribbon customization can be completed with just a little CSS and tweaks to your master page. In this post we are going to focus hiding the ribbon when it is not in use. Continue reading
@porlyp asked on Twitter if it was possible to change the styling of the search scopes drop down menu in SharePoint using just CSS. Here is a sample of what we are targeting:
This is the third post in a SharePoint 2010 ribbon series. Be sure to check out posts 1 and 2 as well:
1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs
There are two states the SharePoint ribbon can be in, docked or undocked. Let’s dive right in looking at what it means to have a docked ribbon. Continue reading
In the first post in this series, Boil it down to the basics… the SharePoint 2010 Ribbon, we looked at the different components in the ribbon area and saw what was really a part of the ribbon and what wasn’t. At the end of the post you may have ended up with a custom master page with a simplified ribbon block and SharePoint page components, such as the Site Actions menu and the social tagging buttons, moved to other locations in your site layout and design. In the second post of this series I am going to focus on ribbon placement requirements and more importantly, what do your users need. Continue reading
I updated the Change dialog box post to include a new CSS Challenge for the Tags and Notes pop-up box.
A CSS Challenge from Jennifer:
I have a masterpage with a black background and white links…however when I edit a page and insert an item the popup box is white background with white links. I would like to change the background of the box but my designer tool won’t pull the information so I can see what style is controlling it.
The dialog box can be tricky. What is happening is your HTML is getting loaded up in an iFrame so you essentially have your master page within your master page. The HTML, FORM, BODY (etc.) tags are all repeated again. The trick to controlling the dialog box is to reference the class (.ms-dialog) that is assigned to the HTML element that is within the iFrame.
Here is the CSS to control the background of your dialog box. Continue reading