0
Opened

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

gregarding 12 months ago updated by carlosd 11 months ago 5

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

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.

Opened

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.

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?

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