Archive for the ‘ CSS ’ Category

Custom Rich Text Editor Styles in SharePoint 2010

A common request to have in SharePoint 2010, especially externally facing installations, is to have custom Styles available in the menu.

Thankfully, SharePoint 2010 makes this extremely easy. The key is the prefix attached to your styles. SharePoint will interpret any style beginning with ms-rteElement-[custom name] as a markup style and it will interpret anything starting with ms-rteStyle-[custom name] as a Style. However, you are able to change this prefix, but we’ll start out by creating some new styles using the default ‘ms-rte’

First, the differences between the two:

Markup Styles (ms-rteElement):

  • Will wrap the currently selected area in the specified tag (See below)
  • Applied style to newly created tag

Styles (ms-rteStyle):

  • Applies your custom class to the currently selected element
  • Will not add additional markup

Getting Started

Now that we’ve discussed the differences between them, lets talk about how to implement them. To start, make sure you have a stylesheet already linked on your SharePoint master page. Once that’s ready, follow the steps below.

Continue reading

SharePoint 2010 CSS Chart

I found a fantastic resource for someone who is branding SharePoint 2010 or implementing their own custom design.

It is a detailed chart on what CSS classes are used in SharePoint 2010, where they are used, and a graphic outlining the areas they effect. The author even includes the CSS tags that are used so you can easily copy & paste them into your Style Sheets.

I would recommend taking a look at this if you’re planning on stylizing SharePoint 2010. I wish I would have found it earlier!

Thanks go out to the SharePoint Experience for putting the list together.

http://sharepointexperience.com/csschart/csschart.html

CSS Only Menu

So, I recently decided I was tired of JavaScript and ASP.NET Menu controls. As a result, I challenged myself to create a CSS only menu provider. It was surprisingly easy.

First, I set up my parent and Child Menus like so:

 
Continue reading

JQuery in ASP.NET Applications – My jDiv Solution

So, I have a general frustration with working with jQuery in an ASP.NET application. The first, and most obvious, is the ugly markup the HTML controls output. The muddled IDs and the inability to add custom HTML attributes is frustrating.

So, I’ve begun work on a set of classes & controls to help developers work with jQuery in a .NET application.

So far, I’ve composed a jDiv class to use from code behind to generate clean Div tags with as many classes & custom attributes as you like. Also, you can add as many children jDiv elements as you’d like and then just call the parent’s .ToString() method to output all of the markup. This may sound simple, but it is a great tool when you want to use server side C# or VB to output some data, then you want to use jQuery to animate it. The .ToString() method will output the markup, which you can easily output to a clean div.

Continue reading

SharePoint Ribbon Modifications – Ribbon Buttons Too Small

So I was working on getting some content into the top right hand corner of the ribbon and the strangest thing happened: the ribbon buttons began shrinking themselves as if you’ve re-sized the browser. Check out the image below for an example of what happened.

At first, I thought it was due to a rogue style effecting the ribbon buttons, but with a closer examination of the source of my trouble I realized SharePoint was in fact scaling down the ribbon because of a style I set on a container to the right of the ribbon.

The CSS class that was causing my trouble was the s4-trc-container-menu. I mistakenly applied a float: right and a set width. SharePoint didn’t react well to either of those. The ribbon would shrink all the time with it floated to the right. As for the set width, the Ribbon began to display errors for me at about 400px.

Bottom line: Don’t float anything next to the ribbon, it can cause it to behave erratically.

Styling List View Web Parts – SharePoint 2010

The SharePoint 2010 list view web part can be styled just like anything else, there are just a few key tags you need to hit. I’ve taken the classes and ids you’ll need to hit and gathered them together and added comments to save you the hassle of navigating through SharePoint 2010’s CSS structure.

To get started, first create an additional Style Sheet and link it on the master page you are using on your SharePoint Site. Make sure you put the link to your new style sheet at the bottom of the head tag.

After that, just copy and paste the CSS below into the style sheet that is linked to your custom master page and style away.

Continue reading