Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #29443
    gregarding
    Guest

    how can I edit the CSS for .entry-header h1.entry-title (amongst others)?

    #29444
    arnelc
    Guest

    Hello Gregarding,

    Thanks for the question about editing CSS.  There are a few ways to edit CSS if you are using BoldGrid.  You can use the BoldGrid <a href=”

    https://www.boldgrid.com/support/using-the-customizer/how-to-use-the-custom-css-editor/

    ” target=”_blank”>Custom CSS editor</a> that is part of the Customizer.  Or you can edit the CSS files that make up the active theme that you are using.  If you know what you want to edit, you may want to start with the Customizer’s Custom CSS editor as it preserves changes even when themes are updated.

    If you have any further questions or comments, please let us know.

    Kindest regards,

    Arnel C.

    #29445
    gregarding
    Guest

    thanks for replying but the CSS options bold grid provide are severely limited and the style.CSS doesn’t have the element I’m looking to adjust (on every page as the spacing is way too much for the header to main body sections in the evolv template. It’s ridiculous).

    #29446
    christopherm
    Guest

    You may want to consider creating custom CSS classes for the elements you’re trying to target. You can easily add these inside the editor using HTML text. Or, you could consider creating a custom page templates for the themes themselves. I’m not sure what you mean by “CSS options”. BoldGrid does not place any limitation or specific options on the level of customization you require.

    #29447
    razaross
    Guest

    I’m having the same issue. I have the Primas theme and it has an H1 element with class ‘entry-title’.  It’s wayyy too big at 41px. I’ve tried adding to the Customizer custom theme css and also the style.css:

    h1.entry-title
    {
        font-size: 20px;
    }

    That didn’t work. 

    Tried adding this to the config.php:

    $boldgrid_framework_configs['customizer-options']['typography']['selectors']['h1.entry-title'] = array(
            'type' => 'subheadings', // also tried 'headings'
            'round' => 'floor',
            'amount' => .7,
        )
    

    I can see that the style is being applied, but then overridden by this:

    h1:not( .site-title ):not( .alt-font ), .h1 {
    font-size: 41px;
    text-transform: capitalize;
    font-family: Raleway;
    }

    which is an in-page style in the header…. I can’t find the source of what is injecting this style in the header. I’ve looked in the config, header and content files.

    This is the in-page style element that is being applied:

    <style id="boldgrid-custom-fonts" type="text/css">
            h1:not( .site-title ):not( .alt-font ), .h1{ font-size:41px; text-transform:capitalize; font-family:Raleway;}h2:not( .alt-font ), .h2{ font-size:28px; text-transform:capitalize; font-family:Raleway;}h3:not( .alt-font ):not( .site-description ), .h3{ font-size:28px; text-transform:capitalize; font-family:Raleway;}h4:not( .alt-font ), .h4{ font-size:20px; text-transform:capitalize; font-family:Raleway;}h5:not( .alt-font ), .h5{ font-size:16px; text-transform:capitalize; font-family:Raleway;}h6:not( .alt-font ), .h6{ font-size:14px; text-transform:capitalize; font-family:Raleway;}h1.alt-font, .h1.alt-font{ font-size:36px; text-transform:uppercase; font-family:Raleway;}h2.alt-font, .h2.alt-font{ font-size:30px; text-transform:uppercase; font-family:Raleway;}h3.alt-font, .h3.alt-font{ font-size:24px; text-transform:uppercase; font-family:Raleway;}h4.alt-font, .h4.alt-font{ font-size:18px; text-transform:uppercase; font-family:Raleway;}h5.alt-font, .h5.alt-font{ font-size:14px; text-transform:uppercase; font-family:Raleway;}h6.alt-font, .h6.alt-font{ font-size:12px; text-transform:uppercase; font-family:Raleway;}.wc-gallery .gallery-caption h2{ font-size:63px; text-transform:capitalize; font-family:Raleway;}.mod-gamma-1 h2, .entry-title{ font-size:16px; text-transform:capitalize; font-family:Raleway;}.page-template-page_home h2:not( .alt-font, .wc-gallery .gallery-caption h2 ), .page-template-page_home .h2{ font-size:22px; text-transform:capitalize; font-family:Raleway;}.p-button-primary a, .p-button-secondary a, .form-submit a, .ninja-forms-all-fields-wrap input.btn{ font-size:18px; text-transform:uppercase; font-family:Raleway;}h1.entry-title{ font-size:11px; text-transform:capitalize; font-family:Raleway;}.bg-font-family-menu { font-family: Oswald !important }.bg-font-family-body { font-family: Raleway !important }.bg-font-family-alt { font-family: Raleway !important }.bg-font-family-heading { font-family: Raleway !important }            blockquote, blockquote p, .mod-blockquote { font-size: 17.5px; }
            </style>

    Are we being forced to use !important?

    #29448
    carlosd
    Guest

    Yes, you may need to use “!important” to overwrite the CSS. Let us know if you have any additional questions.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘how can I edit the CSS for .entry-header h1.entry-title (amongst others)?’ is closed to new replies.