Easy way to override inherited stylesheet
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Other forums
- :
- Tech Help - Software/Hardware etc
- :
- Re: Easy way to override inherited stylesheet
Easy way to override inherited stylesheet
23-02-2017 4:51 PM - edited 23-02-2017 4:51 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
This may seem odd but using a wordpress theme I want to override the theme font styles <h1>, <h2>, etc in the Child theme CSS
Now I can do this by adding
h1{font-family: Microsoft Sans Serif, Arial, Sans-serif;font-size: 24px;font-weight: 400;font-style: normal;color: #063189;letter-spacing: 0px;margin-bottom: 10px;margin-top: 10px;}
with !important after every item but it is possible to add a single one which will give all the items the !important attribute
Re: Easy way to override inherited stylesheet
23-02-2017 5:05 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Try to avoid using !important in your stylesheet as it might cause issues when you go to override it again in the future.
You can either insert a new style after the H1 and it will override it due to the cascading nature:
h1{ /* old style is here */ } h1{ /* new style is here */ }
Or your other option is to insert an ID into the style declaration. Having an ID will take precedence over everything. If the ID is applied to the body tag than it should catch all instances of the style you want to override.
#IDOFSOMETHING h1{ }
So for example, on these forums there is an ID on the body tag called 'lia-body'. Applying this ID to an existing bit of CSS will override anything above or below it. Using an ID will also override any classes. Personally, I'd use a class instead of an ID. In the below example, the H1 will always show as red because an ID has been used and it takes priority over everything:
h1{ color: green; } #lia-body h1{ color: red; } h1{ color: blue; } .lia-board h1{ color: black; }
Frontend Web Developer | www.plus.net
If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.
Re: Easy way to override inherited stylesheet
23-02-2017 5:17 PM - edited 23-02-2017 5:19 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
I am not too concerned about future overrides in the style sheet as I would just change it
The problem is that the parent theme CSS is messy with the various attributes of the font scattered over multiple definitions and is liable to change when the theme gets updated
Would a better option be the enqueue command in the php file as suggested here https://codex.wordpress.org/Child_Themes
<?php function my_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?>
Re: Easy way to override inherited stylesheet
23-02-2017 5:23 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
I am not overly familar with wordpress as such to know what to do with that.
Do you have a stylesheet to override existing styles? If this override stylesheet is loaded after the main theme and other child themes then it is possible to simply override it by declaring the CSS by using an ID.
Frontend Web Developer | www.plus.net
If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.
Re: Easy way to override inherited stylesheet
23-02-2017 5:46 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
The ID option probably isn't too useful in this context as I need to override the whole page including header, footer and menu
That order of loading is what the enqueue php command does so I will dig further into that option
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Other forums
- :
- Tech Help - Software/Hardware etc
- :
- Re: Easy way to override inherited stylesheet