Jump to content


Photo
- - - - -

Different background (class texture) for two boxes

boxes background

Best Answer dokether , 18 May 2013 - 04:26 PM

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.

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 velneo

velneo

    Member

  • Members
  • 26 posts
  • Framework Version:Pagelines Framework 2.4.4
  • Country: Country Flag

Posted 15 May 2013 - 10:58 AM

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:

 

Please Login or Register to see this Hidden Content

In the stylesheet I use:

 

 

 

Please Login or Register to see this Hidden Content

 

but does not work

 

 

Thanks!, bye for now!



#2 Danny

Danny

    Is Awesome!

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

Posted 15 May 2013 - 11:14 AM

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.


  • velneo likes this

#3 velneo

velneo

    Member

  • Members
  • 26 posts
  • Framework Version:Pagelines Framework 2.4.4
  • Country: Country Flag

Posted 15 May 2013 - 11:25 AM

No, I only need to appear on a page name HOME (home ID page-id-5846).

 

That page HOME has two groups BOXES, and I want one of the groups I have the blue background and the other white background.

 

 

 

You can see this screen:

 

Please Login or Register to see this Hidden Content



#4 Rob

Rob

    One Smart Egg

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

Posted 15 May 2013 - 02:33 PM

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.


  • velneo likes this

#5 velneo

velneo

    Member

  • Members
  • 26 posts
  • Framework Version:Pagelines Framework 2.4.4
  • Country: Country Flag

Posted 17 May 2013 - 12:34 PM

Thank you @

Please Login or Register to see this Hidden Content

and @

Please Login or Register to see this Hidden Content

.

 

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

Please Login or Register to see this Hidden Content

 

Thank you so much!

David.



#6 Rob

Rob

    One Smart Egg

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

Posted 17 May 2013 - 02:00 PM

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:

Please Login or Register to see this Hidden Content

 

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

Please Login or Register to see this Hidden Content

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.


  • velneo likes this

#7 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 18 May 2013 - 04:26 PM   Best Answer

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:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

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


  • James B and velneo like this

#8 Danny

Danny

    Is Awesome!

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

Posted 19 May 2013 - 11:18 AM

@

Please Login or Register to see this Hidden Content

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


  • velneo likes this

#9 velneo

velneo

    Member

  • Members
  • 26 posts
  • Framework Version:Pagelines Framework 2.4.4
  • Country: Country Flag

Posted 21 May 2013 - 03:05 PM

@

Please Login or Register to see this Hidden Content

, @

Please Login or Register to see this Hidden Content

and @

Please Login or Register to see this Hidden Content

Thank you so much for the ideas!. I'm going to try...

 

 

 

bye for now!

Dani,







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