How to adjust your Concrete5 theme while the edit bar is visible

CMS, Web Development, Work

A lot of people have the problem that when you are logged into the Concrete5 backend, the edit bar can move things around in your design. Here is an easy way to add a specific class to your <body> tag so you can adjust positions of anything on the page while the edit bar is visible.

Replace your body tag in your Concrete5 theme’s header.php with the following:

<body <?php global $cp; echo ($cp->canWrite()) ? 'class="c5-edit-mode"' : ''; ?> >

When you are logged into the dashboard and viewing pages though the sitemap, your body tag will look like this:

<body class="c5-edit-mode">

Now you can adjust your CSS, able to single out any classes or IDs.

Here is a section from my stylesheet:

body {

margin: 0;
padding: 0;
color: #4d4d4d;
font: 12px/13px Arial, Helvetica, sans-serif;
background: #000000 url(images/bg.jpg) top center no-repeat;
}


/* Move our background down by 48 pixels while the edit bar is visible */
body.c5-edit-mode {
background-position: center 48px;
}

Tags: , , ,

8 Comments

  1. Was curious how to do this. You sir/madame have just made my day.

    Cheers.

  2. Bah! I guess that’s sir… never know with these blogs. Thanks again :)

  3. karthik says:

    Its not working for me. Its showing the following error

    Fatal error: Call to a member function canWrite() on a non-object in E:\xampp\htdocs\concrete\facts\concrete\themes\default\elements\header.php on line 14

  4. jack says:

    I get this error: Parse error: syntax error, unexpected $end in root/public_html/test/themes/stylized/elements/header.php on line 14

  5. Josh says:

    I was getting a Fatal error with this trick as well…but replacing with the following will work:

    <body isEditMode()) { ?>class=”c5-edit-mode”>

  6. defunct says:

    @Josh $c->isEditmode() is only for when you are actually EDITING the page, not just when the top bar is visible.

    Not sure why you guys are getting errors, but canEdit() still works just fine for me.

  7. defunct says:

    I just noticed that you guys probably didn’t declare the $cp as a global. I adjusted the code above, it should work now.

  8. Brian says:

    Fixed several problems while in edit mode using this trick. Thank you!

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>