[resolved] Can Collapse-O-Matic use the same look as my template? (2 posts)

  1. CliffHobbs
    Posted 3 years ago #

    Apologies for another question so soon but I'm LOVING this plug-in and making progress on getting it to work with my site thanks to your excellent support.

    Just a very quick question on styling (I'm not a developer just an IT guy trying to drag his old website of FAQs kicking and screaming into this decade).

    If you look at this page:


    Is there anyway I can customise Collapse-O-Matic to use the formatting of my theme i.e. what's shown as the 2nd item on this page?

    Many thanks,


  2. CliffHobbs
    Posted 3 years ago #

    OK I've been having a play (like I say I don't understand web development) and if you look at this page it's kind of working:


    This is the code I am using:

    [expand title="Pocket Calculator" tag="h4" id="kraftwerk" trigclass="accordion opener ul.accordion"]Target Content
    The quick brown fox jumped over the lazy dog.
    <span class="collapseomatic colomat-close" id="bot-kraftwerk">Click here to close</span>[/expand]

    I'm guessing it has something to do with my theme's style.css which I've looked in and done a search for "accordion" as my theme uses this shortcode to display the items the way i want to. Doing a search of style.css I see the following lines:

    /* 3. Accordion
    .accordion {width: 100%;padding:0 0 20px 0;background:none;}
    .accordion a {text-decoration: none;}
    .opener {background:#FFF url(images/_global/bg-accordion-opener.jpg) left bottom repeat-x;display:block;font-size:13px;padding:8px 9px;outline: none;color:#676767;border: 1px solid #C3C3C3;margin-bottom:3px;}
    .opener:hover {color:#222;text-decoration: none;}
    .opener strong {background:url(images/_global/bg-accordion-close.png) 2px 3px no-repeat;display:block;padding:2px 0 2px 32px;height:1%;cursor:pointer;text-shadow:1px 1px 1px #FFF;}
    .accordion .slide-holder {width:100%;overflow:hidden;}
    .accordion {list-style:none;}
    .accordion .ui-state-active strong {background:url(images/_global/bg-accordion-open.png) 2px 3px no-repeat !important;color:#222;}
    .accordion .slide {padding:20px 27px 0 27px;}

    I'm at a bit of a loss though on how to get Collapse-O-Matic to mirror this and would appreciate help from someone who understands this stuff better than I do.

    Many thanks in advance for your time.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Collapse-O-Matic
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic