Archived

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

  • 0

Box custom classes not working in child theme (LESS)


Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Do you have a link to your site? 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Martin,

 

I have atm five boxes on this page: http://www.balzaciens.com/membership-options-page/.

  • #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

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

Boxes 1 and 3 are displaying (didn't you see them with the link you asked me B) ? Screenshot : http://screencast.com/t/QsbRqCLASi) : not their customized red background (custom class: boiterouge), which is precisely the issue.

 

Settings :

CSS :

Share this post


Link to post
Share on other sites

Posted · Report post

Ok - my bad. Sorry about that. I think im with you now 
 
#page .boiterouge { 
background-color:red; 
}
 
is what your using - but it is being overwritten by this 
 
.boitebleue { 
 background-color:blue;
}
 
Try 
 
#fbox .boitebleue { 
 background-color:blue;
}

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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 ?

Share this post


Link to post
Share on other sites

Posted · Report post

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 - http://screencast.com/t/7kYJIUr9MUqV

 

#contentbox .boiterouge {
    background-colorred;
    margin-bottom0 !important;
}
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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: http://www.pagelines.com/forum/topic/24677-customizing-with-less-vs-css-with-the-child-theme-method/. 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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.




 

Share this post


Link to post
Share on other sites