Editing toggle shortcode styles

[tymothyroy]

We are interested in making the Toggle text hoverable. Is there a way to edit the shortcodes to do things like this?

Thank you,
Tymothy

Topic

[Jason Bobich]

Hello Tymothy,

I’m not quite sure what you mean by “making the Toggle text hoverable” — Can you explain this a little more?

[tymothyroy]

No problem. I think what I’m actually looking for is an accordion style list, without the circle with the + sign in it, just text, no box around text, where when a user hovers the pointer on the text it will slide out. Does that make sense? I can send an example I like if it is helpful.

[Jason Bobich]

You might be able to cover most of that with CSS if you want to stick with these toggles. You’d want to target the individual anchor tags and the divs directly wrapping them which contain the styles for your CSS customizations.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

For example, by looking at the toggle shortcode’s anchor tag in an inspector, we can determine these selectors we can use to style it:

.tb-toggle { ... } /* border for each toggle comes from this wrapping DIV */
.tb-toggle a.toggle-trigger span { ... } /* hide the icon */
.tb-toggle a.toggle-trigger { ... }
.tb-toggle a.toggle-trigger:hover { ... }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files. –>

[Jason Bobich]

It might also be worth checking out how toggles work with Bootstrap and FontAwesome in the next update coming very soon:

http://demoblvd.com/themes/alyeska/features/shortcodes/tabs/

[Author]

Replies