Plugin Author
Baden
(@baden03)
can you share a link? Also, make sure you do NOT have the ‘only load script with shortcode’ checked in the options.
project is not public yet. but: disable only load if… did it! thanks for the hint! great plugin!
Plugin Author
Baden
(@baden03)
excellent! glad it worked out for you. Please consider leaving a review of the plugin or it’s support.
Hi Baden,
I currently have two instances of collapsable text on two different pages.
One page works beautifully, with the arrows replaced by the png files (see CSS/child theme below) and spaced nicely.
However on the other page , the text abutting the png image is quite a bit larger and is currently overlapping into the png image.
Could you guide me , as if I move the png background position in the CSS, it will affect both pages.
How can I use them independantly? Do I just run two plugin instances of collapse o matic?
Kind regards,
Danster
/*replaces FAQ open arrow with image*/
.collapseomatic {
background-image: url(http://www.mydomainname.com.au/wp-content/uploads/2015/08/FAQopen.png) !important;
background-position:0% 5%;
}
/*replaces FAQ close arrow with image*/
.colomat-close {
background-image: url(http://www.mydomainname.com.au/wp-content/uploads/2015/08/FAQclose.png) !important;
background-position:0% 5%;
}
Plugin Author
Baden
(@baden03)
you simply create a css class for the one you need to change, and use the trigclass attribute to assign it to a specific expand element like so:
CSS:
.your_special_class {
background-image: url(http://www.mydomainname.com.au/wp-content/uploads/2015/08/FAQopen.png) !important;
background-position:0 20px;
}
.your_special_class.close {
background-image: url(http://www.mydomainname.com.au/wp-content/uploads/2015/08/FAQclose.png) !important;
}
Shortcode:
[expand title="your trigger text" trigclass="your_special_class"]...[/expand]
Also, it may not be a good idea to use percentage values for the background-position, as this will change depending the width of your trigger text.
Thanks Baden,
that didn’t quite work, and I must be missing a piece of understanding.
My FAQ page works great and has this bit of code:
<div>
[expand title=”WHERE DO I START?” rel=”start” trigclass=”faq”]…..[/expand]
</div>
where faq is a google font control, and it calls on the .collapseomatic & .colomat-close css classes described above. Works well.
My other page SONGLIST has this bit of code:
<div>
[expand title=”PARTY STARTERS” rel=”party” trigclass=”songlist-heading”]…
[/expand]
</div>
where songlist-heading is another google font control.
I tried replacing this one with trigclass=”your_special_class”
and of course putting in the new css clases with the correct urls.
Unfortunately it removes my prefered font control(songlist-heading). Anyway I can keep this font in the expand title?
I also noticed on the songlist page that the .your_special_class.close
was not working. Its was still displaying the openpng instead of the closepng.
How does collapse-o-matic recognise the classes .colomat-close and .your_special_class.close?
I think this is the bit I dont quite understand…
Kind regards,
Danster
Plugin Author
Baden
(@baden03)
Danster: can you share a link to your page? would go a long way to helping us understand what is going on.
Hi Baden, thanks for the reply.
The two pages I was refering to are:
http://www.poplife.com.au/faq (works great)
http://www.poplife.com.au/songlist (different font control overlaps the open/close image)
Kind regards,
Danster
Plugin Author
Baden
(@baden03)
Your issue is CSS related.
The .faq clas has a padding-left: 39px;
The .songlist-heading class does not.
What is the problem, exactly?
Hi Baden,
my apologies!
The .songlist-heading class now has been given some padding and does not overlap the arrow png.
I’m obviously a rookie, thanks for your patience and help!
I had also reverted back to the .collapseomatic and .colomat-close that I used for my FAQ page for simplicity.
Thanks Baden!
Danster
