[Solved] CSS not working (multiple issues), help a noob please :-)

[jlbrown1]

My WordPress site is http://www.saddlebackstables.net. I have a few questions as a CSS noob. I am using a purchased theme. As recommended, I am using a child theme to make modifications. That said, I am modifying the style.css in the root of my child theme. My question is why are the lines I have in bold and italics not working when the rest of those sections work perfectly. For the article table caption issue, you can go to http://www.saddlebackstables.net/coming-soon and see that it is grey unless you hover, but it is indeed centered, underlined and large font. Likewise, on the home page, in the absolute footer (called that in the theme), the centering works, but I cannot get it to change font sizes or underline. Any help is appreciated.

Here is the syle.css:

@import url(“../equestrian/style.css”);

th {text-align: center}
ul.alert.alert-error {color: yellow;}

article table caption {
text-align: center;
text-decoration: underline;
font-size: large;
color: white;
}

.absolute-footer {
article table caption font-size: large;
th text-align: center;
}

.table-striped tbody tr:nth-child(odd) td {background-color: #1a5625;}

/* Coming Soon */
.page-id-1241 {
}

/* Invoice */
.page-id-1251 {
th text-align: left;
.absolute-footer text-align: center;
}

[Senff]

“Weather for Columbus, MS” doesn’t look white because it has opacity: 0.5; applied to it. It IS white, but with 50% opacity, it makes the text look grey. On hover it’s fine because of this:

article table caption:hover {
    filter: alpha(opacity=100);
    opacity: 1;
}

Then this one:

.absolute-footer {
    article table caption font-size: large;
    th text-align: center;
}

This is not correct. It looks like you’re missing a bracket there somewhere.

[jlbrown1]

Ok, for .absolute-footer, let me ask a different way. If I want it to be font-size: large and also underlined, what is the proper way?

[__]

.absolute-footer{
  font-size: large;
  text-decoration: underline;
}

In your example above, the words article table caption and th would seem to be misplaced —they don’t make any sense there. As Senff said, it looks like you’re missing brackets, or have copy-pasted in the wrong spot, or (possibly) are trying to use scss syntax… you’ll need to straighten all that out.

[jlbrown1]

I am just learning, so bear with me…look and this CSS then my comments below it please.

@import url(“../equestrian/style.css”);

th {text-align: center}
ul.alert.alert-error {color: yellow;}

article table caption {
text-align: center;
font-size: large;
filter: alpha(opacity=100);
opacity: 1;
}

.absolute-footer {
font-size: large;
th text-align: center;
}

.table-striped tbody tr:nth-child(odd) td {background-color: #1a5625;}

/* Coming Soon */
.page-id-1241 {
}

/* Invoice */
.page-id-1251 {
th text-align: left;
.absolute-footer text-align: center;
}

The article table caption is working now since I was put onto the track of the opacity. I could not see that from doing an Inspect element in Chrome…it was probably there, I just didn’t really know to look for it. So that part is correct.

So for .absolute-footer, yes, your code works, but it is not specific enough. What I am trying to accomplish is to only make the table caption be font large and to center the table header (Monday, Tuesday, etc.).

Your code is currently applied. Go look at the footer of http://www.saddlebackstables.net and compare it to the weather info on http://www.saddlebackstables.net/coming-soon. The goal is to make the footer on all pages look like /coming-soon. Large font on caption, centered table header row, and everything else default from theme.

I really appreciate all the help. With every post I am learning more!

[__]

The goal is to make the footer on all pages look like /coming-soon.

Well, use the styles from there as a guide. You’ll notice that there is no underline: it’s a border-bottom. Also, that weather table has an existing class name: wp_wunderground. If that’s the specific table you’re trying to style, use that to build your selector:

your article table caption could be .wp_wunderground caption;
your article table th could be .wp_wunderground th.

[jlbrown1]

Thank you! That makes a whole lot more sense. How would I have figured out the existing class name of wp_wunderground? I am still very new, so everything I had posted at the beginning of this thread was strictly figured out by inspecting elements in Google and then looking at what was applied from where…I read that is one of the best ways to see what is being applied, what is being overridden, etc.

Last question for now…here is my latest CSS. I would like to add a bottom-padding of 10px to the wp_underground caption, but only when it appears in the .absolute-footer (so it would remain unaffected in all other locations such as /coming-soon).

@import url(“../equestrian/style.css”);

/* Weather Underground */
.wp_wunderground caption {
text-align: center;
font-size: large;
filter: alpha(opacity=100);
opacity: 1;
}
.wp_wunderground th {text-align: center;}

/* Invoice */
.table-striped tbody tr:nth-child(odd) td {background-color: #1a5625;}
ul.alert.alert-error {color: yellow;}

[Senff]

I would like to add a bottom-padding of 10px to the wp_underground caption, but only when it appears in the .absolute-footer

This should do it:

.absolute-footer .wp_wunderground caption {
    padding-bottom:10px;
}

[jlbrown1]

Thank you to Senff and un-traq-ed both! This is how I ended up and it works beautifully. I appreciate the time spent schooling a noob. :-) I am not sure how to mark this as resolved either.

@import url(“../equestrian/style.css”);

/* Weather Underground */
.wp_wunderground caption {
text-align: center;
font-size: large;
filter: alpha(opacity=100);
opacity: 1;
}
.wp_wunderground th {text-align: center;}
.absolute-footer .wp_wunderground caption {
padding-bottom:15px;
}

/* Invoice */
.table-striped tbody tr:nth-child(odd) td {background-color: #1a5625;}
ul.alert.alert-error {color: yellow;}

[Senff]

Marked as solved :)

[Author]

Posts