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 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: , , ,

2 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 :)

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>