WordPress.org

Support

Support » Plugins and Hacks » Collapse-O-Matic » [Resolved] [Plugin: jQuery Collapse-O-Matic] CSS Question

[Resolved] [Plugin: jQuery Collapse-O-Matic] CSS Question

  • First of all, thanks for the great plugin. I really appreciate it.

    Here’s my problematic page:
    http://www.3dprinter.net/directory/personal-3d-printers

    You’ll see near the top that I have “An overview of 3D printing”. I have the following code:

    [expand title="<strong>An Overview of Personal 3D Printers</strong>" targclass="collapse-content" trigclass="collapse-trigger"].....[/expand]

    Expand is working fine, but I can’t for the life of me get the CSS element written up correctly to style the trigger and content. Here’s what I have, and I’ve tried several iterations:

    .collapse-trigger {
            font-size:14px !important;
            font-weight:bold !important;
    }
    
    .collapse-content {
            border: dotted #eee 1px !important;
            background:#eef !important;
    }

    What am I doing wrong? (The strong codes are in there only because I can’t get it to recognize the class.

    http://wordpress.org/extend/plugins/jquery-collapse-o-matic/

Viewing 1 replies (of 1 total)
  • Plugin Author Baden

    @baden03

    couple of things:
    1. you do not need to incude the ‘strong’ tag in the title. Either make it bold in css, or use the tag attribute like so:

    [expand title="An Overview of Personal 3D Printers" targclass="collapse-content" trigclass="collapse-trigger" tag="strong"].....[/expand]

    You can also use other tags, like: tag=”h2″…

    2. If you look at the page source of your page, you will see that the classes are being correctly assigned. (the strong tags have been removed for clarity)

    <span class="collapseomatic collapse-trigger" id="id2977"  title="An Overview of Personal 3D Printers">An Overview of Personal 3D Printers</span>
    <div id="target-id2977" class="collapseomatic_content collapse-content">...</div>

    However the classes are not being applied. This could be due to a number of things.
    -where did you place the css definitions? It seems your theme has a special way of adding custom css.
    -if you add the css to an area for @media only screen sizes, then the css will only be applied when the screen is that size (mobile devices, etc)

    Good luck, if you need more assistance, let us know.

Viewing 1 replies (of 1 total)
  • The topic ‘[Resolved] [Plugin: jQuery Collapse-O-Matic] CSS Question’ is closed to new replies.
Skip to toolbar