Custom CSS stopped working after update.

Resolved ernst1234
(@ernst1234)

10 years, 7 months ago
Hi there

After updating to version Ultimate Tables V 1.6.3, my Custom CSS stopped affecting the tables.

My Custom CSS is the only code in Appearance>>Custom CSS.
It is the following code:
```
tr.odd {
    background-color: #FF7E00;
}
tr.even {
    background-color: #FF6400;
}
tr {
      background-color: #000;
}
.zebra tbody tr:nth-child(2n) {
    background: none repeat scroll 0% 0% #FF6400;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8) inset;
}
```
Not experienced with web dev, so please be descriptive.

Cheers

https://ww.wp.xz.cn/plugins/ultimate-tables/

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

Thread Starter ernst1234
(@ernst1234)

10 years, 7 months ago

Fogot to poast actual page. Can see examples of how it looks now at http://www.crywolf.co.za/prices
It’s currently white text on white background. The Custom CSS gave it a great interlaced orange look.

Plugin Author extendyourweb
(@extendyourweb)

10 years, 7 months ago

You must select table class equal to “zebra”, now you put “display”. To work styles put them well:

tr.odd {
background-color: #FF7E00 !important;
}
tr.even {
background-color: #FF6400 !important;
}
tr {
background-color: #000 !important;
}
.zebra tbody tr:nth-child(2n) {
background: none repeat scroll 0% 0% #FF6400;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8) inset;
}
Thread Starter ernst1234
(@ernst1234)

10 years, 7 months ago
Thanks, but now a contact form, which is based in an html table is not working right, the code example:
```
<table style="width:100%;background-color:transparent">
<tr style="background-color:transparent;height:50px">
<td style = "vertical-align:top;text-align:right">Name & Surname * &#160 &#160</td>
<td style = "vertical-align:top;text-align:left">[text* your-name size:30]</td>
 </tr>
</table>
```
So if I understand it correctly, the CSS code you gave, with the !important has essentially given the custom CSS styles complete priority over all “tr” objects. Is that right?

Is there a way to change the CSS code you gave to ONLY affect the ULTIMATE TABLES’ tables? Eg

ultimate_table.tr.odd
etc etc

Apologies for the follow up question, but I didn’t know this would affect the other table like this. In fact, the original problem might NOT have been after the ultimate tables update, but rather after the new contact form table.
Plugin Author extendyourweb
(@extendyourweb)

10 years, 7 months ago

Yes, !important give complete priority over all “tr” objects.

You can use this css:

.dataTable tr.odd {
.dataTable background-color: #FF7E00 !important;
}
.dataTable tr.even {
.dataTable background-color: #FF6400 !important;
}
.dataTable tr {
background-color: #000 !important;
}
Thread Starter ernst1234
(@ernst1234)

10 years, 7 months ago
OK, you suggestions got me on the right track. Here is the code I eventually ended up with, which changes the Ultimate Tables, but not the other tables.
```
.dataTable tbody tr.odd {
background-color: #FF7E00 !important;
}
.dataTable tbody tr.even {
background-color: #FF6400 !important;
}
.dataTable tbody tr:nth-child(even) {
background-color: #FF6400 !important;
}
.dataTable tbody tr:nth-child(odd) {
background-color: #FF7E00 !important;
}
.dataTable tr {
background-color: #000 !important;
}
```
Could probably work without the tr.odd and tr.even section, but might provide some compatibility for older browsers. Not sure.

Also note, the .dataTable did not work when I had it inside the {}, but when removed there, worked well.

And as you can see I also removed other parts of the code, like the .zebra, which did not seems influence the results visually.

Thanks for the help and I hope this can also help someone else.

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

The topic ‘Custom CSS stopped working after update.’ is closed to new replies.

Tags