Hueman Child Theme CSS not working

  • Resolved TouchTheCow

    (@touchthecow)


    11 years ago

    Hi there,

    Using the Hueman theme which is beautiful but I’m having one little problem. I’m using Child theme which is running fine but it won’t read my CSS changes.

    Site: https://www.touchthecow.com

    My child theme looks like:
    \\
    /*
    Theme Name: Hueman Child
    Theme URI: https://alxmedia.se/themes/hueman/
    Description: Sample child theme for customization.
    Author: Tee Schneider
    Author URI: https://www.touchthecow.com
    Template: hueman
    Version: 1.0.0
    */

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

    \\

    I am using Version: 2.1.1 of Hueman but was previously using the other version and had the same issue.

    Hoping someone can help!

Viewing 15 replies - 1 through 15 (of 22 total)

  • You have HTML in the CSS file, which will break it:
    https://touchthecow.com/wp-content/themes/hueman-child/style.css

    Remove:

    <style type="text/css">
</style>

    Thread Starter TouchTheCow

    (@touchthecow)

    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: https://alxmedia.se/themes/hueman/
    Description: Sample child theme for customization.
    Author: Tee Schneider
    Author URI: https://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 {

    Thread Starter TouchTheCow

    (@touchthecow)

    thank-you. changed the syntax. still doesn’t work.

    Thread Starter TouchTheCow

    (@touchthecow)

    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.

    Thread Starter TouchTheCow

    (@touchthecow)

    Thank-you again.

    So I’ve definitely edited the child.css. The new version looks like this:

    /*
	Theme Name: Hueman Child
	Theme URI: https://alxmedia.se/themes/hueman/
	Description: Sample child theme for customization.
	Author: Tee Schneider
	Author URI: https://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.

    Thread Starter TouchTheCow

    (@touchthecow)

    That was it! Thank-you so much.

    My pleasure. Glad to help.

    Thread Starter TouchTheCow

    (@touchthecow)

    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 ).

    Thread Starter TouchTheCow

    (@touchthecow)

    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.

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Hueman Child Theme CSS not working’ is closed to new replies.