Using a custom settings for the margin-left value |.collapseomatic_excerpt

Resolved edoron777
(@edoron777)

12 years, 1 month ago

I would like to ask regarding the option of nested section and the “indent” settings.
The default CSS style include a default class that use setting that indent the content (margin-left: 16px)
.collapseomatic_excerpt, .collapseomatic_content {
margin-top: 0px;
margin-left: 16px;
padding: 0px;

Scenario 1: using the “standard” expand and collapse
I use the option of “expand” for standard text section without the need to “indent” the text (cancel the default settings of (margin-left: 16px)
HTML
[expand title=”Title” trigclass=”Head01″ expanded=”true”]
[/expand]
CSS style ( update the default setting of margin-left to 1 px)
.collapseomatic_excerpt, .collapseomatic_content {
margin-top: 0px;
margin-left: 1px;
padding: 0px;
}

Scenario 2: using nested expand and collapse + custom style (.Head01)
In other article I would like to use the nested option + use the indent (margin-left: 16px)
HTML
[expand title=”Root Level” ]
Some txt
[expandsub1 title=”Nested Level 1″ trigclass=”Head01″]
Some txt
[/expandsub1]
[/expand]

CSS style
For this purpose I add a custom CSS class as follow:

.Head01
{
background: #eee url(images/plus.png) no-repeat 98% 50%;;
border-color:#949494 #949494;
font-size: 110%;
padding: 0px 5px 5px 10px;
cursor: pointer;
color:#000;
}

.Head01.colomat-close
{
background: #eee url(images/minus.png) no-repeat 98% 50%; }

.Head01.collapseomatic_excerpt, .Head01.collapseomatic_content
{
margin-top: 0px;
margin-left: 16px;
padding: 0px;
}
The problem is that the “indent” settings for the custom style are not applied. In other words: the nested use the custom style (color etc) but doesn’t use the custom settings of margin-left: 16px;
If you can look, I have some example in the following link:
http://www.o365pilot.com/2014/04/test-expand-005.html

thanks in advanced
Eyal

https://ww.wp.xz.cn/plugins/jquery-collapse-o-matic/

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Baden
(@baden03)

12 years, 1 month ago
try using the !important attribute like so:
```
.Head01.collapseomatic_excerpt, .Head01.collapseomatic_content
{
margin-top: 0px;
margin-left: 16px !important;
padding: 0px;
}
```
Thread Starter edoron777
(@edoron777)

12 years, 1 month ago

I have implement your recommendation (using the important option) no lack :- (
I have add the important to all of the section in the custom style:
.Head01.collapseomatic_excerpt, .Head01.collapseomatic_content
{
margin-top: 0px !important;
margin-left: 16px !important;
padding: 0px !important;;
}

I have remove the margin setting form the “main style”
.collapseomatic_excerpt, .collapseomatic_content
{
margin-top: 0px;
padding: 0px;
}

Thread Starter edoron777
(@edoron777)

12 years, 1 month ago

Hello
The advice about using the “important” tag help me (thanks a lot!)
No I have additional issue that relate to the indent setting of the nested class text

I want to create a customization to a custom class that I need to use.
the default style is configured to indent each of the sub category.
In my scenario, I have change the default setting of the following CSS class
.collapseomatic_excerpt, .collapseomatic_content {
margin-top: 0px;
margin-left: 1px !important;
padding: 0px;
Because when I use the standard class I don’t want to indent the “content”
Using a nested settings
I have created two custom CSS styles: Head01 and Head02
And use the following syntax for implementing nested expand and collapse:

[expand title=”Root Level” trigclass=”Head01″]
some txt
[expandsub1 title=”Nested Level 1″ trigclass=”Head02″]
some txt
[/expandsub1]
[/expand]

CSS Style

.Head01
{
background: #eee url(images/plus.png) no-repeat 110% 45%;;
border-color:#949494 #949494;
font-size: 110%;
padding: 0px 5px 5px 10px;
cursor: pointer;
color:#000;
margin-left: 1px !important;
}
.Head01.colomat-close
{
background: #eee url(images/minus.png) no-repeat 110% 45%;
}
.Head01.collapseomatic_excerpt, .Head01.collapseomatic_content
{
margin-top: 0px !important;
margin-left: 0px !important;
padding: 0px !important;;
}

.Head02
{
background: #0a3b76 url(images/plus.png) no-repeat 98% 50%;;
border-color:#949494 #949494;
font-size: 110%;
padding: 0px 5px 5px 10px;
cursor: pointer;
color:#000;
margin-left: 26px !important;
}
.Head02.colomat-close
{
background: #0a3b76 url(images/minus.png) no-repeat 98% 50%;
}

.Head02.collapseomatic_excerpt, .Head02.collapseomatic_content
{
margin-top: 0px !important;
margin-left: 26px !important;
padding: 0px !important;
}
.Head02.expandsub1
{
margin-top: 0px !important;
margin-left: 26px !important;
padding: 0px !important;
}

The result is that the sub category header (the nested class) is successfully indent, but the content (the text) is not indented

Can you advice what is the required setting for this configuration?
You can see a sample in the following URL
http://www.o365info.com/test-page-expand-collapse

Plugin Author Baden
(@baden03)

12 years ago

Issue marked as resolved.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Using a custom settings for the margin-left value |.collapseomatic_excerpt’ is closed to new replies.