Inserting a line of text over a background image

Hi Joshue,

How do I give the Color Section a unique ID, and once I do, how/where do I include the ID in the Quick CSS code above?

Thanks,

Yes, I saw this field, ‘For Developers: Section ID’, but I don’t know what to put in it? Suppose I put in “1”, do I need to put a corresponding “1” in the Quick CSS code as well?

Thanks

I typed the word uniquecolorsection into the field ‘For Developers: Section ID’ — and I copy/pasted the code below into the Quick CSS box under Theme Options / General Styling / Quick CSS, but nothing happens. What do I do next?

#top .av_header_transparency .header_bg {
background: rgba(0,0,0,0.5);
}

#uniquecolorsection{
position: relative;
}
#uniquecolorsection:after{
content: "Text here";
position: absolute;
bottom: 0;
right: 0;
background: black;
color: white;
display: block;
padding: 10px;
}

I am sorry that I do not know what you mean by “post a link to the Page where you have this color section. This color section is on the page I have labeled “Home”. Do I go into the Home page and click on edit, and then how do I post a link? Thank you.

The development website page is http://picomarkets.wpengine.com/?page_id=28. (hosted on WPengine) Is this what you wanted me to post?

Okay. I am now getting the “Text here” black box with white font at the far right bottom of the page, just above the fold. I wanted to know how I can set the background of this bar from black to a translucent that is slightly darker than completely clear translucent. And, I wanted to know how I could put the “Analytics and Insights (plus text below the label) Icon Box into this bar that is just above the fold, but have the background, as I indicated, in a slightly darker translucent color so that the background image shows through. Thank you!

I am not sure how to use a layer slider. As an alternative, I could go with just simple text. Could I change the black bar to a slightly darker translucent bar so the background image still shows through?

Thanks Joshue. It is getting very close to final thanks to your help. The translucent bar at the bottom of the page looks great except that it is stopping before the end of the page on the right. How can I make this bar go from edge-to-edge? Also, I wanted to bold the “ANALYTICS AND INSIGHTS” and possibly increase the font size of “ANALYTICS AND INSIGHTS” but likely keep the same font for the text that follows.

I also want to have a matching translucent bar from edge to edge under the main menu bar. I think I need to adjust the first part of the code, which I have copy/pasted below, showing what I have so far:

#top .av_header_transparency .header_bg {
background: rgba(0,0,0,0.5);
}

#uniquecolorsection{
position: relative;
}
#uniquecolorsection:after{
content: “ANALYTICS AND INSIGHTS: We offer a management consulting perspective on real estate to help individual homeowners and homebuyers make better decisions. Please take a moment to view our short videos below. “;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
color: black;
display: block;
padding: 20px;
}

The page can be found at http://picomarkets.wpengine.com/?page_id=28 (hosted on WPengine)

Thank you.

Hi Joshue,

I think I like the bar at the bottom only, so I won’t change the upper bar as I thought I might. Thank you for all your help.

I do have a different question, and that is the blog section right below the main image on the home page appears to have the icons cut off. How do I fix this?

Thanks again.

Hi Josue,

How do I increase the font size of the text below (“ANALYTICS & …”) and insert a line break midway through the text so that it wraps around to a second line where I want the break? Here is the Quick CSS code:

#uniquecolorsection{
position: relative;
}
#uniquecolorsection:after{
content: “ANALYTICS & INSIGHTS: We offer a management consulting perspective on residential real estate to help individual homeowners and homebuyers make better decisions. Please take a moment to view our short videos below. “;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.15);
color: #404040;
display: block;
padding: 32px;
width: 100%;
font-weight: bold;
}

Thanks,
Albert

Hi Josue,

I am okay with a larger font for the entire line of text. How do I increase the font for the entire line of text?
Thanks

Hi Josue,

I would like to use the sticky header feature; however, when I use it, it adds a black bar to the background of the menu bar. How can I change the black bar to transparent (or slightly opaque (e.g., 0.15 opacity)? Also, when I click on the sticky header feature box, the added bar shifts the text bar at the bottom of the image to go below the fold instead of above it?

Can you help me make these adjustments?
Thanks