WordPress.org

Ready to get started?Download WordPress

Forums

Hueman
[resolved] [closed] Hueman Child Theme CSS not working (23 posts)

  1. TouchTheCow
    Member
    Posted 5 months 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: http://www.touchthecow.com

    My child theme looks like:
    \\
    /*
    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");

    \\

    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!

  2. Alexander Agnarson
    Member
    Theme Author

    Posted 5 months ago #

    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>
  3. TouchTheCow
    Member
    Posted 5 months ago #

    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;
    }
    \

  4. DMBarber
    Member
    Posted 5 months ago #

    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 {

  5. TouchTheCow
    Member
    Posted 5 months ago #

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

  6. TouchTheCow
    Member
    Posted 5 months ago #

    but now i'm confused because wouldn't it be .p for a class selector?

  7. DMBarber
    Member
    Posted 5 months ago #

    In firebug I am still seeing your original syntax in the child theme stylesheet...

  8. DMBarber
    Member
    Posted 5 months ago #

    no, p is not a class p is the selector (or HTML element) and .featured-img-caption is the class selector

  9. DMBarber
    Member
    Posted 5 months ago #

    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.

  10. TouchTheCow
    Member
    Posted 5 months ago #

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

  11. DMBarber
    Member
    Posted 5 months ago #

    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.

  12. TouchTheCow
    Member
    Posted 5 months ago #

    That was it! Thank-you so much.

  13. DMBarber
    Member
    Posted 5 months ago #

    My pleasure. Glad to help.

  14. TouchTheCow
    Member
    Posted 5 months ago #

    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.

  15. DMBarber
    Member
    Posted 5 months ago #

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

  16. TouchTheCow
    Member
    Posted 5 months ago #

    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.

  17. DMBarber
    Member
    Posted 5 months ago #

    Yes, I see the new css in the child theme now. Good job figuring out the plugins.

    All the best!

  18. TouchTheCow
    Member
    Posted 5 months ago #

    Thanks a bunch once again.

  19. Ho Ho Minty
    Member
    Posted 5 months ago #

    Sorry to jump across into this thread, but it is relevant to my issue as well, as the above steps didn't help with it.

    It appears that even if you are using a child theme (using the default 'master' version), the CSS within its 'style.css' doesn't overwrite the 'style.css' from the main 'parent' theme, unless you keep the Custom Styling toggle OFF.

    For example, I want the styling that the Custom Styling has, but I want to remove some items, make some transparency, and use custom styling for some categories (giving a background-image to them, for example)

    Can anyone understand why this may be the case?

    I would like to give a URL to the website, but I would rather not do so if needs be, as I do not want to have it indexed and linked to this question.

  20. esmi
    Forum Moderator
    Posted 5 months ago #

    @Ho Ho Minty: It is considered impolite to interrupt another poster's ongoing thread unless you are posting a solution or suggestion. As per the Forum Welcome, please post your own topic.

  21. Ho Ho Minty
    Member
    Posted 5 months ago #

    I beg your pardon. I was only doing so in order to potentially benefit other users who may encounter the same problem, or may have issues relating to the topic here. I would not want to flood the forum with many threads of the same issue.

    I wish to extend my sincere apologies to the original poster, Touch the Cow, Alexander Agnarson, DMBarber, and you, esmi, for any offence caused. It was not my intention.

    Apologies again.

  22. TouchTheCow
    Member
    Posted 5 months ago #

    No worries Ho Ho Minty. I was actually curious about any responses out there as I'm still experiencing this problem. I got it to work once but not since. None of my custom CSS styling reads from the Child CSS. Can you explain what you mean by toggling custom styling off?

  23. TouchTheCow
    Member
    Posted 5 months ago #

    Ah yes, I think you mean the dynamic styles toggle in the version I'm using. Unfortunately, for me the child theme css is not being read whether dynamic styles is toggled or not. I really love this theme so hoping there's a resolution out there!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.