Different Styles For Different Features

Different Styles for Different Features

Most features have additional css classes on the wrapping divs that are not used but could be used to style the feature different from others. Most of the time with skinning we are going for a consistent look and feel across features, but these extra css classes are there to make it easy to customise things differently across features. All you have to do is view the source of the rendered page and study the css classes on the divs wrapping the content.

So for example if you wanted to have larger font in the admin features (maybe your administrator has poor vision), you can add this to the bottom of your styletext.css file:

.admin { font-size: 150%; }

Then clear the server cache by touching Web.config, then clear the browser cache, and you will see much larger font in the admin areas.

This works because the admin pages generally have an extra css class named "admin" on the wrapping div. The included skins don't set any style rules on that css class because generally we are going for a copnsistent look and feel, but the extra css classes are there so you have something to use if you want to make things look different across features.

Styling Different Instances of a Feature Differently

Most of the features have an outer wrapper div with class="module[x]" where x is the module id. This allows you to style an instance of a feature differently than others. You would have to view the source of the page to see the module specific css class. For those who don't ever style an instance different from other instances you can eliminate the extra wrapper div from the layout by add this to Web.config/user.config