Jump to content
Sign in to follow this  
leightsp

Anyone know to change the color of a html table cell?

Recommended Posts

leightsp

I am having real trouble get cell colors to work in Platform pro. I need to be able to change each individual cell color. I have copied code from another Wordpress site into Platform Pron and it does not work with this theme. Any help is appreciated.

Share this post


Link to post
Share on other sites
leightsp
Hi Catrina, here is the link. http://www.tytalcen.co.uk.server102.ukservers.net/availability-2 The table has 3 columns and 3 rows. As you will see from the html the first row is hidden. I have colored the cell grey and the text is white. The cell color does not seem to work in Platform.

Share this post


Link to post
Share on other sites
catrina
Try adding this CSS to Custom Code > Custom CSS to change the cell background color: [code]td {background-color: #e2f3f5;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
leightsp
Ok That changes all the cells, how about individual cells. I would like to be able to change all the individual cells from the page editor. I don't mind having some pre-defined colors added into the css, but I need it to be fairly simple to change for my customer.

Share this post


Link to post
Share on other sites
catrina
In order to change cell colors individually you'll need to assign a specific class to each cell in the table. For example: Cell code would look like this... [code]cell 1 content cell 2 content cell 3 content[/code] CSS would look like this... [code]td.cell1 {background-color: #ONECOLOR;} td.cell2 {background-color: #ANOTHERCOLOR;} td.cell3 {background-color: #ADIFFERENTCOLOR;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
leightsp
Sorry one more question. How can I change the width of the table? If you go back to the link you will see I have two tables. The top table I would like to change the width. [b]Code:[/b]
Dates Shaded Green = Low Season (Short breaks Available Anytime - minimum stay of 2 nights)
Orange = Mid Season (We will consider short breaks - minimum stay of 3 nights)
Pink = High Season (No short breaks available)
[b]CSS:[/b] table#key {text-align: left;background-color:#FFFFFF;} table#key td {font-size: 11px;text-align: left;padding-left: 10px;} td.high {font-weight:bold; border-top: solid #e7e7e7 1px; border-bottom: solid #e7e7e7 1px; background-color: #ffd7d3;} td.mid {font-weight:bold; border-top: solid #e7e7e7 1px; border-bottom: solid #e7e7e7 1px; background-color: #ffe3b2;} td.low {font-weight:bold; border-top: solid #e7e7e7 1px; border-bottom: solid #e7e7e7 1px; background-color: #defddb;} Thank you.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×