Background shift trick
Permalink 2 users found helpful
Hi, I just wanted to share this little trick I do on most of my C5 sites. If you're like me, you often will design a background and a 'container' background, but when you log in the container background will shift down and look funny. Doesn't hurt editing of course, but clients find it looks awkward. So I started putting this in my templates:
Should go just before your </head> tag. That will shift your background down the right amount when logged in.
<?php global $u; if ($u->isLoggedIn()) { ?> <style type="text/css"> <!-- body { background-position: 0px 49px; } --> </style> <?php } ?>
Should go just before your </head> tag. That will shift your background down the right amount when logged in.
This wouldn't help for Firefox, Safari, etc. but couldn't you use conditional comments to do that for IE? It's somewhat less dirty, and it validates (not sure if adding a class to the HTML tag would validate).
Thanks!
I've been doing similar things. I recently had a site (my own) that uses two fixed-position navigation bars—one at the top and the bottom. The toolbar for C5 is also fixed, so I had to change the styles accordingly so that the nav didn't get overlayed when I logged in.
This one imports an external style sheet from the theme directory. In this case I also needed it to appear if the toolbar is just visible (i.e. there's a user logged in).
I also tend to use some overrides to style the edit mode boxes and borders to match the color scheme of the site. Mostly just because I'm anal about color schemes like that.
I've been doing similar things. I recently had a site (my own) that uses two fixed-position navigation bars—one at the top and the bottom. The toolbar for C5 is also fixed, so I had to change the styles accordingly so that the nav didn't get overlayed when I logged in.
$u = new User(); // instantiates a user object for the currently logged in user if ($u->isRegistered()) { // if a user is logged in print "<link href=\"".$this->getThemePath()."/css/editmode.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\"/>"; }; global $c; if ($c->isEditMode()){ // if C5 is in edit mode print "<link href=\"".$this->getThemePath()."/css/editmode.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\"/>"; };
This one imports an external style sheet from the theme directory. In this case I also needed it to appear if the toolbar is just visible (i.e. there's a user logged in).
I also tend to use some overrides to style the edit mode boxes and borders to match the color scheme of the site. Mostly just because I'm anal about color schemes like that.
I tried this trick and I got an error:
Fatal error: Call to a member function isLoggedIn() on a non-object in /home/XXXXXX/public_html/client-area/kmpc/packages/theme_kmpc/themes/kmpc/elements/header.php on line 17
Any idea what the problem might be?
Fatal error: Call to a member function isLoggedIn() on a non-object in /home/XXXXXX/public_html/client-area/kmpc/packages/theme_kmpc/themes/kmpc/elements/header.php on line 17
Any idea what the problem might be?
I took it one step further though, because Mozilla and Safari didn't have a problem until I added your little snippet. So I used my already baked in browser-sniffer and targeted only IE.
If you're comfortable editing javaScript and you have a global JS file, you can add in this bit within your document.ready function (jQuery) that adds a browser-specific class to your html tag, therefor you can target specific browsers (it's a hack, but it's a useful one):