Child Theme Breaks Styles - Catalyst

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

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

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

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

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.

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

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

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.

Thanks for that, I appreciate your help with this.

No problem :)

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

Thanks for sharing!