Like me on Facebook Follow me on Twitter Register or    (Why?)
You are here Articles

Articles

10

Over the years I’ve had quite a few requests for customizing and tweaking the stock Aggregator skins. In the past, I’ve pointed to the various articles and documentation on how the skin template system works but for a lot of users it’s too technical. In this article I’m going to do a step by step guide on how to take one of the stock skins and make a small color change.

The skin we’re going to make a change to is the ‘Default’ skin. It looks like this:

Default skin

Step 1: Make a copy of the skin you want to modify

This is a very important step so please don’t skip it. If you make changes to the stock skins you’re going to lose all your work the next time you upgrade Aggregator to a newer version. The files you change will be overwritten unless you copy the skin to a new name.

In the Aggregator menu, click on the ‘Skin Manager’ menu item, then go to the ‘Copy Skin’ tab.

skin manager menu skin manager screen[4]

 

Now, in the ‘Copy Skin’ tab, select ‘Default’ in the ‘Skin to Copy’ dropdown, then select ‘Top’ in the ‘Template to Copy’ dropdown. For ‘New Skin Name’, enter ‘DefaultRed’ and then click on the ‘Copy Skin’ button. This will take all of the files in the /skins/Default/Top folder and create a new folder called /skins/DefaultRed/Top with all the necessary files in it. It also does some renaming of the styles in the ‘styles.css’ file so everything matches the new name.

Step 2: Apply your new skin to your tabs

Before we go and change anything, go back to the page you have Aggregator on, click on the Aggregator menu and select ‘Edit Tabs’ and then go to the Style tab. In the ‘Tab Skin’ dropdown you should now see your new skin ‘DefaultRed’ showing up. Select ‘DefaultRed’ as your new style and in the ‘Tab Template’ dropdown underneath you should select ‘Top’ and then ‘Update’ to apply your changes . Here is how it should look.

DefaultRedDropdown

When you go back to view your tabs on the page you won’t see any difference from the standard blue of the default skin. This is because all we’ve done so far is copy that skin, we haven’t changed it at all.

Step 3: Changing the color via the styles.css file

Now, go back into the ‘Skin Manager’ menu that we were in when we copied the skin, but this time go to the ‘Edit Skin’ tab. In the ‘Skin’ dropdown select the ‘DefaultRed’ skin we created earlier and in the ‘Template’ dropdown, select ‘Top’. The ‘File’ dropdown will be populated with all of the standard files that make up a template. In this step we’re going to change the color so we’ll need to edit the ‘styles.css’ file. Choose it from the ‘File’ dropdown and you should see the contents of that file in the ‘Template Contents’ text area.

All styling for skins in Aggregator is accomplished using CSS (Cascading Style Sheets).  For this tutorial we’re going to change the fill color of the selected tab to ‘red’.  The hex color code for red is ‘#FF0000’.  If you wish to look up other color codes there are a number of different sites that can help you including http://html-color-codes.com/.

Because we want to change the fill color of the selected tab, we want to find the selector for .DefaultRed_Top_TabSelected and modify the background value to ‘#FF0000’. Cursor down through the text until you find that selector. It’s on line 39.

Currently the selector shows the following:

   1: .DefaultRed_Top_TabSelected {
   2:   background: #7799ee;
   3:   border-bottom: 1px solid #7799ee;
   4:   }

Just change the #7799ee to #ff0000 and click on the ‘Save File’ button and then click ‘Close’. When you return to your page you should now see the selected tab with a red background like this.

Default Red skin

The best way to learn is to try other color codes, border thicknesses etc. in the styles.css file and see what the result is.

Post Rating

Comments

There are currently no comments, be the first to post one!

Post Comment

Only registered users may post comments.
Privacy StatementTerms Of UseCopyright (c) 2004-2015 DNNStuff
Page generated in 0.1875014 seconds!