WordPress.org

Ready to get started?Download WordPress

Forums

Collapse-O-Matic
[resolved] CSS Question (2 posts)

  1. slobizman
    Member
    Posted 1 year ago #

    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/

  2. Baden
    Member
    Plugin Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.