[Plugin: WP UI – Tabs, Accordions, Sliders] Links all broken: How to use custom styles

Yeah sorry. I still haven’t found out how to do this. I’ve tried a deep search for the info and even experimented without instructions. Just can’t get it to work. I expect to keep trying so sometime next week I’ll let you know.

I did see the webpage at one point. It seemed simple but I’m not sure on the specifics; thus I can’t get it to work.

Yeah I think thats what I will start doing. Thanks mate.

Thanks. Looks like the site is back up. Copying info from Kavin’s site here just in case it ever goes down again:

Create and download the custom theme from themeroller
Visit the jQuery UI themeroller page. You will now land on the Roll Your Own tab. You can start customizing your theme from here.

jQuery UI theme roller

If you want to base your custom theme on another theme, click the “gallery tab”, and click edit under the desired theme.
Basing a custom theme from another jQuery UI theme

Choosing a theme as the base

Customize the theme to your heart’s content.
Customize and download a jQuery UI theme

Customize and Click Download theme.

Now comes the essential part, entering the correct CSS scope and folder name. I chose .wpui-custom and wpui-custom as an example, and this will be the argument to the WP UI shortcodes later on.

[wptabs style=”wpui-custom”] ………………..

[wptabs type=”accordion” style=”wpui-custom”]….

1.As it is essentially a CSS class name, it shall contain alphabets, letters(not as the first character though), hyphens and underscore.
2.Make sure you enter the preceding dotbefore the CSS scope.
3.You can also click “unselect components“, before clicking download. This will cut down the download size to 400KB~

Choosing a CSS scope
Click Download and then save the file (named something like jquery-ui-1.8.xx-custom.zip.)

Uploading the files to your server

Unzip the downloaded file and in the folder unzipped, navigate inside the CSS folder. There should the folder “wpui-custom” , as per our example and we chose that at the last step. This is the only folder we need to upload.
6-wpui-custom-theme-folders

Extract the custom theme folder from the downloaded file

Fire up your FTP client, login to your server and browse to your uploads directory.
If the wordpress blog is in http://example.com/blog ,then the uploads folder should be at /blog/wp-content/uploads/ , assuming that your wordpress is installed in the folder “blog” present in the root folder. Basic guide on using FileZilla is at codex.
This should brief that in a bit.
Filezilla-uploading-jquery-ui-themes-to-wordpress
Create and upload the custom themes inside the folder – wp-ui, under uploads
That’s all, the hard part’s over. Now the fun part.

Manage jQuery UI custom themes with WP UI

Go to wordpress admin -> WP UI options page -> Style Tab -> Manage jQuery UI custom themes.

See that empty table over there? That’s ready for some fresh made Custom themes.
Click scan uploads, it should start scanning the uploads/wp-uidirectory and add them to the list.
Do you have your theme uploaded elsewhere,want to link the theme? Click Add Theme.
Need to edit that last entered theme? just Double click anywhere on the row, edit box will open up.

Now just click changes and you are ready to go!
Managing Custom themes in WP UI options page

Using the custom themes with Shortcodes

Remember that shortcode argument I told you earlier? Yes, that is now the style’s name. To use it, take for example with our example customize-downloaded-custom(ah!) theme “wpui-custom” ,

[wptabs style=”wpui-custom”]……………

Now view the front end of your blog, your tabs and accordion should be using custom themes you created!