-
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,
Mike
- You must be logged in to reply to this topic.