[Support request] Child Theme Styles

[bjbowen]

Hey… Child theme styles in the admin – specifically “Elements” isn’t working. Works on pages.

Go to the homepage, scroll down to the footer. Public view of footer shows blue background, smaller font size, tighter columns.
Admin view shows dark gray background, larger fonts, wider columns.

If this is a caching issue, I’ll spit. haha

[David]

Hi there,

you can use this PHP snippet to load your child theme styles on the editor:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'styles.css';

    return $editor_styles;
} );

Make sure the styles.css is the correct name of your stylesheet

[bjbowen]

Hey David,
I have that snippet in my functions.php file.

[David]

Whats the admin URL ?

[bjbowen]

here ya go

[David]

Ok, so you’re going hit a wall here.

One issue is – certain classes are added by the Theme on the front end. Like .site-footer
So this:

.site-footer .hours-container {
    background:blue;
}

Won’t work in the backend. It would need to be something like this:

.hours-container {
    background:blue;
}

But why use a Child Theme style to set a static background color for that block element ? When it can be set in the editor ?

[bjbowen]

Hi David,

I set the background color as a test to see if anything was going to show in the editor.

The main thing I want to set is the <p> tag on the top line of text for the business info. I want to designate a class for that top line so that it’s a different color. I want all of the <p> in the footer to be a smaller font size than the default <p> size.

When I couldn’t get that to work, I changed the background color as a test. So, lets focus on how I can designate a different font size without having to copy/paste each paragraph, or setting the font on each paragraph.

I’ll try

.hours-container p {
font-size:14px;
color: white;
}
I’ll let you know if that solves the problem.

Thank you!

[David]

Ok, as a general rule, i would set those styles in the GP element.

If you select a GB Container Block, it has its own Typography styles that you can set, and text elements within will inherit those styles.

And the GB Headline Block has its own styles, that will override any inherited style.

So you could use Container Block styles to cascade to its content, and use Headline block styles when you want to override those.

[bjbowen]

Hey there… not sure how that’s faster than writing a small bit of CSS for the container that’s only applied to the footer.

Also, when it comes time for revisions, it’s definitely faster to make one global change than to have to select and change each individual text block.

Maybe I’m missing something.

When it comes to general, site-wide styles, I do exactly what you’ve suggested. But in the past, I’ve had a client ask me to change something simple and I had to go select and change everything manually which really bummed me out. I’m trying to make sure that doesn’t ever happen again.

So, when it comes to this, if the client says, they want a different color or font-size for the footer, I’d like to make that change as quickly as possible and I’m just not seeing how to do that in Generate Press, Generate Blocks — in a way that isn’t more complicated than just writing the CSS.

Thanks David!

[David]

If the Child Theme style methodm works for you, then stick with it as there is no faster way either to make style changes than editing some CSS 🙂

[Author]

Posts