WordPress.org

Ready to get started?Download WordPress

Forums

Squelch Tabs and Accordions Shortcodes
[resolved] Add Icon Images to tabs (23 posts)

  1. mineralman
    Member
    Posted 1 year ago #

    Hey Matt, I was wondering if there is a way to add a small image to the tabs. Not a BG Image, but an image to the left of the tab text.

    [tab title="GMO NEWS"]

    Inserting a small image to the left side of the words - "GMO NEWS"

    The following does the trick outside of the tabs in Content or in a normal page:
    <img style="margin-top: 0px;margin-right: 8px; margin-bottom: -8px;" alt="GMO News" src="http://nutritionap.com/wp-content/uploads/2013/06/Fresh-Food.jpg" width="36" height="28">GMO NEWS

    Is there a way to incorporate that into the actual tabs?

    http://wordpress.org/extend/plugins/squelch-tabs-and-accordions-shortcodes/

  2. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    Hmm... You could add an image with CSS like so:

    .squelch-taas-override.ui-tabs .squelch-taas-tab {
        padding-left: 42px;
        background: url(http://nutritionap.com/wp-content/uploads/2013/06/Fresh-Food.jpg) 0 center no-repeat;
    }

    That however would apply to ALL of the tabs, if you wanted different icons on each tab then it gets more interesting as there isn't a class on each tab label to specify which tab it is (I should probably add that in).

    Other than that, no, there's no way to add icons to the tabs. If this is something you need then I can add it, I don't think it would prove to be too hard to add an extra attribute to the [tab] shortcode to allow an icon to be placed before the tab text.

  3. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Mineralman,

    I've added in icon support. Would you be willing to test it before I make it available in the stable version? You can download the latest version here:

    http://downloads.wordpress.org/plugin/squelch-tabs-and-accordions-shortcodes.zip

    I've updated the docs to reflect the new options: http://squelchdesign.com/wordpress-plugin-squelch-tabs-accordions-shortcodes/

    But to summarise:

    icon
    (url) Link to an icon to show on the left hand side of the tab
    Default: "" (no icon)
    
    iconalt
    (text) The alt text to add to the icon (for screen readers and search engines)
    Default: Title of the tab
    
    iconw
    (integer) Width of the icon
    Default: Width not explicitly set, let browser size image automatically
    
    iconh
    (integer) Height of the icon
    Default: Height not explicitly set, let browser size image automatically

    If you could check it out and let me know how you get on I'd greatly appreciate it.

  4. mineralman
    Member
    Posted 12 months ago #

    I downloaded the .zip. Uploaded through Wp Plugin upload.

    Unpacking the packageā€¦

    Installing the pluginā€¦

    Destination folder already exists. /home/*********/public_html/wp-content/plugins/squelch-tabs-and-accordions-shortcodes/

    Plugin install failed.

    Return to Plugins page

    This is how I set the tab title to:

    [tab title="GMO NEWS" icon="http://nutritionap.com/wp-content/uploads/2013/06/Fresh-Food.jpg"]

  5. Matt Lowe
    Member
    Plugin Author

    Posted 12 months ago #

    Hi Mineralman,

    When uploading a plugin you have to remove the old version first. So deactivate and then delete the old version, then upload and install the new version.

    Thanks!

  6. mineralman
    Member
    Posted 12 months ago #

    In and Working. Seems now to line up text and icon image and Change BG inactive tab color to #FFFFFF. Any suggestions on

      moving the text up

    or the image down?

    http://nutritionap.com/resources/

  7. Matt Lowe
    Member
    Plugin Author

    Posted 12 months ago #

    Hm, I don't see that behaviour in my test lab... let me investigate.

  8. Matt Lowe
    Member
    Plugin Author

    Posted 12 months ago #

    Your template is the culprit. I think something like this should see you right:

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {
        height: 28px;
        vertical-align: middle;
    }
  9. mineralman
    Member
    Posted 12 months ago #

    All thats left is changing the inactive tab BG color to #FFFFFF

    I have the hover tabs bg already, just cant figure out the inactive state so the tab color is white all the time

  10. Matt Lowe
    Member
    Plugin Author

    Posted 12 months ago #

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {
        height: 28px;
        vertical-align: middle;
        background-color: #fff;
    }
  11. mineralman
    Member
    Posted 12 months ago #

    OK. THis is the code used to get icon on tabs, BG Nav Bar color change and Active Tab Color White:

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li {font-size:85%;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a {color: #FF1C33;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-state-hover a {color: #FF1C33;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav {background-image: none;background-color: #A8E71E;}
    
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-state-hover a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;background-color: #FFFFFF;}

    Q: Can the Icon images placement be adjusted to the left using padding or margin?

  12. mineralman
    Member
    Posted 12 months ago #

    Here is the Tab usage:

    [tab title="US" icon="http://nutritionap.com/wp-content/uploads/2013/01/MiniQRCodeKTGH-e1375271076869.jpg"]

    Works great. If I could adjust the image horizontally I might not need to create a new mobile version of tabs. (to avoid stacking tabs on mobile portrait devices)

  13. Matt Lowe
    Member
    Plugin Author

    Posted 11 months ago #

    Hi Mineralman,

    You should be able to achieve that with something like this:

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {
        margin-left: 2em;
    }
  14. mineralman
    Member
    Posted 11 months ago #

    No luck moving the icon:

    http://nutritionap.com/

    used:

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {margin-left: 0em;}

    and

    .squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {margin-left: 0em !important;}

  15. Matt Lowe
    Member
    Plugin Author

    Posted 11 months ago #

    Hi mineralman ... what is your goal? Setting margin-left: 0em; will typically do nothing (unless your theme has set a style for that image).

  16. mineralman
    Member
    Posted 11 months ago #

    my goal was to be able to adjust image placement as needed. I used 2em, 1em and 0em as values but none worked to move the image.

    On mobile the responsive tabs want to stack, so If I an shrink the icon image spacing maybe I can use the same [tabs} for small tablets and phones and not have the actual tabs stack.

    If it can be done, great! If not, no worries, I adapt well

  17. Matt Lowe
    Member
    Plugin Author

    Posted 11 months ago #

    Hi mineralman, I can see your style being applied and if I change it to 2em the icons move over to the right accordingly. To shrink the icons on mobile you will need a suitable @media query to apply a new set of styles for your chosen screen size.

  18. mineralman
    Member
    Posted 11 months ago #

    Got it to work but I used margin-left: ##px; and that seemed to work the best.

  19. danteangeles
    Member
    Posted 4 months ago #

    Hi Matt,
    i have tried to use these codes into my page:

    [tabs title="Tutors" disabled="false" collapsible="false" active="0" event="mouseover"]

    [tab title="Teacher Yanyan" icon="http://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacheryanyan.jpg" iconw="64px" iconh="64px"]Tab 0 content[/tab]

    [tab title="Teacher Chris" icon="http://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacherchris.jpg" iconw="64px" iconh="64px"]Tab 1 content[/tab]

    [tab title="Teacher Kara" icon="http://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacherkara.jpg" iconw="64px" iconh="64px"]Tab 2 content[/tab]

    [/tabs]

    i wasn't able to get an image to my tabs. i like to be something like this: http://www.jpreserv.learnasia.asia/wp-content/uploads/2014/Untitled1.jpg

    here is my site: http://www.jpreserv.learnasia.asia/make-schedule/

    I am new to wordpress, thank you very much.

  20. Matt Lowe
    Member
    Plugin Author

    Posted 4 months ago #

    Hi danteangeles,

    Just as a heads-up it's generally better to start your own thread rather than posting on the end of someone else's post, unless you have the same problem.

    The reason your code is not working is because you are using the stable version. The icon support was added to a non-stable development version that mineralman tested. The icon support is coming in the next release (which is still a way off as I am incredibly busy with work at the moment).

    If you read this full thread you will find a link to the development version, and instructions on how to install it and use it.

  21. danteangeles
    Member
    Posted 4 months ago #

    Thank you very much for your reply.

  22. danteangeles
    Member
    Posted 3 months ago #

    Hi Matt,
    I just want to inform you that these codes:

    [tabs title="Tutors" disabled="false" collapsible="false" active="0" event="mouseover"]

    [tab title="Teacher Yanyan" icon="http://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacheryanyan.jpg" iconw="64px" iconh="64px"]Tab 0 content[/tab]

    [tab title="Teacher Chris" icon="http://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacherchris.jpg" iconw="64px" iconh="64px"]Tab 1 content[/tab]

    [tab title="Teacher Kara" icon="http://jpreserv.learnasia.asia/wp-content/uploads/2014/03/xteacherkara.jpg" iconw="64px" iconh="64px"]Tab 2 content[/tab]

    [/tabs]

    that i used before is fully functional. Its working now on my site. Thank you very much. I just change the stable version to the developer version you have uploaded here.

    and to other people, i'd like to inform you all that any shortcode that you will put inside the content area will work, and it works very fast.

    Matt, is there anyway you could put some effects here like one tab will get active at a specified time and after that the next one will be activated, just like a carousel? but once the mouse cursor is on the content it will pause. just wondering.
    Thank you very much again.

  23. Matt Lowe
    Member
    Plugin Author

    Posted 3 months ago #

    Hi danteangeles,

    I'm not sure that tabs are the best kind of widget to do a carousel with. The exact behaviour you describe is available in the horizontal accordion widget already, but tabs that cycle themselves seems odd to me. If there's a call for it then I expect I could add it in as a feature.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags