WordPress.org

Forums

Squelch Tabs and Accordions Shortcodes
[resolved] Accordion Content Text Size (7 posts)

  1. erh
    Member
    Posted 1 year ago #

    I just downloaded and installed this plugin, great work! Its fitting my need very nicely.

    The issue I'm running into is the text size within the content/accordion is a bit large for my taste. What is an easy way to shrink the size and/or change the font face.

    I'm hoping for a way outside of the JQuery UI stuff -- I tried to look around the color theme picker and couldn't figure out how to do it. But if thats the only way, then some instructions or tips would be much appreciated.

    Thanks!

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

  2. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    You'll need to write some CSS. Instructions can be found here:

    http://squelchdesign.com/wordpress-plugin-squelch-tabs-accordions-shortcodes/#styling

  3. erh
    Member
    Posted 1 year ago #

    Yikes, I was worried about that. I'm not very well versed with CSS. But I like a challenge I guess, I'll give it a go.

    But I could use a bit more direction, if you don't mind.

    Looking through the .css page, I found three places where 'font-size' is used:

    .squelch-taas-toggle.dark .squelch-taas-toggle-shortcode-header {
        font-size: 120%;
    }
    
    .squelch-taas-toggle.light .squelch-taas-toggle-shortcode-header {
        font-size: 120%;
    }
    
    .squelch-taas-toggle.stitch .squelch-taas-toggle-shortcode-header {
        font-size: 120%;
    }

    The first two (judging from the name) seem to correlate to the 'light' and 'dark' themes, but I'm presently using the default of "smoothness", so I don't think those are the right places for me to make a modification.

    Instead, I'm eyeing that third one. Is that the right place to modify the font size for the content within the accordion?

    Moreover, I'm using a hosted WP instance, so I don't have full access to the server. I can't add new files, I can simply modify the ones that currently exist. My natural inclination is to change the "120%" above to something else ("100%" or "90%"), but your instructions instead seem to instruct me to create a new "selector" that looks like this:

    .squelch-taas-override.squelch-taas-toggle.stitch .squelch-taas-toggle-shortcode-header {
    font-size: 100%;
    }

    Am I interpreting that correctly? If so, where would I put the three lines above? Can I simply add these three lines to the end of the squelch-tabs-and-accordions.css file?

    Any help is greatly appreciated. Thanks for your quick response already.

  4. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    .squelch-taas-toggle.dark .squelch-taas-toggle-shortcode-header {
        font-size: 120%;
    }
    
    .squelch-taas-toggle.light .squelch-taas-toggle-shortcode-header {
        font-size: 120%;
    }
    
    .squelch-taas-toggle.stitch .squelch-taas-toggle-shortcode-header {
        font-size: 120%;
    }

    These all relate to the styling of the toggles (note squelch-taas-toggle-shortcode-header).

    If you take a look at the styling guide I sent you, go to the "accordions" tab, there are some sample rules already laid out for you to use. You want to make a change to the content area, so you should be using:

    .squelch-taas-override.squelch-taas-accordion .ui-accordion-content {
        /* Styles relating to the contents of the accordion panes */
    }

    Can I simply add these three lines to the end of the squelch-tabs-and-accordions.css file?

    You definitely do not want to do that. If you do your changes will be lost as soon as you upgrade the plugin. You should never modify a plugin directly.

    Where you choose to put the CSS depends on your site. I suggest installing a custom CSS plugin and using that (there are plenty to choose from). Some theme's also provide a custom CSS option. If yours does not and/or if you can't install plugins on your hosted platform then you might be able to edit your theme's CSS, but you should ONLY do that if the theme is a child theme that you have control over. You should not modify a third party theme for the same reason that you should not modify a third party plugin.

  5. erh
    Member
    Posted 1 year ago #

    Ahh ok, I see where I was misunderstanding. I feel a bit foolish I didn't see those great big tabs for accordion :(

    So is it as simple then as adding these three lines:

    .squelch-taas-override.squelch-taas-accordion .ui-accordion-content {
        font-size: 90%;
    }

    To some sort of Custom CSS Plugin?

  6. Matt Lowe
    Member
    Plugin Author

    Posted 1 year ago #

    Looks about right to me. :)

  7. erh
    Member
    Posted 1 year ago #

    Went ahead and tested it, and it seems that was exactly what did the trick. Beautiful.

    Matt, thank you VERY much for helping me get this sorted. Truly, great support for your brilliant plugin.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Squelch Tabs and Accordions Shortcodes
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic