Edit mode all funky

Permalink
In my main page I have a logo that overlaps the top left corner. It is layered using the "z" rank so as to appear on top of the main page. It looks fantastic when viewing the site - it's formatted exactly how I like it!
But... when I click "edit page" it's a whole other story. I'm used to edit mode shifting a few things around slightly, but in this case it does not recognize the layers and just puts them next to each other, driving the header of the page over about 600px and up high.

It doesn't have to be perfectly lined up in edit mode, but this is unacceptable for my clients to have to always access their page looking like this.

Is there a way to make Edit mode even just ignore my logo div? We don't really have to see the logo when editing. Any other suggestions?

Thanks in advance!
~Kari

1 Attachment

calicomoose
 
jordanlev replied on at Permalink Reply
jordanlev
There are a few different solutions to this problem, mostly involving the output of additional style rules in your header when the user is logged in and viewing that admin toolbar. The basic code is this:
<?php
$cp = new Permissions($c);
if (is_object($cp) && ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage())): ?>
  <!-- DO STUFF WHEN EDIT BAR IS VISIBLE -->
<?php endif; ?>

If you put that in your header, then you can add <style> rules to be applied only when the toolbar is showing. You'll probably need to put !important after most of the rules to ensure they override the base styles.

So if you just wanted to hide your logo, you could do something like this:
<?php
$cp = new Permissions($c);
if (is_object($cp) && ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage())): ?>
    <style type="text/css">
        #logo { display: none !important; }
    </style>
<?php endif; ?>