-
Posts
-
I thought this would be simple for me to figure out, but it is not.
My CSS skills are limited and when I view the code (in my browser) I can’t tell which classes I should use to format certain specific things.
On this page:
https://2p4twjkbl5.papa-view.com/I would like to have a black gradient behind the white text and also be able to format the text. I’ve tried a few CSS things which haven’t worked.
I’ve searched the forum in as many ways as i can think of, have watched youtube videos about Enfold and of course started with Enfold documentation. Enfold is a great theme, but I cannot find a way to do these simple things.
Any help or pointing me to resources would be appreciated.
Hey bbarasa,
Do you mean gradient like this:
.page-id-76 .avia-builder-el-0 .av_textblock_section p { background: linear-gradient(186deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, -0.6) 100%); }To format the text try this:
.page-id-76 .avia-builder-el-0 .av_textblock_section p { font-weight: bold; font-size: 36px; font-style: italic; }
Best regards,
MikeThanks! Yes, I think I can edit that code to do what I want and by examining the code in the live page I hope I can learn which classes to use to do this kind of thing.
I originally made relatively simple websites before CMS software became “a thing.” When I saw things moving toward WP I stopped being a web designer (maybe 10-12 years ago). But in the past few years I’ve started making some sites as a volunteer for organizations I’m involved with. In this case it’s a small business I’m helping.
So I’d like to learn the skills for the few things I’d like to use (like screening behind text) and learn which classes to use to apply that, but I have no interest in becoming a high level web designer!
In this case I can see it’s a combination of the post-entry class, the element (?) class, and the textblock class where this text is contained. I would never have been able to figure that out by trial and error.
So thank you!
Hi,
Glad that we were able to help, please note that in this code, the first class is the page:
.page-id-76
so it is only for this page.
the next class is for the first element on the page, which in this case is a column element:
.avia-builder-el-0
if you wanted to add this to multiple pages, you could add a custom class or ID to these column elements under “Developer Settings” on all of the pages.
When you add custom classes in the field you don’t need to add the “dot”, just the class name.
the third class is for the text block:
.av_textblock_section
and then the paragraph text in the text element:
p
Hopefully this will help, if it does let us know and we will close this thread.
You can always open a new thread in the future for further questions.Best regards,
MikeTonight I was messing with the Quick CSS code and something I did changed the positioning of the hero image on only one of the two pages I have them on. My brain is mush and I can’t figure out what caused this.
This is the staging site:
https://yu39su8np7.papa-view.com/
The hero there should be positioned the same way it is here:
https://yu39su8np7.papa-view.com/about/
It’s driving me nuts.
Hi,
It looks like the element has “no padding” set in the options, please check, or try this css for the page:.page-id-76 #av_section_1 { padding-top: 50px; padding-bottom: 50px; }Best regards,
MikeThanks. Your suggestion made perfect sense except that in the same layout in the About page, there WAS space above and below the text.
I guess I was too tired last night to find where the difference was. I kept looking in Quick CSS thinking I’d put something in there that I’d accidentally changed but found nothing.
It turned out what I’d accidentally changed (have no memory of doing) was that in that section setting in the home page, the padding was changed to 0 whereas in About page it was Default. All I had to do was change it to default in the home page to get them looking the same.
But I decided it does look better with 50px, and I think that’s what I did when I first set those up. So I did add that to the Quick CSS, listing both pages, even tho I could change it in the section block. Better to keep the formatting for them together.
Thanks for the help!
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Background overlay gradient behind text with background image’ is closed to new replies.