Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Hero

Question

Posted · Report post

How do I set the opacity of the hero box? CSS? Better yet, how do I change it's background color? What code do I use? Also, if there seems to be extra space between the bottom of the image and the bottom of the hero, how do I narrow that more evenly?

One last question, when the site is finished, where can I post a link for you guys to tell me what I did right or wrong with it from a graphic & code standpoint?

Thank you for your time.

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

Hi,

Is this issue now resolved ?

Share this post


Link to post
Share on other sites

Posted · Report post

I was able to find the code to set opacity in the body, but I don't know what the hero section is called and how to change background color.

The code I found to set opacity for body content was #site .content, #footer .content { background: rgba(0, 0, 0, 0.5); }

Do I simply change .content to "hero" and set "background-color" as opposed to rgba opacity?

Also, opacity doesn't seem to work in IE8. What do I need to add?

Also, I set footer text color where it goes, but the "more" & "copyright" sections aren't changing. Please advise. Thank you for your help. Almost there to post a link for inspection.

Share this post


Link to post
Share on other sites

Posted · Report post

To find the hero section selector, please use Firebug or Chrome development tools. The tutorial for using Firebug to inspect the page elements for finding selectors is here: http://www.pagelines...wiki/Custom_CSS

Unfortunately, opacity doesn't work in IE8 by default, so we can't add anything more to make it work. :

I think the More and Copyright columns require custom CSS to change the color since they're a part of the Footer Columns sidebar, which is a specific section (please see the Custom CSS tutorial link above and this link: http://www.w3schools.com/cssref/pr_text_color.asp).

Share this post


Link to post
Share on other sites

Posted · Report post

Trying to know the name of the footer sidebar section without using Firebug as the site is not published yet.

#footer (color: white;} is this close?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, but please change the left paranthesis to a left curly bracket.

Share this post


Link to post
Share on other sites

Posted · Report post

"resolved"

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry. got it. Now how 'bout the hero box. I tried #hero {background: white} and everything but the box in that section turned white. How do I get the box itself to turn white - not the text.

Do I need to use .pl-hero-wrap { color: white} but what do I change?

Share this post


Link to post
Share on other sites

Posted · Report post

<<Trying to know the name of the footer sidebar section without using Firebug as the site is not published yet.>>

You can still use firebug for local testing, if you're using a localhost like MAMP.

.pl-hero-wrap { color: white} will turn the text white


.pl-hero-wrap { background: white;}

Share this post


Link to post
Share on other sites

Posted · Report post

".pl-hero-wrap { color: white} will turn the text white"

James - thank you for this. I found this info in a previous post but I was wondering how to turn the box itself (the background) white? Do I use ".pl-hero-wrap {background-color: white} or ...?

I appreciate the help. It's almost ready for inspection.... : - )

Share this post


Link to post
Share on other sites

Posted · Report post

.pl-hero-wrap { background: white} "resolved"

Share this post


Link to post
Share on other sites