Avoiding design conflicts with the admin toolbars
  • The admin menus in LightCMS are added dynamically as inline elements that flow with the rest of the page's content, usually "pushing" other content down in order to make room. Often designers who choose to create layouts with an absolutely positioned structure will run into issues because the layout cannot adapt to the changing content. Furthermore, the drop-down menus in the admin view use a variant of the Suckerfish method which requires some positioning via CSS.

    Because the menus are inline with the rest of the page, they are subject to any CSS rules that might be in effect on that page and potentially their appearance/behavior can be modified unintentionally. I would recommend that anyone looking to explore these issues becomes familiar with the /Styles/water.css that is added to every page and avoid overriding the CSS rules in that document. To view the water.css stylesheet you will need an add-on for Firefox such as the Web Developer toolbar. It is also helpful to avoid re-using the same class names.
  • 9 Comments sorted by
  • Absolutely, I agree with what Chad has said.

    I have also found it helpful that, instead of applying something to an entire div, especially when it comes to styling regions that are specifically lists (calendars, blog lists, etc.) to target the div.element within the div in question. This completely bypasses the suckerfish menu that wraps the region, and allows you to style without worry of interfering with anything.

    Another big thing is background colors. If links call for changing background colors be very careful about how you target (the method above works wonders) because otherwise administration menus are prone to picking up those background changes.

    That's all I can think of for now. I'm sure I'll be back!
  • I ran into this problem, I had a logo with a class .logo and that conflicted with I guess the admin logo. It made the admin toolbar go almost half way down the page. It was simple to fix once I knew what was wrong, but it was still kinda pain.

    I love how they named the stylesheet water.css haha that made me laugh.
  • When we first started using Light, we too ran into a couple of problems with CSS conflict. But with the amazing help of the Light support team, we were able to quickly resolve the problem.

    We ended up changing our "class" values to fix the problem. When all was said and done, we began using a new and improved structure for our class values. So in the end, what was once a problem became a benefit to our company.
  • The development team has discussed in the past the idea of completely obfuscating the CSS classes that apply to the admin toolbars and element action menus. You know, classes like "adfwerx" so that it would be very unlikely to ever conflict with classes in customer's own template stylesheets. That wouldn't solve issues with user styles cascading into the admin styles (which seems more common to me) but it might help alleviate some confusion.

    What do you guys think?
  • I like that idea JasonZ. Like you said, I don't find myself conflicting to often from a class name perspective, but from a support standpoint I can definitely see the benefits.

    Maybe not arbitrary classes, but something more specific like "waterLogo."
  • Thanks again for bringing this issue to my attention. I wasn't aware that I might run into problems like this when I start trying to implement custom styles. I like JasonZ's suggestion of using obscure classes for the admin elements.
  • I'm running into this issue, and I'm at a loss as to how to proceed. I've spent hours styling my site, and I don't want to go back and restyle everything, but I might have to.

    Doesn't the Water.css file load last and only use very specific elements based on classes? It seems like that should alleviate the issue, with the exception of "!important" styles. But I'm getting a lot of conflicts.

    I also like the idea of the classes all being prepended with something like "water" so that you know you can't accidentally use one of their classes.

    Is there a "Best Practices" document somewhere that I can reference as I try to fix this?
  • One of my element menus goes 'behind' a div so I can't click add or cancel links. How do I get around this? Thanks in advance.
  • @blairrorani can you give a link the site you are having a problem on?

Howdy, Stranger!

Login with Facebook

In this Discussion

Copyright © 2014 LightCMS® Content Management System LightCMS is a product of NetSuite