Table class for site affects c5 interface
Permalink
I need to have a number of tables on my site with a red background, white text and border radius.
So I have setup a table class to apply to the tables. However, this has resulted in the file manager having white text as well as some text in the form to have a red background.
what is the best way to resolve this?
I have tried to copy and paste the css in the additional css panel but it doesn't apply the format. BTW: my tables have image and text wraps next to them.
So I have setup a table class to apply to the tables. However, this has resulted in the file manager having white text as well as some text in the form to have a red background.
what is the best way to resolve this?
I have tried to copy and paste the css in the additional css panel but it doesn't apply the format. BTW: my tables have image and text wraps next to them.
Okay interesting story now where is your CSS so people can help you? Likely reason for the issue is you have used CSS that conflicts with core CSS and if you post your code others will spot your mistake. You could also use a CSS inspector, look at the areas that are affected, what is Chrome inspector or other tool telling you that is applying styles?
+1 on the above. I'd target my css a little tighter and reference the outer container the tables are residing in. You may be casting your net too wide. Happens all the time. A sample of your css would help - as would having a look with a web inspector.
Here is the style for the tables:
<code>
.plastic {
width: auto;
color: #fff;
padding: 10px;
border-spacing: 0;
border-radius: 6px;
background: #b70000;
font-size: 85%;
margin: 0 auto;
}
</code>
I have checked the css in concrete > blocks > forms
Seems ok but still problems. See attached.
Hmmmm....
<code>
.plastic {
width: auto;
color: #fff;
padding: 10px;
border-spacing: 0;
border-radius: 6px;
background: #b70000;
font-size: 85%;
margin: 0 auto;
}
</code>
I have checked the css in concrete > blocks > forms
Seems ok but still problems. See attached.
Hmmmm....
I usually throw a div around my content after the body tag so that I can target my page content specifically - rather than just target all <table> tags (including c5 interface <table> tags) that might crop up.
So this might go some thing like:
That way, I can use the .page class in my css to specifically target tables that are only enclosed in the .page class
So your .plastic becomes .page .plastic
Hopefully that makes sense.
So this might go some thing like:
<body> <div class="page"> -- page stuff goes here -- </div> </body>
That way, I can use the .page class in my css to specifically target tables that are only enclosed in the .page class
So your .plastic becomes .page .plastic
.page .plastic { width: auto; color: #fff; padding: 10px; border-spacing: 0; border-radius: 6px; background: #b70000; font-size: 85%; margin: 0 auto; }
Hopefully that makes sense.
I usually create same kind of HTML/CSS as juddc described. Basically just a wrapper div with certain class to which I then target all the styles.
There is, however, one minor drawback: Some JS libraries (like Fancybox or Bootstrap's tooltip) usually append the modal/popup/tooltip element directly to the body tag, hence leaving all your wrapper-class styles unused. Some libraries allow you to specify the parent element, which fixes the problem, but some do not.
There is, however, one minor drawback: Some JS libraries (like Fancybox or Bootstrap's tooltip) usually append the modal/popup/tooltip element directly to the body tag, hence leaving all your wrapper-class styles unused. Some libraries allow you to specify the parent element, which fixes the problem, but some do not.
Awesome! Totally understand. I have a wrapper div but didn't roll that in to the table style.
This howto shows how to automatically scope masses of css automatically.
http://www.concrete5.org/documentation/how-tos/designers/easily-sco...
http://www.concrete5.org/documentation/how-tos/designers/easily-sco...
Solved!
I simply added a label class to my css with background white.
I simply added a label class to my css with background white.
