|
clifford choi
|
December 28, 2016 at 7:12 pm
Hi,
I’d like to change the table in the page below
http://www.copadehk.com/registration/
From light grey (first row) and white (bottom rows) to red and dark grey (same color as the background) respectively.
An example would be here:
http://www.copadehk.com/divisions/
How do I do this?
Thanks!
|
|
Tony
|
December 29, 2016 at 3:28 am
Hi there,
It looks like you have styles added to your themes styles.css file that specifically set the background-color property for the EE ticket selector table – http://take.ms/3QcrH
That’s setting the ticket selector table background to be white, the table contents all have transparent backgrouns, but because you’ve set that CSS it shows as white. I’m sure sure why you’ve added that rule but removing it will show the background through the table again.
Adding the Red table head can be done using:
.tkt-slctr-tbl thead {
background-color: #ee6059;
}
|
|
clifford choi
|
December 30, 2016 at 12:48 am
Hi Tony,
Thanks for helping me again. I think it was you that has helped me on most of my questions, really appreciate it!
The transparent part is solved, however I can’t get the first row to be red. I added the code in both theme’s custom css and “style.min.css” file. It’s still there now but doesn’t seem to work. Would you mind having a look again?
http://www.copadehk.com/registration/
Thanks!
|
|
Tony
|
December 30, 2016 at 3:17 am
You have more custom styles adding colors to the ticket selector tables which are overriding the above – http://take.ms/HyDzb
.tkt-slctr-tbl-wrap-dv table th
If more specific than
.tkt-slctr-tbl thead
So the first rule ‘wins’.
Basically it looks like you have custom styles already added to set the ticket selector table to have white backgrounds, now that you want to change that you need to remove the original custom styles you’ve added which force the backgrounds to white.
You can override those with more specific CSS, for example:
.tkt-slctr-tbl-wrap-dv table th {
background-color: #ee6059;
}
Should override your original custom style if added to the end of the stylesheet, however your now playing ‘specificity wars’ to make sure you override styles that you are no longer using which in the long run is going to cause more problems for you.
I’d recommend going over your styles and finding the custom styles you’ve added, then remove the styles you don’t need (or amend them to suit your new use case).
|
|
clifford choi
|
January 9, 2017 at 7:41 pm
Thank you so much Tony, it worked out! Followed your instructions to just remove that part of the coding.
However would you mind helping me again as I’m very noob when it comes to coding.
Can the table header font be white (Price, QTY) and have the table width match the “Register” button’s width?
http://www.copadehk.com/registration/
Thanks!
|
|
Tony
|
January 10, 2017 at 6:52 am
As long as you don’t have other styles that override it, this should work:
.tkt-slctr-tbl {
width: 100%;
color: #fff;
}
I also noticed that the background when you click ‘show details’ is set to white – http://take.ms/mwyf5
That again is being caused by some custom CSS that has been added to the site which should be made either more specific to your use case or removed.
|
|
clifford choi
|
January 13, 2017 at 1:52 am
Hey Tony! I think it’s all fixed and looking good now.
I don’t know much about CSS and this is what I did:
1. Removed a lot of the .tkt-slctr codes that had any RGB color in them.
2. Added your width code
3. Added back the table border codes (css codes that have the phrase “border:1px”).
Now it looks perfect! I assume all these changes are just changing the style, and not the functionality?
PLEASE LET ME KNOW IF I’M WRONG! I saved the original CSS file on my desktop in case I am.
Thanks!
|
|
Tony
|
January 13, 2017 at 6:31 am
Yep, CSS just changes the style/look of the page, it doesn’t change functionality unless your hiding elements that users need to click on (you’re not).
The changes made should be fine 🙂 Nice job.
All of the selectors I gave you (anything with ‘tkt-slctr’ as part of the selector) specifically target the EE ticket selector tables so only apply to that.
|
