CSS frameworks mess up admin
Permalink
hi,
i am knew to C5 but have trouble to integrate common css frameworks like Foundation, Bootstrap or Gumby into C5. I usually load the framework's default styles and then override the ones i like to customize.
But in C5 the default css rules seem to conflict with the frameworks so it causes problems in the admin interface like margin offsets in edit mode, wrong buttons styles etc...
It's hard to exactly identify which rules causes which problem as some css in C5 is generated by Javascript.
But anyway i either have to change the C5 css styles or the framework's styles to make it work normal, but any change will be overrided when i update C5 and/or the framework
So know i am confused as this is not efficient to work with?
How do you deal with these problems?
i am knew to C5 but have trouble to integrate common css frameworks like Foundation, Bootstrap or Gumby into C5. I usually load the framework's default styles and then override the ones i like to customize.
But in C5 the default css rules seem to conflict with the frameworks so it causes problems in the admin interface like margin offsets in edit mode, wrong buttons styles etc...
It's hard to exactly identify which rules causes which problem as some css in C5 is generated by Javascript.
But anyway i either have to change the C5 css styles or the framework's styles to make it work normal, but any change will be overrided when i update C5 and/or the framework
So know i am confused as this is not efficient to work with?
How do you deal with these problems?
I find the best way to tackle this is to wrap your site in a div with a unique id, then in your frameworks CSS prefix it with your site wrapper, this makes it more specific and stops the c5 interface from picking up your theme styles, if your code editor of choice has a decent find and replace function it's pretty easy to prefix all your CSS.
thanks for the answer but there is at least one problem that is not solved by this...
when i switch to edit mode and hover over an area the grey overlay is still offsetted...the overlay appears under the area and not within it...
i checked the the css and it can only be caused by some reset.css rules which i cannot wrap....
i attached a screenshot...
when i switch to edit mode and hover over an area the grey overlay is still offsetted...the overlay appears under the area and not within it...
i checked the the css and it can only be caused by some reset.css rules which i cannot wrap....
i attached a screenshot...
That looks like a similar issue caused by foundation 4, there is a fix for this in the foundation 4 how to, you may be able to adapt it for your framework
http://www.concrete5.org/documentation/how-tos/developers/creating-...
http://www.concrete5.org/documentation/how-tos/developers/creating-...
thanks, that helped :)
