7 replies to this topic

[Madi]

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.

[Madi]

Do I just create new sections?

[Rob]

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?

[Madi]

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

[Madi]

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

[Rob]

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]

So just a space between everything?

 

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

[Rob]

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