Jump to content


Photo
Resolved

Hero



  • Please log in to reply
12 replies to this topic

#1 iems

iems

    Advanced Member

  • Members
  • PipPipPip
  • 58 posts
  • Country: Country Flag

Posted 26 October 2012 - 01:19 PM

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.

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 02:19 PM

To set the opacity, please use Custom CSS: http://www.pagelines...wiki/Custom_CSS

You'll also need to use the opacity attribute provided here: http://stackoverflow...ut-not-the-text

When you're finished with your site, you can post the link here in the forum.

#3 iems

iems

    Advanced Member

  • Members
  • PipPipPip
  • 58 posts
  • Country: Country Flag

Posted 26 October 2012 - 02:33 PM

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.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 02:44 PM

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..._text_color.asp).

#5 iems

iems

    Advanced Member

  • Members
  • PipPipPip
  • 58 posts
  • Country: Country Flag

Posted 26 October 2012 - 02:56 PM

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?

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 October 2012 - 03:01 PM

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

#7 iems

iems

    Advanced Member

  • Members
  • PipPipPip
  • 58 posts
  • Country: Country Flag

Posted 26 October 2012 - 11:08 PM

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?

#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 October 2012 - 04:08 AM

<<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;}


#9 iems

iems

    Advanced Member

  • Members
  • PipPipPip
  • 58 posts
  • Country: Country Flag

Posted 27 October 2012 - 01:23 PM

".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.... : - )

#10 iems

iems

    Advanced Member

  • Members
  • PipPipPip
  • 58 posts
  • Country: Country Flag

Posted 27 October 2012 - 02:24 PM

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

#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 October 2012 - 10:10 AM

Hi,

Is this issue now resolved ?

#12 iems

iems

    Advanced Member

  • Members
  • PipPipPip
  • 58 posts
  • Country: Country Flag

Posted 28 October 2012 - 01:01 PM

"resolved"

#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 October 2012 - 01:24 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved