Jump to content


Photo
- - - - -

Box custom classes not working in child theme (LESS)

boxes class child LESS

Best Answer Rob , 23 June 2013 - 02:07 PM

I'm sorry you're annoyed, but the answer I provided should have been understood to deal with the general placement of the code and the order in which stylesheets are loaded.  That means it affects ALL the CSS you may have placed in a child theme stylesheet versus Site Options > Custom Code. Thus there was no reason for specific replies about your boxes issue.

 

I'm glad this issue is resolved for you and hope you find better solutions.

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 19 June 2013 - 03:19 PM

Hi,

The following customization method for boxes works for me:

  • bluebox --> class added in Box Setup Options \ Boxes Custom Class
  • .mybluebox {background-color: blue;} --> CSS for that class added in Site Options \ Custom code

But when I put this styling code in my child theme style.less file, nothing happens. I tried to add PL overriding ID's and it does'nt help:

  • #site .mybluebox {background-color: blue;}
  • #page .mybluebox {background-color: blue;}

Do I miss something e.g. combining with the .fbox class in my style.less, and if so which way :huh: ?

I'm sorry to raise a subject much discussed in this forum but I'm lost!

Many many thanks in advance.



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 June 2013 - 03:23 PM

Do you have a link to your site? 



#3 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 19 June 2013 - 04:35 PM

Hi Martin,

 

I have atm five boxes on this page:

Please Login or Register to see this Hidden Content

.

  • #1 (on top) --> content box --> "boiterouge" class --> red background defined in child.less with #page ID --> not displaying
  • #2 --> standard box --> "boitebleue" class --> blue background defined in site options --> correctly displaying
  • #3 --> standard box --> "boiterouge" class --> red background defined in child.less with #page ID --> not displaying
  • #4 --> standard box --> no custom class
  • #5 --> standard box --> no custom class

Moreover / FYI:

  • content box (#1) is correctly styled with --> #contentbox {border: 2px solid coral;} --> in my style.less without any #site or #page
  • all standard boxes (#2 to #5) are correctly styled with --> .fbox {border: 1px solid coral;} --> in my style.less without any #site or #page


#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 June 2013 - 05:09 PM

Thanks Erwan 

 

So boxes 1 and 3 are not displaying? 

 

Please could you take a screenshot of the box settings page and paste in your CSS to paste.pagelines.com and provide a link and we can take a look for you. 



#5 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 19 June 2013 - 06:21 PM

Boxes 1 and 3 are displaying (didn't you see them with the link you asked me B) ? Screenshot :

Please Login or Register to see this Hidden Content

) : not their customized red background (custom class: boiterouge), which is precisely the issue.

 

Settings :

  • Page meta settings for content box 1 :

    Please Login or Register to see this Hidden Content

  • Boxsetup options for standard box 2 :

    Please Login or Register to see this Hidden Content

  • Boxsetup options for standard box 3 :

    Please Login or Register to see this Hidden Content

CSS :

  • CSS in site options :

    Please Login or Register to see this Hidden Content

  • CSS in child theme style.less :

    Please Login or Register to see this Hidden Content



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 June 2013 - 06:45 PM

Ok - my bad. Sorry about that. I think im with you now 
 

Please Login or Register to see this Hidden Content

 
is what your using - but it is being overwritten by this 
 

Please Login or Register to see this Hidden Content

 
Try 
 

Please Login or Register to see this Hidden Content



#7 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 19 June 2013 - 09:17 PM

I really dont think .boiterouge could be overwritten by .boitebleue: the classes are not affected to the same boxes: are you sure? Nonetheless, I tried what you suggested in my site options CSS :  #fbox .boitebleue {background-color:blue;} instead of .boitebleue {background-color:blue;} --> no more blue background in boxes with that class, does'nt work.

 

Hence I emptied my site options CSS, and went back to my style.less which was my purpose (see my first post).

  • I tried the #fbox ID you suggest (and the behavior of which I do not understand): no way --> for instance: #fbox .boitebleue {background-color:blue;} has no effect.
     
  • Just to understand because it's not at all what I need, I also tried to me more specific with my third box using #fbox_1678 --> no effets, but I actually don't know how to use it.
     
  • Last but not least, without any #page or #site, I tried #boxes .boiterouge {background-color: red;} and #boxes .boitebleue {background-color:blue;} and it seems to work for standard boxes!

    For content boxes, #contentbox .boiterouge {background-color: red;} works but the box is not fully colored as you can see if visiting my page; I obviously miss something there.


    I discovered these two ID's by chance but did'nt find any solid doc about them; are they a relevant solution ?


#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 June 2013 - 10:48 PM

Hi there,

 

LESS is will be more specific than the standard css box inside the pagelines admin panel. Try using the following format as this seemed to work for you contentbox,

 

#boxes .boiterouge {
    background-colorred;
}

 

The contentbox section has a gap at the end due to a margin, which is why the color isn't filling the entire space. 

 

Try adding margin-bottom: 0 to remove this. Should then look like this -

Please Login or Register to see this Hidden Content

 

#contentbox .boiterouge {
    background-colorred;
    margin-bottom0 !important;
}

  • Erwan likes this

#9 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 20 June 2013 - 10:13 AM

Hi James,

We're almost arrived :gym: !

  1. Yes of course, I know I must be more specific using "child LESS" ;) but styling in site options custom code is really not practical and even not desired IMO (except for just a few lines of code).

    [And the reason why I use "child LESS" (and not "child CSS") is that many things work with style.less and not with style.css. I opened an unsolved topic on this:

    Please Login or Register to see this Hidden Content

    . Actually, I must answer to Rob there to go further: my bad, but... Rob did'nt really provide any useful information to me and did'nt really answer to my questions; I'll try my best to explain again.]

     
  2. Thanks for the margin-bottom tip for contentboxes: works fine :)
     
  3. Finally, I don't use the #fbox ID mentioned by Martin because it doesn't work: but for my full understanding, are they supposed to be used sometimes and how?

    Same question for the very specific ID which I suppose should target a unique box i.e. #fbox_xxxx.

Thanks again to both of you.



#10 Rob

Rob

    One Smart Egg

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

Posted 21 June 2013 - 08:03 PM

Hi,

 

Sometimes, some code doesn't work correctly in child theme stylesheets for some odd reason.  Most does, but when we see this, I recommend to others that they try the code in Dashboard > PageLines > Site Options > Custom Code.  The reason it works there seems to be the order in which the CSS loads.  Custom Code seems to load better in some cases.

 

That doesn't mean that child stylesheets don't work.  It's possibly a plugin conflict which causes the order to become disrupted. But if one doesn't work, the other will, so worthwhile trying.



#11 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 23 June 2013 - 09:24 AM

All right Rob.

You must admit not being able to identify these "odd reasons" (and have no answers for instance from you all about the boxes ID's mentioned aboved) is really annoying :(

Especially when you don't want to scatter your CSS accross your site (at the risk of forgetting things, duplicate codes,...) and have a unique rock-solid & well organized child LESS file.

I clearly understand what you mean by "That doesn't mean that child stylesheets don't work (...)", but in my experience plugin conflicts are not really the main explanation (I saw child CSS or LESS not "displaying" with NO plugin activated).

Topic marked as solved though!

Best regards.




 



#12 Rob

Rob

    One Smart Egg

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

Posted 23 June 2013 - 02:07 PM   Best Answer

I'm sorry you're annoyed, but the answer I provided should have been understood to deal with the general placement of the code and the order in which stylesheets are loaded.  That means it affects ALL the CSS you may have placed in a child theme stylesheet versus Site Options > Custom Code. Thus there was no reason for specific replies about your boxes issue.

 

I'm glad this issue is resolved for you and hope you find better solutions.







Also tagged with one or more of these keywords: boxes, class, child, LESS