Jump to content


Photo
- - - - -

Customize Background of Specific Section (i.e. Banner, Box, Highlight)

banner background banner boxes highlight section background

Best Answer Rob , 11 February 2013 - 10:12 PM

Hi,

 

Try

.page section #banners .container .clone_2 and see if that works just a bit better.

 

{

  background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#ffffff), color-stop(50%,#f3f3f3),
color-stop(100%,#ededed), color-stop(100%,#ffffff));

  box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);}
Go to the full post


  • Please log in to reply
7 replies to this topic

#1 Madi

Madi

    Member

  • Members

  • 19 posts
  • Country: Country Flag

Posted 06 February 2013 - 10:09 PM

How do I change the background for specific banners?

 

I already know how to change the background for banners on a specific page, but now I have multiple banners on one page that I would like to customize.

 

Having a hard time finding it in the forums, so please redirect me if this topic has already been answered.



#2 Madi

Madi

    Member

  • Members

  • 19 posts
  • Country: Country Flag

Posted 06 February 2013 - 10:10 PM

Do I just create new sections?



#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 11:34 PM

Madi,

 

I'm not quite sure how one might do this unless each banner has a unique ID. They should.  When browsing the site in Firebug or Chrome's Inspection Tool, do you see any unique IDs or classes for the different banners?



#4 Madi

Madi

    Member

  • Members

  • 19 posts
  • Country: Country Flag

Posted 11 February 2013 - 01:52 PM

It's all the same id name (i.e. section id="banners"), but with different class names (i.e. class="container clone_2 section-banners fix")

 

Not sure how to include the class into what I already have, which, for banners on my homepage, is:

 

.page #banners{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(100%,#ededed), color-stop(100%,#ffffff));
box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);



#5 Madi

Madi

    Member

  • Members

  • 19 posts
  • Country: Country Flag

Posted 11 February 2013 - 02:04 PM

This works but is it good coding? -->

 

 

.page section#banners.container.clone_2, {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(100%,#ededed), color-stop(100%,#ffffff));
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);


#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 February 2013 - 10:12 PM   Best Answer

Hi,

 

Try

.page section #banners .container .clone_2 and see if that works just a bit better.

 

{

  background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#ffffff), color-stop(50%,#f3f3f3),
color-stop(100%,#ededed), color-stop(100%,#ffffff));

  box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);}

  • Madi likes this

#7 Madi

Madi

    Member

  • Members

  • 19 posts
  • Country: Country Flag

Posted 11 February 2013 - 11:35 PM

So just a space between everything?

 

I'm not a coder so I don't understand how that's more efficient. 



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 February 2013 - 02:57 AM

I'm not a coder either, and the spaces will do no harm. I have no idea if they'll fix the issue.







Also tagged with one or more of these keywords: banner background, banner, boxes, highlight, section, background