Article
0 comment

Re-design inline styles or how to deal with them

You might know it is not best practice to have inline styles, but there are still parts of SharePoint which adds additional style related things via javascript and inline styles.
With a little trick we can add different colors, even to those inline styles.

How it can be done

The key to this solution is named CSS attribute selector. By using an attribute selector any regular HTML attribute can be used to assign a color. Let me give you a small example.
You have hyperlinks all over your portal and your customer want that all external links have a different color. This can be accomplished using a simple attribute selector.

// Gives all links the color green
a{
    color: green;
}

// overwrite all links where href begins with http://yourdomain
a[href^="http://yourdomain"]{
    color: orange;
}

These attribute selector are not fancy new. To be honest they are pretty old and well supported even by IE7.

Example – rebrand the grid view

One element in SharePoint that make use of inline styles is the grid view. Especially the cell and row selector.

Grid view of a SharePoint list

Grid view of a SharePoint list

The this special view adds div to the table that color the surrounding with absolute positioned elements. The following code sets the top border of the selected cell.

<div style="position: absolute; top: 28px; left: 24px; width: 498px; height: 0px; border-top-width: 3px; border-top-style: solid; border-top-color: #2a8dd4;"></div>

Just in case you tend to use jQuery to change the color value there. Don’t do it. jQuery is not for re-branding it is for development.
Instead all that needs to be done is to create a attribute selector that color all borders red instead of blue.

div[style*="rgb(42, 141, 212)"]{
    border-color: #dd314d !important;
    background-color: #dd314d !important;
}

What this actually does is to search your html for any occurrence of the RGB value and reassign the border color to the new color red. The wild card selection is decelerated by the asterisk in front of the equal sign.

The reason why I do not define the value for border-top-color is that the border-with is only assigned to the top border and nothing else. So we just have a top border.
The left, right, bottom DIV is defined the same way so I can replace all border colors with just one declaration instead of four separate declarations.

The reason why there is a background-color defined is that there is a small selector that allows you to drag the selection down. The only difference is that no border color is specified there instead it uses a background color.

The final result of the re-branded grid looks like this an shows a bright red.

Grid view of a SharePoint list after rebranding

Grid view of a SharePoint list after rebranding

In general, you should avoid using the important tag in your courses. In this case it is unavoidable because the inline style always has a higher priority than the declaration in your CSS file.

Conclusion

This approach has some benefit over using jQuery. The browser knows the declaration during rendering the web site and not when the page is done. So you avoid a flickering user interface and your user will be grateful. They also won’t see the blue border anyway. A thing that might happen when it will be modified by jQuery.

Another if not the most important fact why you should avoid javascript for manipulations like this is. Your Style Sheet will not throw any exception. It might look ugly, but in any case do not interfere with the built-in JavaScripts.

More links to attribute selector:

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.