This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Editing toggle shortcode styles

  • Creator
    Topic
  • #10078
    tymothyroy
    Participant

    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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #10092
    Jason Bobich
    Keymaster

    Hello Tymothy,

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

    #10120
    tymothyroy
    Participant

    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.

    #10125
    Jason Bobich
    Keymaster

    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. –>

    #10126
    Jason Bobich
    Keymaster

    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/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.