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

Viewing 7 replies - 1 through 7 (of 7 total)
  • i’m in the same situation… help is welcome

    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.

    I gave up and just started editing the included CSS files. I know its bad practice, but I’m honestly not seeing any updates being made in the near future.

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



    For custom styles, activate the plugin, go to the Styles tab and add a custom CSS stylesheet (using the absolute URL). Or you can add declarations directly into the options screen, but obviously the CSS sheet is a better approach.

    It says you can upload to WP and it’ll scan/find it, but I just uploaded it to my theme folder and entered the full URL. ( or whatever)

    Seemed to work for me – but yeah, it sucks that Kavin’s site has been down for weeks.

    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

    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.

    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 ,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.
    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!

    Plugin Author kavingray


    Sorry everyone, Now everything is backup. Thanks akridge. 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: WP UI – Tabs, Accordions, Sliders] Links all broken: How to use custom styles’ is closed to new replies.