Site logo

[Support request] Child Theme Styles

Home Forums Support [Support request] Child Theme Styles

Home Forums Support Child Theme Styles

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2440799
    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

    #2440940
    David
    Staff
    Customer Support

    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

    #2441330
    bjbowen

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

    #2441502
    David
    Staff
    Customer Support

    Whats the admin URL ?

    #2441540
    bjbowen

    here ya go

    #2441584
    David
    Staff
    Customer Support

    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 ?

    #2442678
    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!

    #2442746
    David
    Staff
    Customer Support

    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.

    #2442796
    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!

    #2444785
    David
    Staff
    Customer Support

    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 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.