[Plugin: jQuery Collapse-O-Matic] CCS and Collapse-o-matic

Needs to be s3 ofcourse, but nevertheless;

Could you please hand me a code snippet of how font appearances can be altered by adding settings to the stylesheet and how the collapse-o-matic command should look like when these settings have been applied?

It should give me a gentle push in the right direction to get going with this plugin. Which is totally freakin’ fantastic by the way.

thank you in advance!

To give you a hint of what can be done with with collapse-o-matic, take a look at one of my websites: <arklatexmoaa.org>. COM is implemented on the Chapter Leadership page as well as both the left and right sidebar. I did all of the appearance tweeking within the implementation, mainly so that I could have one implementation look different than another.

Dave

Thanks Dave, but can you hand me some code to help me start up this thing with css?

Thanks.

Sorry, I can’t – but for a simple reason. I know just enough to get in trouble and I do not want to screw up (or cause someone else to screw up) something based on what I’ve done/said/suggested.

Having said that, I am sure there are many people out there who are knowledgeable in css and can offer some good help.

Dave

I hope so Dave. Thanks anyway. ??

Hey-hey, sorry for the delay.
I think what you are trying to do is the following:
CSS:

.s4 {
	font-color: #ff9900;
	font-size:18px;
}

HTML:

[expand title= "expand this title" class="s4"]expanded title[/expand]

For a detailed explanation of how all this works, check out the examples in the documentation for the Class Attribute: https://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/

Let us know if you got it all sussed out!

Hi Baden,

Thank you for the advice. I’ve copied and pasted the html part and the css part but it doesn’t work. Looks like the css is overruled somewhere. (guess)

Just to make sure: I need to alter the plugin’s style sheet right?

Thanks in advance for you help.

Hi Baden,

I’ve made some screenshots of the proces. Maybe I’m doing something wrong.

The first is from the stylesheet of the plugin, second is the html input in WP and the third is how it looks like in a webbrowser. (in this case Chrome)

CSS: https://imageshack.us/photo/my-images/14/styleom.jpg/

WP: https://imageshack.us/photo/my-images/24/73407812.jpg/

Web: https://imageshack.us/photo/my-images/72/webpj.jpg/

thanks in advance!

Oh and I’m using the Colorway theme from Inkthemes.

I see the problem.

First, the CSS needs to go in your THEME’s CSS. It sill will work if you place it in the plugin’s style sheet, but this will be overwritten when the plugin is updated.

Next, look at the CSS. You do not have a closing ‘}’ bracket on the .collapseall:hover, .expandall:hover definition. That would be very not good.

Fix that, move the definition to the style sheet of your theme, and let us know if that susses out the situation for you.

I hate to say it Baden, I was hoping for it, but…..

..it ain’t working.

Here’s what I’ve done:

Fixed the style sheet from the plugin

.collapseomatic {
	background-image: url(images/arrow-down.png);
	background-repeat: no-repeat;
	padding: 0 0 10px 16px;
	/*border: 1px dotted blue;*/
	cursor: pointer;
}
.arrowright {
	background-position: top right;
	padding: 0 16px 10px 0;
}
.noarrow {
	background-image: none !important;
	padding: 0 0 10px 0;
}
.colomat-hover {
	text-decoration: underline;
}
.colomat-close {
	background-image: url(images/arrow-up.png);
}
.collapseomatic_excerpt, .collapseomatic_content {
	margin-top: 0px;
	margin-left: 16px;
	padding: 0px;
}
.content_collapse_wrapper {
	display: none;
}
.collapseall, .expandall {
	cursor: pointer;
}
.collapseall:hover, .expandall:hover {
	text-decoration: underline;
}

added the code like you suggested to the style sheet from the theme (style.css)

Theme URI: https://www.inkthemes.com/wp-themes/colorway-wp-theme/
Description: Colorway is Simple, Elegant and beautiful Theme with Easy Customization Options built by InkThemes.com. The Customization Options includes using your own Logos, Backgrounds, Analytics and your own Custom Footer Texts and Analytics that can be tweaked using Theme Options Panel. Colorway Theme is Single Click Intall feature, Just press activate button and your website will get ready with all the dummy content. Just set the content from the Themes Options Panel. Colorway by InkThemes.com is suitable for any business or personal website. The Theme can work for various different niches. It includes special styles for Gallery pages, and has an optional fullwidth page template as well.
Author: InkThemes.com
Author URI: https://www.inkthemes.com
Version: 1.7.6
License: GNU General Public License
License URI: license.txt
Tags: black, blue, green, white, gray, custom-menu, dark, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, custom-colors, custom-header, custom-menu, light, theme-options, editor-style
*/
/*
WARNING! DO NOT EDIT THIS FILE!

To make it easy to update your theme, you should not edit the styles in this file. Instead use
the custom.css file to add your styles. You can copy a style from this file and paste it in
custom.css and it will override the style in this file. You have been warned! :)
*/
@import url('css/reset.css');
@import url('css/960_24_col.css');
@import url('css/ddsmoothmenu.css');
/*==============================*/
/*  GENERAL TYPOGRAPHY */
/*==============================*/
body {
    font: 13px/1.5 "Trebuchet MS", Arial;
}

.s4 {
	font-color: #ff9900;
	font-size:18px;
}

pre, code {
    font-family: "Trebuchet MS", Monaco, Consolas, monospace;
}
hr {
    border: 0 #ccc solid;
    border-top-width: 1px;
    clear: both;
    height: 0;
}
p {
    font-size:13px;
    font-family:"Trebuchet MS";
    color:#4a4a4a;
    line-height:1.6;
}
a {
    text-decoration:none;
}etc.etc.etc.

added the html to my WP page:

[expand title= "expand this title" class="s4"]expanded title[/expand]

and then…nothing. I see the text and I can expand it but there’s no styling whatsoever.

When you have the time, and I know you don’t, can you have a look at this for me?

thanks in advance!!

alright, there is something funky going on.
Tell you what, create a temp. admin account and send the login details to info /here is where you place that funky at symbol/ twinpictures.de

We will jump on your site and get this working. Technically this is our ‘premium support’ service, but we feel your pain.

thank you Baden. I’ve send you an e-mail.

[expand title= “expand this title” class=”s4″]expanded title[/expand]
is wrong, wrong, wrong. My bad. See that part about class=”s4″ That is TOTAL CRAP. How it should be, and how it is explained in the documentation is:
[expand title= "expand this title" trigclass="s4"]expanded title[/expand]

That is what happens when one get’s too cocky, one makes mistakes.
Hopefully you are well on the the way to happy-happy-joy-joy client times, yes?

Well Ren, yes! you’re totally right on the trigclass thing.

I’m puzzling to get the theme font right now. But it defenately got me going on my way again. Thanks!