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

Articles

08

Since introducing Aggregator, a module that allows you to place modules and other content in tabs, back in 2004 I've slowly but surely added more and more skins to the package. At the time of this article there are over 50 skins, including some nice interactive templates such as the content sliders. In the past, if you've wanted to modify the skins to your own design you needed to understand a little CSS to accomplish this. With the introduction of the jQuery Tab and Accordion in the 6.0.0 release there is a new way to accomplish this without knowing a lick of CSS. This tutorial will show you how to use the jQuery ThemeRoller site to quickly and easily create your own custom designed jQuery Tab and Accordion skins for Aggregator.

If you don't already have a commercial license of Aggregator through one of our subscription plans, you can also download and install the trial copy and follow along there.

Before I go on to the first step, I'll provide a little background. The jQuery Tab and Accordion skins, unlike the other skins in the Aggregator suite, are all dependent on the jQuery UI framework and the theme support provided within. The nice folks at jQuery have built a nice little theme builder there named ThemeRoller that you can use to quickly and painlessly design your own theme right from your browser. OK, on to the first step.

Step 1 – Creating your theme

Open your browser and head over to the ThemeRoller site at http://jqueryui.com/themeroller/. The page is divided into two sections. On the left hand side is a tabbed toolbox that allows you to change your theme, and the right hand side is a collection of the various UI elements that can be themed with the jQuery UI themes. The first two of the UI elements you'll notice are the Accordion and the Tabs. These are the main two elements that you'll need to concentrate on because these are the two elements used in the Aggregator jQuery Tabs and Accordion skins.

To create your new theme, you can either start with the base theme shown when you come to the page, a kind of bland gray theme, or you can start from one of the predefined themes available. Click on the Gallery tab and you'll see a list of them. These names probably look very familiar to you if you've already played around with the themes in Aggregator and indeed the stock themes included with Aggregator are based on these exact themes.

Now, pick a theme you'd like to start from. I'm going to pick the 'Flick' theme because the theme I'm looking for is similar, I just want to change a couple things I don't like. You'll notice that once you choose a theme, all the UI elements in the right hand side change their design to that theme.

Now that you have a theme to start from, either click on the 'edit' button next to the theme, or just click on the 'Roll Your Own' tab in the toolbox. In the toolbox you'll see a whole bunch of properties that you can change to modify your theme. For the sake of this example I'm just going to change a single thing but you can change as much as you want and even test it out with a live preview of the UI elements on the right. I'm not fond of the pink active text color in the 'Flick' theme so I'm going to change it so something a little nicer, such as a deeper red. Expand the section named 'Clickable: active state' and then click on the pink color box under 'Text' and choose a new color. I picked '#ff0525' for mine.

Step 2 – Download your theme

So now you have a new theme all designed that you like but we have to grab a copy that we can use with Aggregator. Click on the orange 'Download theme' button on the toolbox. Now you are on the 'Build Your Download' page. In the 'Theme' section to the right make sure 'Custom Theme' is selected in the dropdown and expand the 'Advanced Theme Settings' under that so you can see the 'CSS Scope' and the 'Theme Folder Name' text boxes.

In the 'CSS Scope' section, enter a name for your theme with a period in front of it and make sure you don't use any spaces in the name. For instance I'm going to call my theme 'richard' so I'll enter a period and then 'richard' (.richard). When you do this, the 'Theme Folder Name' will automatically be filled in with your theme name without the period. It is important that you stick to this convention. Now, make sure you have the 1.7.3 version selected and click on the 'Download' button to download the zip file to your computer.

Step 3 – Uploading to your site

Ok, we've got the theme on our machine now, we just need to rename a file and copy it up to our website.

Extract the zip file on your machine and take a look at the contents of the file. The only thing we care about now is the contents of the css folder. Inside the 'css' folder you should see a folder bearing the same name as the theme name you created in the previous step. Open that folder and you'll see a file name 'jquery-ui-1.7.3.custom.css'. Rename that file 'ui.all.css'.

Now we have the files the way Aggregator needs them, let's upload them to the proper folder on our site. For this part you're going to have to use ftp or an alternate way that your hosting provider may make you use. Connect to your site with ftp and transfer the folder inside the css folder, the one with the same name as the theme we created and drop it into the 'DesktopModules\DNNStuff – Aggregator\Skins\jQueryUI\_themes' folder on your site. In my example, I would copy the 'richard' folder from inside the css folder, and it would create a 'richard' folder inside the 'DesktopModules\DNNStuff – Aggregator\Skins\jQueryUI\_themes' folder.

If you have Aggregator version 6.1.4 or later then you are done.

If you have Aggregator version 6.0.0 through 6.1.3 you need to do one additional step. Edit the 'DesktopModules\DNNStuff – Aggregator\Skins\jQueryUI\Tabs\Settings.xml' or the 'DesktopModules\DNNStuff – Aggregator\Skins\jQueryUI\Accordion\Settings.xml' file and add another choice option to the list of theme choices under the property named 'Theme'. Make sure the value is set to the name of the theme you added. For instance for my new theme named 'richard' I would add the following choice.

<choice value="richard" caption="Richard" />

Now, just go into any instance of Aggregator on your site, pick the jQueryUI Tabs or Accordion skin from the 'Style' tab and then on the 'Skin Settings' tab, choose your new theme from the 'jQuery UI Theme' dropdown and click 'Update'. You should see your new theme in all of it's glory.

Post Rating

Comments

Mark ODonnell
# Mark ODonnell
Friday, August 13, 2010 9:47 AM
Perfect! This is awesome. Thanks for sharing this trick.
nina
# nina
Saturday, September 4, 2010 8:10 AM
Thanks for posting this - I'm going to put it into action very soon!!
Nina

Post Comment

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