-
Posts
-
Hi. I know that style.css is the way to override parent them styling. However, it’s not clear to me how to navigate the classes and styles of the parent theme to properly style the element I desire.
Using Chrome Inspector I can see that the text I wish to style is in an element called “aav_textblock_section”.
So I was thinking in style.css I could create a style that says:
#aav_textblock_section {
border: 10px solid green ;
padding: 40px 40px;
background: rgba(0,0,0,.5)!important;
}Please see on my website: http://www.teacheasepdx.com down the page when you a photo of me and the text. I want to put a translucent shading behind the text to make the white text display better. Can you help me better understand how to accomplish this. Thank you.
Hi,
The class for that element (av_textblock_section) is used often in the theme so you should target it more directly so your rule won’t be applied on other pages where you may not want to use it. If you notice that two div above you have the class .avia-builder-el-26, that is a little better and no other .av_textblock_section on the sane page will be affected, but lets target only that page with .page-id-592, so all together it will look like this:.page-id-592 .avia-builder-el-26 .av_textblock_section { padding: 40px 40px; background: rgba(0,0,0,0.5)!important; color: #fff !important; }Note I added a white color to your text as you talked about above. Hope this helps.
Best regards,
Mike
- The topic ‘How to edit css using style.css’ is closed to new replies.