Jump to content
Sign in to follow this  
velneo

Different background (class texture) for two boxes

Recommended Posts

velneo    0
velneo
Hi,
 
I have two groups of BOXES on a page and I need only one has the class background "texture". How I can do?
 

 

 

 

 

 

The source are:

 

<body class="home page page-id-5846 ...
<section id="boxes" class="container clone_1 section-boxes fix"><div class="texture"> ... <section id="boxes" class="container clone_12 section-boxes fix"><div class="texture"> ...

In the stylesheet I use:

 

 

 

.page-id-5846 #boxes .texture {
    background-color: #24406F;
    border: 1px solid #00FF00;
}
.page-id-5846 #boxes .clone_12 {
    background-color: #FFF;
    border: 1px solid #00FF00;
}

 

but does not work

 

 

Thanks!, bye for now!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

I apologise but I am not quite sure what you're trying to achieve, the .texture class is a PageLines sections class and is used on all sections. Can you provide more information please.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

If the word texture is used twice - once in PageLines default coding, and once as your own custom class, when you apply CSS to it, the custom CSS you create will conflict with our existing code and cause problems throughout the site.

 

We recommend, therefor, that you use unique terms in creating classes or IDs to avoid conflicts.  In writing your class, try something unique like mytexture, then you can simply reapply the CSS as .mytexture, permanently avoiding the conflict.

 

You can also use the WP-Boxer plugin, which lets you apply a background color through settings on an individual box basis.  That's much easier than coding, and much safer than causing conflicts with the rest of your site.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
velneo    0
velneo

Thank you @Rob and @Danny.

 

I'm trying to explain my problem again.

I have two BoxSets (id="boxes"; class="container clone_1 section-boxes fix" and "container clone_12 section-boxes fix").

I want to apply new background/texture ONLY to the first one ("clone_1") BoxSet.

 

I was trying different styles like:

 

.clone_1 .section-boxes { background-color: #FFF }

.container .clone_1 .section-boxes . fix { background-color: #FFF }

 

But it doesn't works. I'm not CSS expert and I don't know where to continue testing.

 

Could you help me?. You can see it in action here http://beta.visualtrans.es/

 

Thank you so much!

David.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi David,

 

You are attempting to apply a to a particular box set, but the CSS you're using is for a clone, not a set. You must use different CSS which includes each of the box numbers in the set.  You will only be able to change the color of the boxes within the set, not the entire group.  There will be a blue background between the boxes with either of the two examples provided below.

 

For example:

.grid-element, .media_overview fbox_9715, fbox_9711 {
    margin-bottom: 12px;
    background-color: #ffffff;
}

 

You can also try using the row, but if that row is used again, elsewhere in the site, it will be white:

.pp2 {
    background-color: white;
    width: 48%;
}

The only way to group the two boxes with one background would be to replace them with a Content Box (to which you add a unique class) then use Boxer plugin or a shortcode grid within the Content Box to make your boxes.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dokether    4
dokether

The problem is that you're specifying an ID and a class for the same DIV element. This: .page-id-5846 #boxes .clone_12

 

Is saying to the browser:

 

find the class "page-id-5846". Then find the id "boxes" WITHIN the class "page-id-5846".

 

This would return two options. So then the browser says, WITHIN these two options, find the class "clone_12", but because it can't find it, the style doesn't get applied.

 

In order to target the "clone_12" you will need to change your css as follows:

.page-id-5846 #boxes .texture {
    background-color: #24406F;
    border: 1px solid #00FF00;
}
.page-id-5846 .clone_12 {
    background-color: #FFF;
    border: 1px solid #00FF00;
}

However, you may run into some conflicts with the #boxes id in the first css statement taking precedence over the .clone_12. I would revise the css to look like this:

.page-id-5846 #boxes{
    border: 1px solid #00FF00;
}
.page-id-5846 .clone_1 {
    background-color: #24406F;
}
.page-id-5846 .clone_12 {
    background-color: #FFF;
}

This way you don't bloat your css by re-declaring the border.

  • Like 2

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

@dokether -  is correct and if you follow the explanation Dokether provided this should resolve your issue.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
velneo    0
velneo

@dokether, @Danny and @RobThank you so much for the ideas!. I'm going to try...

 

 

 

bye for now!

Dani,

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.
       
       

    • claudedagenais
      By claudedagenais+
      Hi,
      Could it be possible to add to the boxes an option so that if an Item has an optional link that we can also optionally make it open in a new windows.
      Thank you :-)
×