Support » Plugin: Squelch Tabs and Accordions Shortcodes » Icons in tab title?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Matt Lowe


    The functionality is in the stable branch now. You can do something like

    [tab title="Tab One" icon=""]
    Tab content here

    Hi Matt,

    Is this feature also available on Toggles and Accordions?

    The documentation seems to imply there isn’t, as I don’t see the “icon” option under accordions:

    If not, do you have plans to make it available for Accordions/Toggles?


    Plugin Author Matt Lowe


    No, only available on tabs at the moment. If there’s a demand for it on other widgets then I’ll add it to the development queue.

    I have a related question regarding icons on the tabs. Is it possible to change the state of the icon or text when a pointer is hovered over the tab? Or on an active tab? One thing I tried was to leave the tab shortcode completely blank (other than the content) and use a sprite to add background images via CSS and alter the width and height of the tabs to allow for the complete parts of the image I needed for the respective tab.

    This worked as far as adding the images to the tabs, however there is some weird behavior to the tabs now. Hovering over the first tab causes the pointer to change into a text cursor (tab title=”” is empty), while the other two tabs retain the regular mouse pointer on hover (title=”” also empty). Additionally, clicking tabs 2 and 3 do not change to the content for those tabs and the content seen remains the content for tab 1.

    Most probably, my css paths are wrong or I have botched something somewhere. So I guess my question is, is there any way within the plugins’ features to add hover and active state icon/text/background changes using sprites? For instance, through the event=”” feature. If not, what are the direct css paths for adding a background sprite for default/active/hover states for each tab id?

    I hope my question makes sense. I’m fairly new to CSS.

    Your plugin so far is awesome and I hope there is a way to add this hover and active tab state change. I’m sure there is, I am just a newbie and missing something.

    This is the code I used to add the sprite image to the backgrounds:

    #ui-id-1 {
    	background: url('/uploads/2014/08/homemainsprite500x150.png');
    	background-position: 0 0;
    	width: 193.3333333px !important;
    	height: 50px !important;
    #ui-id-2 {
    	background: url('/uploads/2014/08/homemainsprite500x150.png');
    	background-position: -236px 0;
    	width: 193.3333333px !important;
    	height: 50px !important;
    #ui-id-3 {
    	background: url('uploads/2014/08/homemainsprite500x150.png');
    	background-position: -460px 0;
    	width: 193.3333333px !important;
    	height: 50px !important;

    No link to my site ATM as it is in construction mode. If you need a pass, let me know. Thanks again.

    Moderator Jan Dembowski


    Brute Squad and Volunteer Moderator

    I have a related question regarding icons on the tabs.

    Rather than tagging onto someone else’s topic per the forum welcome can you please start your own?

    This one is months old and marked “resolved” already.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Icons in tab title?’ is closed to new replies.