Archived

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

  • 0

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


Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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);}
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Do I just create new sections?

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

So just a space between everything?

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites