Creating a custom style for Propel

Jun 14, 2011

The Propel front end currently relies on jQuery to create a tabbed interface for your projects. This brings along with it the power and flexibility of the jQuery UI. Propel comes bundled with all of the default jQuery UI themes, but if you want more control, you have two options:

Override the default CSS

WordPress will include your themes style after the plugins have been loaded. The Propel frontend is wrapped in a div with a class name of propel. Thus, defining styles for the descendants of propel can give you full control of the look and feel.

Roll your own jQuery theme

To roll your own theme, start by going to the jQuery UI - ThemeRoller page.

On the left you will see the ThemeRoller widget.

This widget allows you to modify the various aspects of the UI. The changes will be automatically reflected on the right.

Once you are satisfied with your theme, click the orange Download theme button in the widget. On the next page, be sure to check all of the components. Then click download*.

*If another plugin is including the jQuery UI, it might conflict with Propel's styles. If this is the case, you must set the CSS scope before downloading. On the right, click the Advanced theme settings and in the CSS scope box put .propel

The dot before propel is not a mistake. Now you can download the theme.

Once you have downloaded the theme, extract it. There will be three folders and one file CSS, development-bundle, js, and index.html. Open the CSS folder. In this folder will be another folder which has the name of your theme (black-tie in the above image). This is the folder you must upload. You can upload this folder to any location that is publicly accessible.

For Propel to recognize your new theme, in your WordPress themes directory, you must create a folder called propel, and upload folder from the previous step. For example if you are using the twentyten theme and the folder from the previous step is called custom-theme, the final directory structure will resemble the following:

+ wp-content
---- + themes
-------- + twentyten
------------ + propel
---------------- + custom-theme

Once the theme has been uploaded, log in to your WordPress administration panel and navigate to the Propel settings page. If you did the previous steps correctly, your theme should appear as the last theme in the list. Select it, and submit.

Once the theme has been uploaded, in the WordPress admin, navigate to Settings -> Propel set the Custom Theme Directory to the new themes stylesheet.