For quite some time now, a question has been bothering me. I've been delving deeper into CSS lately and have made the decision to avoid using jQuery in this Drupal project to stay clear of custom code.
The issue arises with a class that is applied to the BODY element called "not-logged-in" when the user is not logged in. In theory, this should work smoothly for us since only admins can log in. However, problems occur when someone is editing a node - all our custom classes are loaded in both scenarios, resulting in some editing controls appearing distorted.
The BODY style looks like this:
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1 node-type-page footer-columns" >
... [significant body content here--other divs, other classes, elements with IDs] ...
<div class='mycustomclass'>Should be bigger if logged in</div>
</body>
When attempting to add a CSS directive and style, such as:
.not-logged-in .mycustomclass {
font-size: 20px;
}
The style seems to overlook .mycustomclass. I have encountered this issue before but always brushed it off as my lack of CSS expertise. Additionally, with jQuery available, it was never a pressing concern. It would greatly help if someone could finally solve this perplexing mystery for me.