WordPress.org

Ready to get started?Download WordPress

Forums

Post UI Tabs
[resolved] How does one use jQuery UI theme creator with the Post UI Tabs (12 posts)

  1. Michael_GLT
    Member
    Posted 11 months ago #

    Firstly Great plugin and the selection of skins are not too bad.
    Secondly functions well and very easy to use.

    However I would like to adapt the tabs to my colour pallet so I went to the jQuery UI theme creator to design a custom tab layout and downloaded it. I then put the folder on my server with the files and used the code in this forum to try to point to it. In my settings/put page, I disabled the skins and it shows the skin name I created instead of the default 25 skins. However, it's not applying the css to my tabs and the tabs I created are just default.

    Not sure what I'm doing wrong but I see other people do seem to be having the same issues.

    Is there a procedure you could advise on?
    Where does the script sit into the php code?

    Thank you for your kind attention. Michael

    http://wordpress.org/extend/plugins/put/

  2. Mark / t31os
    Moderator
    Plugin Author

    Posted 11 months ago #

    Where do you want the skin to load from? The most obvious choice i think would be your current theme's directory.

    Assuming you have a theme from the UI site, assume for the moment this is the folder and file structure of that download(should be i just downloaded a theme to check).

    js
    development-bundle
    css
    index.html

    Go into that css folder and you'll see a single directory, named inline with the name you choose for your jquery theme. Eg.

    js
    development-bundle
    css
    - my-custom-jquery-theme
    index.html

    You only need that folder and it's contents, so copy or move that to your WordPress theme's directory, eg..

    wp-content/themes/Your-Current-WordPress-Theme/

    With the new folder..

    wp-content/themes/Your-Current-WordPress-Theme/my-custom-jquery-theme/

    Now you can go ahead and add the following to your theme's functions.php file.

    add_filter( 'put_stylesheet_uri', 'my_custom_put_stylesheet' );
    
    function my_custom_put_stylesheet( $uri ) {
        return get_stylesheet_directory_uri() . '/my-custom-jquery-theme/jquery-ui-1.10.3.my-custom-jquery-theme.css';
    }

    Note: Making naming adjusments as necessary.

    I had different plans for the method on implementing custom skins in PUT when i started writing it, but i later realised it wasn't a smart implementation(it's needlessly complicated and fiddly), so my suggestion is to use the approach outlined above(which is dead easy) and turn the skins option back on so the preview is available on the PUT settings page.

    Note: The preview should also work with your custom skin.

    Hope that helps.

  3. MenaiMan
    Member
    Posted 11 months ago #

    Hi Mark
    I've tried this on a number of themes and with other plugins deactivated but I can't get it to work. I can't get the plugin's settings page to recognise the custom theme.

    I've even tested the custom tab theme (I created using JQuery Themeroller) using another tab plugin (which I'd rather not use!) and it seems fine.

    Is Themeroller suitable to create the css? I note it also outputs for accordions, sliders and other stuff I don't need.

    What am I missing?

  4. Mark / t31os
    Moderator
    Plugin Author

    Posted 11 months ago #

    Yes theme roller is sutiable for creating the CSS, you simply need to uncheck all the additional components that are unrequired, but rather than list all those i'll list the only items you need to select, which are..

    • UI Core - Core
    • UI Core - Widget
    • Widgets - Tabs

    In regard to the issue with the preview, i'm just going to retest a UI theme made on theme roller now and see if my results produce the same problem(pretty sure i tested this before, but i'll test again for certainty).

    Is the problem only apparent with the preview on the plugin settings page? Do you see your theme applied on the front facing side of the website?

    Note: Disable skins cannot be checked for the preview to work, and one small side effect of setting the theme this way is that any skin selection(the dropdown) on the plugin settings page will override the custom one(so make sure not to change the value in the dropdown whilst viewing the page).

  5. MenaiMan
    Member
    Posted 11 months ago #

    The skin does not show in preview nor front-end. It does however seem to "disable" the default skin list, so both preview and front-end shows just clickable bullet points instead of the designed tabs. The panel contents appears to "work" insofar as it changes when you click a bullet point. It's as though the UI theme is being "called" (sorry I don't know correct terminology!) but the CSS is not being applied...

    I'll create another UI theme and uncheck the components I don't need, and try on another site/server...

  6. Mark / t31os
    Moderator
    Plugin Author

    Posted 11 months ago #

    Tested a theme downloaded from jQuery's Theme Roller, here's some screenshots of the directories involved.

    My theme directory(my current theme indicated).
    http://img834.imageshack.us/img834/3840/putss1.jpg
    Path: /wp-content/themes/

    Inside my current theme's directory with the jQuery UI theme(UI theme indicated).
    http://img577.imageshack.us/img577/7708/putss2.jpg
    Path: /wp-content/themes/t31os/

    Inside the jQuery UI Theme's directory.
    http://img526.imageshack.us/img526/1985/putss3.jpg
    Path: /wp-content/themes/t31os/my-put-ui-theme/

    Associated PHP code to run a filter on the PUT stylesheet.

    add_filter( 'put_stylesheet_uri', 'my_custom_put_stylesheet' );
    
    function my_custom_put_stylesheet( $uri ) {
    
    	return get_stylesheet_directory_uri() . '/my-put-ui-theme/jquery-ui-1.10.3.custom.css';
    }

    The result was a custom theme applied that worked both front side and on the plugin's setting page(ie. the preview). Thus far i cannot reproduce the problem you experienced.

    Perhaps you did something a bit different to the above?

    Note: Make sure you remove any other filters you were additionally/previously testing beforehand, you only need the one filter i've posted above.

  7. MenaiMan
    Member
    Posted 11 months ago #

    All correct so far, but no tabs formatting...

    Sorry if this is a daft question - when I download a theme from Themeroller, what CSS scope do I need to provide? Maybe that's where I've got this wrong...

  8. Mark / t31os
    Moderator
    Plugin Author

    Posted 11 months ago #

    I don't usually provide one, it shouldn't be necessary to unless you find CSS rules defined by your theme are conflicting with those declared in the theme roller stylesheet.

    Even then, support for CSS scoping is a little spotty between browsers and browser versions(or some simply don't have that support enabled by default).

  9. Michael_GLT
    Member
    Posted 11 months ago #

    Works like a charm :-)
    Thank you, thank you, thank you!
    and thank you again for putting it in baby step chunks for this noob to be able to follow.

    Kindest regards,

    Michael.

  10. Mark / t31os
    Moderator
    Plugin Author

    Posted 11 months ago #

    Happy to hear that Michael, glad i could help.. :)

    MenaiMan let me know how you get on please.. :)

  11. MenaiMan
    Member
    Posted 11 months ago #

    Solved it! Saving a theme from Themeroller with no css scope did the trick!

    So two happy noob plugin users!

    Thank you so much for your help.

  12. Mark / t31os
    Moderator
    Plugin Author

    Posted 11 months ago #

    Glad to hear it's all working for you, happy i could help.. :)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags