Jump to content
Erwan

Box custom classes not working in child theme (LESS)

Recommended Posts

Erwan    37
Erwan

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
greenfly    230
greenfly

Do you have a link to your site? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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
greenfly    230
greenfly
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;
}

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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
James B    436
James B

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;
}
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

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


  • Similar Content

    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • 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

    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, could you let me know where the custom less/css is saved to - i.e. how I could access it directly via the server.
      I hid the Admin Bar by mistake and now can't save any changes to the Custom CSS as the Save Button is not available - so I need to find another way to access and edit the custom CSS.
      Thanks in advance
×