[Resolved] Child Theme Breaks Styles – Catalyst

Home Forums Support Child Theme Breaks Styles – Catalyst

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1063239
    Andriy

    Hi GeneratePress team. First of all, thank you so much for the amazing theme!

    I just got GeneratePress Premium and am struggling with something. Before making any GP customizations whatsoever, I wanted to do them in a child theme (so I can keep the main theme really up to date without disrupting any future custom code).

    However, when I added the GP blank child theme, the styling on my Catalyst demo site got messed up. Here’s my site with the child theme: http://bit.ly/2NQxuBf

    Compare that to the demo site at https://gpsites.co/catalyst/ which is exactly how my site looked before the child theme – notice the headline, sub-headline, and main CTA button suddenly look quite different; also the ‘full width CTA row’ area further down and probably even more stuff …

    Here’s what I did so far, correct me if there’s something wrong here?
    * installed GP then GP Premium (both latest beta versions)
    * imported Catalyst demo site and content
    * installed child theme ZIP linked here: https://docs.generatepress.com/article/using-child-theme/
    * there’s no extra CSS yet in the parent GP theme’s Customizer; or anything custom in GP child theme’s style.css or functions.php
    * also cleared my site caches and restarted PHP with Kinsta where I’m hosting the site; and cleared my browser cache / used incognito to make sure these problems aren’t due to caching

    #1063281
    Leo
    Staff
    Customer Support

    Hi there,

    Are you sure you haven’t modified the CSS in the Additional CSS field in the customizer?

    The CSS in your site isn’t the same as the default CSS for Catalyst.

    For example, here is the default CSS for the page hero button:
    https://www.screencast.com/t/lIIpM9WGQ6D

    And for your site, looks like the CSS has been modified:
    https://www.screencast.com/t/WhUz7h1i

    Same thing for the Call to Action title:
    https://www.screencast.com/t/1N0oNRwmkGE

    That CSS is missing in your install:
    https://www.screencast.com/t/rIw7yePOA

    #1063287
    Andriy

    Hi Leo, thanks for following up 🙂

    Your screencasts are exactly the point I’m trying to make! My parent GP theme had nothing custom in additional CSS in Customizer. Then when I installed the child theme suggested by GP (link below), suddenly those styles changed on the page in the ways you’re pointing out.

    Not sure how that happened. Is there something wrong with this child theme that’s changing the styles by any chance? http://generatepress.com/api/themes/generatepress_child.zip (from article https://docs.generatepress.com/article/using-child-theme/ )

    #1063289
    Andriy

    Here’s what my parent theme Customizer looks like – https://i.imgur.com/gBsGJSV.png

    Here's what my parent theme Customizer looks like

    And here’s the Child theme Customizer – not sure why the stuff in here is different (should there even be anything here in the first place, for a blank child theme?). https://i.imgur.com/CqPiYa9.png

    Child theme Customizer

    #1063290
    Andriy

    Just to update, I cleared out all the code in the Child theme Additional CSS and replaced it with the code in the Parent theme Additional CSS and that seems to have fixed it. It might be good to mention this in child theme instructions, I had no idea the child theme came with its own (different!) custom CSS, I thought it would use the parent theme’s.

    #1063298
    Leo
    Staff
    Customer Support

    Glad you got it sorted.

    The child theme definitely doesn’t come with any default CSS – otherwise our support forum would be flooded with this complain already.

    Let me know if you notice other issues 🙂

    #1063307
    Andriy

    Hmm that’s strange – check out the second screenshot above. I didn’t add any of that CSS in, I just installed and activated the child theme …

    #1063316
    Leo
    Staff
    Customer Support

    Looks like the Additional CSS in the child theme just inherit the content from the parent theme.

    If you want to use a child theme with a site library template, try copying and pasting the original CSS into the style.css file of your child theme which should be empty by default.

    #1063334
    Andriy

    Thanks for that, I appreciate your help with this.

    #1063335
    Leo
    Staff
    Customer Support
    #1157401
    Rozenn

    Hi,

    Just to let you know, I had the same problem when I made a child theme for Catalyst. This topic helped me find unexpected CSS in WP additionnal CSS. No idea how it was generated because it has nothing to do with what I wanted to do. It explains a lot though, like why the logo was broken (changing width would not change the height, it looked awful), why the ghost button became blue, etc. Deleting this additionnal CSS helped me get my design back.

    Here is the CSS I found and deleted:

    /* logo height */
    .header-image {
    height: 40px;
    }

    /* center nav */
    .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
    text-align: center;
    }

    /* menu letter spacing */
    .main-navigation a, .menu-toggle {
    letter-spacing: 0.5px;
    }

    h1 {
    letter-spacing: 1px;
    line-height:1.2;
    }

    h2, h3 {
    line-height:1.2;
    }

    .topbar-text {
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 2px;
    margin: 5px 10px 5px 10px;
    }

    .button.ghost,
    .button.ghost:visited {
    background: transparent;
    color: #124C75;
    border: 3px solid #124C75;
    font-size: 18px;
    margin: 5px 10px 5px 10px;
    padding: 6px 10px;
    transition: all 400ms linear;
    }

    .button.ghost:hover,
    .button.ghost:active {
    background: transparent;
    color: #124C75;
    border: 3px solid #ffffff;
    transition: all 400ms linear;
    }

    .nf-form-fields-required {
    padding-bottom:10px;
    color: #665862 !important;
    }

    .ninja-forms-req-symbol, .nf-error-msg {
    color: #665862 !important;
    font-size: 13px !important;
    }

    .nf-form-content .nf-field-container #nf-field-9-wrap .nf-field-element .ninja-forms-field {
    height: 100px !important;
    }

    .nf-form-fields-required {
    display: none;
    }

    .label-above .nf-field-label {
    margin-bottom: 5px !important;
    }

    .nf-field-container, #ninja_forms_required_items {
    margin-bottom: 15px !important;
    }

    #1158112
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.