-
AuthorPosts
-
September 21, 2016 at 9:27 am #689686
Hello
I have a table with 3 pricing columns, that I would like to be able to have a different color for each of them. I’ve seen other forum posts where they talked about it and was able to give each column an ID in order to add some quick css, but I can’t seem to find out how to do that. Can you help? I have the “custom class” enabled, but that’s for the entire table, as far as I understand.
Thanks :)
September 22, 2016 at 8:01 am #690135Hey steffenhn,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardSeptember 22, 2016 at 8:45 am #690155if you look at the source code the pricing tables aren’t real tables they are unordered lists
each column of a pricing table got his own ul – so it must be possible to select them via nth-child option f.e..pricing-table-wrap:nth-child(2) { color: #009; font-weight: bold; }
BUT
the rules to colorize the prizing tables are set through enfold the same way – and i think quick css does not overwrite these rules accept we set those rules to default color first.
If you don’t like to change every table on your site it is best to give the pricing table you want to change a custom class f.e. rawtable
than you can set the font colors to default to have the chance to change them:.main_color .rawtable .pricing-table > li:nth-child(2n) { color: inherit !important; }
after that you can change color of font (headings have their own rule – so from this it is not touched)
.rawtable .pricing-table-wrap:nth-child(1) { color: #900 !important; } .rawtable .pricing-table-wrap:nth-child(2) { color: #090 !important; } .rawtable .pricing-table-wrap:nth-child(3) { color: #009!important; }
if you have more than a few columns and want to change f.e. every second column :
.rawtable .pricing-table-wrap:nth-child(2n) { color: #090 !important; }
- This reply was modified 8 years, 2 months ago by Guenni007.
September 22, 2016 at 10:26 am #690182Thank you both for the response. Guenni007, i’ve tried adding the code you suggested, but it doesn’t seem to do anything. I used forsikring_priser as the class instead of rawtable, which I also added as a custom class in the back end.
You can see the site i’m refering to here: fadl.dk/testforsikring – I put a code, so that it’s not visible until it’s ready for customers. The password is “Karoline” without the “”.
The table is at the top of the page.
September 22, 2016 at 9:30 pm #690415and what do you want to colorize now?
erase my code above and put in f.e.:
.forsikring_priser .pricing-table-wrap:nth-child(2) .pricing-table li:nth-child(4) { color: #f00; }
you see how it works
this was the 2nd column and in that 2nd column the 4th list pointand :
.forsikring_priser .pricing-table-wrap:nth-child(3) .pricing-table li:nth-child(3) strong { color: #63b5be !important; }
without strong – the stong rule would not be overwritten
so 3rd column 3Listpoint (and strong to overwrite here the general strong rule)September 22, 2016 at 10:22 pm #690428Thanks for the fast response, Guenni007! :)
I’ve tried adding your code to quick css, but nothing changes. Am I doing it wrong? I wanna add a new backgorund color to both the button in each column and the avia-heading-row. Nothing seems to take effect. I’ve put
.forsikring_priser .pricing-table-wrap:nth-child(2) .pricing-table li:nth-child(4) { color: #f00; }
inside the quick css and left it there, but it’s not visible on the site, it seems.
September 23, 2016 at 1:49 pm #690714First of all – my code above was an example because you did not say what to change! btw: my code is not in your source code!
.forsikring_priser .pricing-table-wrap:nth-child(1) li.avia-heading-row, .forsikring_priser .pricing-table-wrap:nth-child(1) li.avia-button-row a { background-color: #d04372; } .forsikring_priser .pricing-table-wrap:nth-child(3) li.avia-heading-row, .forsikring_priser .pricing-table-wrap:nth-child(3) li.avia-button-row a { background-color: #87c7ab; }
for each column 1, 2, 3 see in nth-child(1)
September 23, 2016 at 1:50 pm #690716September 23, 2016 at 2:49 pm #690775I just figured out what the problem was, or at least how to fix it.. I became suspicious when i couldn’t find the quick css on the page, so I set permissions to 777 as suggested here, and now everything works: https://kriesi.at/support/topic/styling-and-enfold-css-wont-change/#post-279300. Permissions were set at 755. Shouldn’t 755 be okay? But thanks a lot for your help Guenni007! Your code works now.
September 23, 2016 at 3:09 pm #690800Edit: ok if you are only changing vor that wp-content/uploads/dynamic-avia 777 is ok ! I did not follow your link and thought you did it for all files /folders so forget the rest here
But 777 is too much.
Go on reading how to set the correct file permissions.I think for the files itself it is 640 and for the folders 750
but 644 and 755 seem to be ok too. For wp-config you should have 640 ( on normal Use)
Sometimes if you install f.e. Caching tools – they want to insert some code to wp-config – this has to be allowed for that moment.
only my uploads, upgrade and temp folders got a different permission.For example the quick css info goes to wp-content/uploads/dynamic-avia
these files must have write permissionsBTW sometimes (it depends on your hoster) the file-permissions are ok but the owner-ship is wrong.
For my hoster f.e. i had to set the owndership to wp user (not ftp) and i have than the possibility to set the ftp-user react like a wp-user.
Only that setting allows me to have automatic updates of wordpress. etc –________________
Security is a wide and complex field in wordpress.
The wp-config.php is a very important file to secure so there are a lot of things you can doOn apache Server you can use for that the htaccess file f.e.
<files wp-config.php> order allow,deny deny from all </files>
- This reply was modified 8 years, 2 months ago by Guenni007.
-
AuthorPosts
- You must be logged in to reply to this topic.