Community Forums › Forums › Archived Forums › General Discussion › how to overwrite strong css using the child theme
- This topic has 4 replies, 2 voices, and was last updated 7 years, 2 months ago by lialia.
-
AuthorPosts
-
January 17, 2017 at 7:50 am #199544lialiaParticipant
hello,
I am using Foodie Pro with Genesis. In the child theme css file I am writingstrong { font-weight: 600; }
but when I check, the developer tools tell me that strong is inherited by this:
post-template-default single single-post single-format-standard logged-in admin-bar custom-header header-full-width content-sidebar foodie-pro customize-support(the text that I want to show bold and italic looks like this in html:
<strong><em>Text</em></strong>
)If anyone knows the answer to this, I would be really thankful ! 🙂
http://www.liaworks.com/
Lia.-January 17, 2017 at 8:05 am #199549Victor FontModeratorYou may be misreading the developer tools. Strong is defined in two places in your style.css. It is first defined at line 161 and then again at line 460. The first declaration is the one supplied out of the box, the second is yours. Your declaration overrides the out of box declaration because it is placed later in the style sheet. With CSS, the last one read is the one that wins.
There are a lot of classes added to the body tag in WordPress and Genesis that do not have associated code in style.css. Consider these helper classes that you could use to create more granular css declarations. For example, you may want an element on one page to be red, where you may want the same element on another page to be green. In that case, you can use the page_id class to further define the colors. Unless you are using inline styles or a secondary style sheet, all of your css is defined in the child theme's style.css. Strong is a stand alone tag. As such, it's value cannot be inherited from another class.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?January 17, 2017 at 9:59 am #199558lialiaParticipantHello Victor,
thanks a lot for your time and your very elaborate answer ! 🙂
I really appreciate it !So, now i know that strong is not overwritten and that it _should_ work.
At the current moment I have the idea, that there is something weird going on with Chrome.When I delete the em tag from the line
<strong><em>Text</em></strong>
then my "Text" appears bold. But when I leave the em tag between the strong tag, then the text does not appear to be bold.For testing I commented the first style in line 161.
First I figured out that I had no em tag defined (I did not know that in foodiePro dfn was used instead).
So I thought that this might be the problem and now i am writing these two styles on the very bottom of the css file:em { font-style: italic; } b, strong{ font-weight: bold; /* color: red; */ }
I used the color red temporarily to see if this b, strong tag is read:
The text appeared red, so I know this _should_ work, but in Chrome the text still does not look bold.
So I switched to Safari and everything there looks right.Do you know if Chrome has some troubles with stacked em and strong tags, or if there is something else that I am still doing wrong ?
+ Thanks again for your help, it definitively brought me into the right direction !!!
Lia,-
January 17, 2017 at 12:38 pm #199568Victor FontModeratorNot aware of any issues with Chrome. You may not be aware, but browser have their own styles for elements like em that aren't specifically defined in the theme's style.css. But it could be related to the font you're using. For most fonts, bold-italic is a different font set. Your theme may not be supporting it correctly.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?January 18, 2017 at 3:56 am #199595lialiaParticipantHello Victor,
thanks again for your reply !It seems as if PT Sans is not fully supported by Chrome, or, that there are some issues.
thanks to your suggestion I found this discussion, so it seems as if more people have the same trouble:
https://github.com/vladpopa33/googlefontdirectory/issues/43I tried adding the PT Sans Google font, but this did not work out, so I just changed to another font that works for me.
All the best + thanks for your help ! 🙂
Lia.- -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.