-
Posts
-
I have searched the forum and was unable to find an answer to my color section question.
I have created a color section on one page of a website I am creating. Then on top I added 2/3 and 1/3 layout elements and then inserted text to the 2/3 layout.
Even though The Main content background set in the Theme Styling is #f8f8f8, the background colour of the 2/3 text div seems to be transparent, so the text sits directly on the image without the div background. Here is a link to the page that I’m talking about
http://youthreach.com.au/wp/programs/self-development/
Any suggestions on how I can make the background under the text to be #f8f8f8.
Many thanks
Hi
The text block by itself doesn’t have an actual background so you need to add it in manually with css. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
#top.page-id-2429 #av_section_1 .avia_textblock {
background: #fff;
}What this will do is target that specific page by its ID (2429) and then the color sections’ textblock inside of it.
Regards,
Devin
Hi Devin
That worked! Yay. I really appreciate your response. Just a couple of questions please.
What would I need to add to have a bit of a margin/padding on the left and right of the text.
Also what if I wanted it to apply it to all the pages.
Thanks very much.
Ivana
Try this one:
#top .page-id-2429 #av_section_1 .avia_textblock {
background: rgba(55,55,55,0.6);
padding: 5px 10px;
color: #fff;
border-radius: 4px;
}
Just to show you the difference between #color and rgba(). ;)
If you like to apply it to all pages, try this selector: .page .avia_textblock
Awesome! Thank you formateins. The rgba didn’t seem to work, but the padding and border-radius did. Double yay!!!
I appreciate your help.
Ivana
The rgba value syntax seems to be correct. Try to change the color value (this converter will help you: http://hex2rgba.devoth.com/ ) or try to add a !important tag to it:
#top .page-id-2429 #av_section_1 .avia_textblock {
background: rgba(55,55,55,0.6) !important;
}One more question, if I may … if I want to make the text box a little transparent, how would I do that?
I really appreciate your help … it’s hard for this old dog to learn new tricks :)
Cheers
RGBA (and HSL) color definitions won’t make it in IE and Opera. You should have a look at progressive enhancements to get things going. To get it straight: IE likes to have it’s very own solution for this.
#top .page-id-2429 #av_section_1 .avia_textblock {
background: rgba(55,55,55,0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FF0080,endColorstr=#99FF0080);
zoom:1;
padding: 5px 10px;
color: #fff;
border-radius: 4px;
}
The Microsoft gradient takes a start and end color. If you look a lil bit closer to the hex value, you’ll notice the two additional digits in front. This is the alpha channel to have it transparent. So if you define 0.6 in RGBA, the digits should be 60. Additionally, the zoom:1 prevents crappy font rendering (somehow).
I really appreciate your response formateins. What you have mentioned is a little beyond my technical knowledge at the moment, but I will give it a go and see how it looks on the website.
It may look a little daunting but if you break it down its pretty straightforward. The initial background gets set with the rgba value (a=transparency amount). Then the filter fixes it for IE.
Try and take it one line at a time and save during each change.
Regards,
Devin
I have been using this code for my text blocks and it has been great. Now I also need to make the Contact form’s background white on pages that have a photo background. Would you be able to please provide me with code for that.
Thanks so much.
Hey,
Can you please give us a link to the page with the Contact form? A screenshot or mock-up of what you’re trying to do will help. :)
Regards,
Ismael
Yes of course. Here is the page.
http://www.ceremonieswithstyle.com.au/wp/contact/
What I am trying to achieve is to have the same kind of background under the contact form as I do on the left handside under the text box.
Many thanks
Ivana
Hi Ivana,
Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
#top.page-id-481 .ajax_form.avia-builder-el-4 {
background: rgba(255, 255, 255, 0.9);
padding: 10px;
}And adjust as needed.
Regards,
Devin
- The topic ‘Color Section’ is closed to new replies.