Category Archives: Front-end Code Development

Create code solutions for meeting web site requirements and needs.

SharePoint Ribbon CSS Tips and Tricks

18 Replies

This is the fifth post in a SharePoint 2010 ribbon series.  Be sure to check out posts 1 through 4 as well:

1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs
3) The Docked Ribbon
4) Ribbon visibility using CSS

It is no secret that I have a thing for CSS.  There is nothing like adding a few lines of code and seeing things instantly change before your eyes. I may be overly romanticizing CSS but hey, I will take what I can get when it comes to changing up SharePoint.  Keeping up the spirit of ribbon modification for this series, here are some quick SharePoint ribbon CSS tips and tricks that you can do with the your sites.  If you are feeling the need for more CSS love, check out the ribbon section of my SharePoint 2010 CSS Chart.   Continue reading →

Fixed width SharePoint master page creates problem for Web Part Adder/Update Panel

9 Replies

The problem

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 →

Ribbon visibility using CSS

5 Replies

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 →

The Docked Ribbon

12 Replies

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 →

Gathering requirements for your ribbon needs

6 Replies

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 →

CSS Challenge Response: Change dialog box background

6 Replies

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 →