CSS for custom field table

Support
#1

Hi, I’m in the process of converting a site with a custom theme to the X theme using a staging site, and I’m having some trouble with the CSS for a table (where the html is in a custom field).

The original site is upstatefilms.org, and the staging site is https://staging1.upstatefilms.org.

On the original site, on the home page, there are days and times for movie showtimes in a table; in the staging site, the table is there but without the CSS formatting for padding, etc.

The original CSS is
.post-21839 .post-entry td, .post-entry th {
padding: 4px 3px; background-color: #ABABAB; border-style: solid; border-width: 1px; border-color: #000000; cellspacing: 1px; }

This CSS also appears in the staging site, but it doesn’t seem to be having any effect.

Can you help figure out what the problem is? Thanks for your help, as always.

#2

Hello Steve,

Thanks for writing in!

Please use following CSS under X > Theme Options > CSS:

.post-21839  td, .post-21839  th {
    padding: 4px 3px !important;
    background-color: #ceafaf !important;
    border-style: solid;
    border-width: 1px;
    border-color: #000000 !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Thanks for the help. I had the CSS right but the ID was incorrect. Now I have another problem. The CSS you provided is applied in the theme options edit view and works perfectly, but after saving, the site does not show the changes. I’ve cleared the site cache and tried on three browsers, all with cleared cache.

#4

Hi Steve,

I can see the CSS is there. It is not working because the selector is wrong. There’s this comment above that CSS:
*Showtimes tables on home page: border, padding and background color */
If that is meant for homepage, it is a page and correct selector is .home default selector for homepage or .page-id-21839 and not .post-21839

The issue though is .post-entry. There’s no content with that class on homepage. Now to help you better, please confirm if that CSS is really for homepage. If not, please share the page URL and on which section and what exactly you are trying to achieve. Let’s go direct to your end goal and we will see the correct CSS.

#5

Hi, I got it working, thanks to your help. I think there was a problem with CSS for the table being located in two places (the X customizer and the Content Views settings). When I put the CSS you gave me in the CV settings only, it worked perfectly. Thanks again!

#6

You’re welcome!
We’re glad we were able to help you out.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.