You have HTML in the CSS file, which will break it:
http://touchthecow.com/wp-content/themes/hueman-child/style.css
Remove:
<style type="text/css">
</style>
Ok so I did that and I also removed all of the css except for one item just for testing so now it looks like this and it’s still not reading it. I’m missing something…
\
/*
Theme Name: Hueman Child
Theme URI: http://alxmedia.se/themes/hueman/
Description: Sample child theme for customization.
Author: Tee Schneider
Author URI: http://www.touchthecow.com
Template: hueman
Version: 1.0.0
*/
@import url(“../hueman/style.css”);
/* ————————————————————————- *
* Theme customization starts here
/* ————————————————————————- */
.p featured-img-caption {
font-size: 9px;
text-align: right;
}
\
The beginning and ending \ in your above post is confusing and unnecessary. Just highlight your text that you want to designate and click the ‘code’ button above.
Your selector syntax is erroneous. It should be:
p.featured-img-caption {
thank-you. changed the syntax. still doesn’t work.
but now i’m confused because wouldn’t it be .p for a class selector?
In firebug I am still seeing your original syntax in the child theme stylesheet…
no, p is not a class p is the selector (or HTML element) and .featured-img-caption is the class selector
For reference all css uses a selector to target styling. HTML elements never start with . or # these are only used for id and class of the element you want to style. Example:
html, body, h1, h2, h3, p, nav, div, article, img <– HTML elements in CSS would target and style ALL elements:
<html>
<body>
<h1>
<p>
<div>
.leftAlign, #topDiv, .justifyText <– CSS class and id selectors used to seperate the elements by specifics. Example:
<p class=”leftAlign”>
<div id=”topDiv”>
can now be targeted SPECIFICALLY in your stylesheet as so:
p.leftAlign
div#topDiv (or just #topDiv is that is necessary to target an element with an id)
#topDiv { width: 100%; }
p.justifyText { text-align: justify }
will style only specific elements.
Hope that helps.
Thank-you again.
So I’ve definitely edited the child.css. The new version looks like this:
/*
Theme Name: Hueman Child
Theme URI: http://alxmedia.se/themes/hueman/
Description: Sample child theme for customization.
Author: Tee Schneider
Author URI: http://www.touchthecow.com
Template: hueman
Version: 1.0.0
*/
@import url("../hueman/style.css");
/* ------------------------------------------------------------------------- *
* Theme customization starts here
/* ------------------------------------------------------------------------- */
p.featured-img-caption {
font-size: 9px;
text-align: right;
}
So it brings me back to my original issue which is that the child style.css doesn’t seem to be being read…
Your child theme CSS is definitely there. I can see it using Firebug. However, your stylesheet has not changed since your original posting. Are you using a cache plugin? If so, try disabling it.
That was it! Thank-you so much.
My pleasure. Glad to help.
Looks like I lied. That one change got through but I can’t get subsequent ones to save. Have left caching plugin disabled but no luck.
Are you making your changes to your live site or a localhost site on your computer? Your child theme stylesheet is still identical to your original post when viewed using Firebug (and by that I mean the only selector is still .p featured-img-caption ).
As it turns out, the issue was a combination of W3 Total Cache and Remove Query Strings from Static Resources. I have been using both because for some reason W3 wouldnt save the changes when I cleared the Query Strings. Maybe I should just learn to make the optimizations manually.
I think what you saw was just me screwing around with different versions trying to make it work. All the CSS is now working on the site but of course, neither plugin is activated.