A very common request with custom SharePoint branding is to convert the master page and CSS to a centered, fixed width design. For instructions on how to do this, check out my Creating a centered fixed width design in SharePoint 2010 blog post. A lot of designs like to use “960px” for the width value. Unfortunately this creates a problem for the SharePoint Web Part Adder/Update Panel (the WebPartAdderUpdatePanel control found in the SharePoint master page). 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
SPTechCon is winding down now in Boston, and we had an awesome experience sharing our knowledge with attendees. Heather and I have created this post with resources for attendees of our sessions (and other curious lurkers). 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:
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
A CSS Challenge from Justin:
Make Sharepoint Custom Lists align to the right. By default any Dollar or Percentage type columns align to the right.
Here is the CSS to control your SharePoint list text alignment! Continue reading
A CSS Challenge from Fred:
Make lists look like basic MS-Office tables:
- dark background header row with white text
- alternate rows with light color background
- dark bottom borders on every rows
Here is the CSS to start your list/library styles! Continue reading
My golden site design coding rule is site design supporting images are only referenced through the CSS. This would include logos, header images, gradation bars, decorative backgrounds, etc. Content supporting images (like Bob and Joe hanging at the company picnic) are content supporting images and therefore can end up in other places outside of CSS.
A question that often comes up when I teach this is “what about the ALT text value for the image?”. Continue reading
In just about every SharePoint site I customize and every CSS demo I do for people, I always use CSS to convert the SharePoint site title to a clickable logo, much like how we see all across the web. Having your company logo in the upper left corner of your web site that when clicked takes you back to the home page is a very established usability pattern. People just expect it! Continue reading