Jump to content

Archived

This topic is now archived and is closed to further replies.

clinton4

Overriding Default CSS (#site VS. #page)?

Recommended Posts

Danny

Hi, Nothing really they do the same job, its just that #site is higher up on the DOM meaning that #site basically has more power than #page.

 

For example, lets say you have the following code.

 

#site .example-section { background-color: red; }

#page .example-section {background-color: green; }

 

The code that would be used would be #site. #site is mainly there to allow users to customize third party child themes. Where as #page can be used by developers, but you're free to use whatever one you like.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
clinton4

I see. But I can't seem to get it to work.

 

I got a padding/margin issue with the TextBox section. I have set Padding (CSS Shorthand) to 0px 0px in both Global and Local options. But i still get an 8px padding and 1em margin-bottom.

 

I have located the conflicting CSS/LESS, which is this class:

 

body .pl-area .pl-section .pl-section > .pl-section-pad {
    padding: 8px;
    margin-bottom: 1em;
}
 
So i create this custom CSS to override it:
 
#site .myfix {
    margin: 0px !important;
    padding: 0px !important;
}

 

and apply it to the Styling Classes for the TextBox in both Global and Local scope. But i still get this anoying margin and padding.

 

When i look in inspector, i find this:

 

screen.png

 

 

 

 

 

What am i doing wrong? And how to get rid of this padding and margin?

Share this post


Link to post
Share on other sites
Danny
How have you added it to the Styling Classes field, can you take a screenshot please.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
clinton4

Sure

 

[attachment=1282:screen1.png]

 

Same content in both Global and Local.

Share this post


Link to post
Share on other sites
Danny
Your custom CSS should look something like this:
body .pl-area .pl-section {
	 .pl-section-pad
		.myfix {
			.pl-section-pad {
				padding:0;
				margin:0;
		}
	}
Then when you add myfix to your Styling classes, it should remove all padding/margin.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
clinton4

Hi Danny,

 

Is this CSS or LESS code? I am guessing LESS since it's nested.

I am not familiar with LESS, but can a CSS class from style.css override a LESS class/rule?

 

I also want to mention that i find it verry annoying that we need to tweek and fix such a small issue with custom CSS. Especially when DMS suppose to be a "Design Management System". It does not make sense.

 

Also, what is the point of having the option "Padding (CSS Shorthand)" when it has no function?

 

Thanks for taking the time to help me :)

Share this post


Link to post
Share on other sites
Rob

Hi,

 

No, LESS styling shouldn't be overridden by style.css.

 

Danny's code is LESS, and can be placed successfully in the Custom Code area.  If there's a CSS conflict, the LESS should prevail.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×