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.