Editable area all over the place
Permalink
Hi all
I've chosen to experiment with Concrete 5 with a view to building my future sites with it. However, I've hit one problem - when I go to edit one the 'editable' blocks I've put in my own theme, the highlighted block appears about 30px below the dotted outline and then the dropdown menu appears another 30px below that! It means I can't actually select multiple things.
I've attached a screen grab as an example.
Has anyone got any idea why this is? There's nothing my CSS that seems to interfere and I've tried it on every browser going with the same results!
I've chosen to experiment with Concrete 5 with a view to building my future sites with it. However, I've hit one problem - when I go to edit one the 'editable' blocks I've put in my own theme, the highlighted block appears about 30px below the dotted outline and then the dropdown menu appears another 30px below that! It means I can't actually select multiple things.
I've attached a screen grab as an example.
Has anyone got any idea why this is? There's nothing my CSS that seems to interfere and I've tried it on every browser going with the same results!
Hi. Thanks for your reply - Firebug was a great suggestion. It actually appears to be an inline CSS style in Concrete itself. The declaration causing the problem is:
body {
margin-top: 49px !important;
}
Without this, it works fine BUT the the page content goes behind the Concrete admin bar at the top. Not the end of the world but 1) where can I find this inline style in Concrete's CSS and 2) is there a way around it?!
body {
margin-top: 49px !important;
}
Without this, it works fine BUT the the page content goes behind the Concrete admin bar at the top. Not the end of the world but 1) where can I find this inline style in Concrete's CSS and 2) is there a way around it?!
That margin in the body tag is what pushes your site down in edit mode so that the edit bar at the top doesn't cover it up.
I would keep looking in Firebug if I were you to see if there's something else. You could disable that style, but it's not the best solution. There's gotta be another style in your theme that is conflicting with the editing area body margin.
The best way to change admin CSS (IMO) is to add an overriding style in your CSS. But, you won't be able to do this if you are targeting the body tag (anything you add to the body tag would also affect the site when it is not in edit mode).
Concrete's CSS is located in /concrete/css/ Firebug can tell exactly which file the body style is in. On the right side, where it lists the styles, it shows the sources of each style.
When you change it, use the C5 override method:
http://www.concrete5.org/documentation/how-tos/developers/change-th...
This will ensure that the change you make will not be written over when it an upgrade is made. I *think* the CSS can be changed by using a C5 override, but I am not 100% sure. If this doesn't work, you can just change the file in /concrete/css.
Just had a thought... you could also target the elements on the edit page using their CSS ID's or classes and give them a margin-top: -49px. That would probably have the same effect as removing the body top margin.
I would keep looking in Firebug if I were you to see if there's something else. You could disable that style, but it's not the best solution. There's gotta be another style in your theme that is conflicting with the editing area body margin.
The best way to change admin CSS (IMO) is to add an overriding style in your CSS. But, you won't be able to do this if you are targeting the body tag (anything you add to the body tag would also affect the site when it is not in edit mode).
Concrete's CSS is located in /concrete/css/ Firebug can tell exactly which file the body style is in. On the right side, where it lists the styles, it shows the sources of each style.
When you change it, use the C5 override method:
http://www.concrete5.org/documentation/how-tos/developers/change-th...
This will ensure that the change you make will not be written over when it an upgrade is made. I *think* the CSS can be changed by using a C5 override, but I am not 100% sure. If this doesn't work, you can just change the file in /concrete/css.
Just had a thought... you could also target the elements on the edit page using their CSS ID's or classes and give them a margin-top: -49px. That would probably have the same effect as removing the body top margin.
I would do some more checking with Firebug to see if turning off any of the theme CSS helps.
I've had this same problem with some of our themes and I end up having to add some CSS that overrides the admin CSS so that it displays correctly.