Collapse o matic Highlight and space

  • Resolved dardel

    (@dardel)


    2 years, 11 months ago

    I would like to highlight my buttons when pressed, but I dont know the css code for it.
    Lets say I want to highlight it red, or #xxxxx.
    I tried
    [expand title=”A New Hope” trigclass=”123″]Target Content[/expand]
    and put in css
    .123 {
    color: red;
    }
    But it does not quite work

    Also on my webpage, there seems to be a space, like a empty row when my buttons are pressed, if you go on my website I think you can see it clearly.

    If there is something else I should think about, or that you might see is wrong with my Collapse-o-matic please tell me, Im a huge noob to this!

    Thanks

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author twinpictures

    (@twinpictures)

    This should point you in the right direction:
    https://spacedonkey.de/2458/collapse-o-matic-css-tricks-colomat-close/

    Please let us know if that works, or if you require further assistance.

    Thread Starter dardel

    (@dardel)

    Yes! THank you very much! This helped, I still have the problem of when I open my Collapse, my text gets there AND an extra space that I dont want!

    Plugin Author twinpictures

    (@twinpictures)

    OK! This is a common problem on some themes.
    Try this: When you insert the shortcode, don’t use hard returns. For example:
    Hmmm:

    [expand title="trigger"]
some sweet, sweet content
[/expand]

    Ahhh:
    [expand title="trigger"]some other juicy content[/expand]

    Do ping back with your joy/nojoy!

    Thread Starter dardel

    (@dardel)

    This is what I do, I dont use hard returns like this

    Plugin Author twinpictures

    (@twinpictures)

    well there is a BR element being inserted causing the spacing (thanks to wpautop function)

    How are multiple elements bing entered?

    If like this:

    [expand title="trigger"]thing one[/expand]
[expand title="trigger"]thing two[/expand]

    Then try like so:
    [expand title="trigger"]thing one[/expand][expand title="trigger"]thing two[/expand]

    Other than that, how/where are you entering the shortcodes? Text element, visual or text mode? WP Content Block? Shortcode Block? Some other page builder?

    Thread Starter dardel

    (@dardel)

    I use visual to enter the code, but I’ve tried to do it in text mode aswell, but cant figure it out.
    It does not work with the second idea you had, the “Then try like so:”

    Im still unsure what to do.

    Plugin Author twinpictures

    (@twinpictures)

    Hmmm… ok, well there is clearly a BR element being injected between the expand shortcodes. This solution should work:

    First: wrap the entire block of shortcodes in a div element and give it a unique ID:

    <div id="expand_wrapper">
[expand]...[/expand]
[expand]...[/expand]
[expand]...[/expand]
</div>

    Check and see if that magically fixes the issue if not:

    Next add the following CSS to your theme’s quick css section:

    #expand_wreapper br {
   display: none;
}

    There is also a large amount of space (30px) associated with the p tag, so you can control this as well by adding:

    #expand_wreapper p {
   margin-bottom: 7px;
}

    Not exactly elegant, but it should resolve the issue.

    • This reply was modified 2 years, 11 months ago by twinpictures. Reason: added the bit about the p tag
    Thread Starter dardel

    (@dardel)

    Unfortunatly this did not seem to work

    Is my settings completely right? https://gyazo.com/e3a0b24216078b9797b50c2511cd8851

    This is how I added it, and this is how it looks https://gyazo.com/e87ba5eab574685f4d824d572af745ed

    Plugin Author twinpictures

    (@twinpictures)

    well, it looks like you already are have it wrapped using a p tag, so you could just assign that element the ID:
    <p id="expand_wrapper">

    Other than that, the CSS does not seem to be added…
    or it’s added, but you have a cashing plugin installed?
    Regardless, ensure the CSS has been added and exists on the page when you view the source.

    Correction I found it:

    #expand_wreapper br {
   display: none;
}
#expand_wreapper p {
   margin-bottom: 7px;
}

    spell wrapper correctly, and you should be fine.
    expand_wreapper != expand_wrapper

    Correction II: I misspelled it in the example. My bad.

    • This reply was modified 2 years, 11 months ago by twinpictures.
    • This reply was modified 2 years, 11 months ago by twinpictures.
    Thread Starter dardel

    (@dardel)

    Yes, it seems to have worked, but the problem now is that none of my br works anymore in the Expand thing,

    It gets like this:
    https://gyazo.com/7e62719d3b68663062a0d59499033526

    What is weird is, the top one only gets one space, the others get 2 spaces

    I really appreciate you trying to help me tho! Im very new to this

    • This reply was modified 2 years, 11 months ago by dardel.
    Plugin Author twinpictures

    (@twinpictures)

    ah so! simply change your default tag element from span to div in the plugin settings. one thing, oh one thing leads to another…

    Thread Starter dardel

    (@dardel)

    I did change it in the plugin setting, but it did no difference?
    What am I not getting here?

    https://gyazo.com/d0f8135d20ba51090c836dd23309d21d

    and this is how all my expands look

    [expand title=”Konsultation inom el” trigclass=”snap-shut my_special_class” rel=”animal-highlander” tag=”Strong”]Kommer snart[/expand]

    • This reply was modified 2 years, 11 months ago by dardel.
    Plugin Author twinpictures

    (@twinpictures)

    It gets like this:
    https://gyazo.com/7e62719d3b68663062a0d59499033526

    link to the page that exhibits this, please.

    • This reply was modified 2 years, 11 months ago by twinpictures. Reason: polite -er
    Thread Starter dardel

    (@dardel)

    Okay, right now
    https://www.Dardel.se

    Plugin Author twinpictures

    (@twinpictures)

    Okay…
    please share the opening tag that created this:

    <strong div="" class="collapseomatic snap-shut my_special_class" id="id625f16817b803" rel="animal-highlander" tabindex="0" title="Elcentraler">Elcentraler</strong>

    lots of questions here.
    where is the ‘strong’ coming from?
    div=”” is just pure crazy.

    title… what?!

    after going back over the thread and screenshots, it seems to things are at issue.
    1. you are ADDING br tags between the shortcodes. do not do that.
    2. you are ADDING strong tags to the title elements. do not do that.

    remove those two things, and ping back.
    or, if you prefer to just get this solved, contact me direct at: info [at]
    twinpictures [dot] de with a link back to this thread and i will set up a working example that you can build on.

    • This reply was modified 2 years, 11 months ago by twinpictures.
Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Collapse o matic Highlight and space’ is closed to new replies.