Support » Plugin: Collapse-O-Matic » modify hover action?

  • Resolved mku1tra

    (@mku1tra)


    Curious if there’s a way to eliminate the underline on hover?
    I haven’t found any documentation on it.. found loads of other cool and useful tips though.

    Superb plug-in btw
    baden_meme
    great work mate!

    After modifying arrows the only way to not overlap with text was adding nbsp before text, however, now the underline makes it look clumsy, especially on mobile.

    • This topic was modified 5 months, 2 weeks ago by mku1tra.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author twinpictures

    (@twinpictures)

    add the following CSS to your theme’s quick css section or style.css file… or even the custom css section on the plugin’s option page:

    .colomat-hover {
    	text-decoration: none !important;
    }

    As for the arrow padding, check out this post:
    https://spacedonkey.de/1578/collapse-o-pro-matic-css-tricks-arrows/
    as it deals directly with the spacing issue.
    hint: it’s the padding-left: part.

    Superb!

    You are a gentleman and a scholar, good sir.
    tips_fedora_meme

    Finished it out with some hr tags after the titles and subtitles and it is simply gorgeous. Horizontal rule lines really added a nice touch, IMO. Thank you, for such a quick answer!

    ___________________________________________________________________________________
    Now, for all-a-yous who’s afraid of code and/or needs a dummy simple guide for an implementation that’s optimized for mobile….

    ________________________________ INSTRUCTIONS __________________________________
    IMPORTANT – go to edit a page then click the 3 dots at the top right corner and select code editor. Now paste this html into the code editor and publish:

    
    <!-- wp:html -->
    <span style="font-size: 19pt;">
    
    <strong>
    [expand title="TITLE TEXT"]
    </strong>
    <hr>
    
      [expandsub1 title="SUBTITLE TEXT" rel="2-highlander"]
    <hr>
    SUBTITLE CONTENT
      [/expandsub1]
    
    <br>
      [expandsub1 title="SUBTITLE TEXT" rel="2-highlander"]
    <hr>
    SUBTITLE CONTENT
      [/expandsub1]
    
    <br>
      [expandsub1 title="SUBTITLE TEXT" rel="2-highlander"]
    <hr>
    SUBTITLE CONTENT
      [/expandsub1]
    
    [/expand]
    </span>
    <!-- /wp:html -->

    Next, you’ll need to enter CSS in the plug-in box (…just in case anyone still isn’t aware, it’s located in: WP Settings > Collapse-O-Matic > Custom Style) …dev made it easy for you to change the CSS right from the plug-in! Love that.

    .colomat-hover {
            text-decoration: none !important;
    }
    
    .collapseomatic_excerpt, .collapseomatic_content {
        margin-left: 0 !important;
     }
    
    .collapseomatic {
    background-image: url(URL OR THE ARROW.png);
    background-position: left center;
    padding-left: 55px;
    }
    
    .collapseomatic {
        background-image: url(URL OF THE ARROW.png);
    }
    .colomat-close {
        background-image: url(URL OF THE ARROW);
    }

    That’s really all there is to it.

    A couple of additional notes:
    You can get this great arrow at: https://commons.wikimedia.org/wiki/File:Collapse_Arrow_(61412)_-_The_Noun_Project.svg

    Simply download the png, resize it to 30px and invert a copy, to have one png for the open arrow and one for the close arrow. Upload those and enter the image URL in the CSS section, where indicated above. 30 px is the perfect size imo; not too small, not too large but you can adjust if you like. The final product is — you’ll have a mobile optimized webpage that has beautiful sections and works much like wikipedia does.

    • This reply was modified 5 months, 2 weeks ago by mku1tra.
    • This reply was modified 5 months, 2 weeks ago by mku1tra.
    • This reply was modified 5 months, 2 weeks ago by mku1tra.
    • This reply was modified 5 months, 2 weeks ago by mku1tra.
    • This reply was modified 5 months, 2 weeks ago by mku1tra.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.