[solved] "container" class CSS conflict after 5.6.0 upgrade
Permalink
After upgrading from 5.5.2.1 ---> 5.6.0 in my test environment, I find my page layouts fouled up.
I traced the cause of the problem to some css rules in /updates/concrete5.6.0/concrete/css/ccm.app.css that are applying properties to a class I'm using in my theme css called "container".
I'm probably going to either add an override or go through my theme's css and rename my "container" class to some other name to resolve it. But I'd really like to know, what was the purpose was for doing that? And does this mean we can't use any classes named "container" in our themes any more?
Is there any documentation that lists what class names are off-limits in our themes - haven't found any so far.
I traced the cause of the problem to some css rules in /updates/concrete5.6.0/concrete/css/ccm.app.css that are applying properties to a class I'm using in my theme css called "container".
I'm probably going to either add an override or go through my theme's css and rename my "container" class to some other name to resolve it. But I'd really like to know, what was the purpose was for doing that? And does this mean we can't use any classes named "container" in our themes any more?
Is there any documentation that lists what class names are off-limits in our themes - haven't found any so far.
I've come across container and row that are both off limits, thats all though so far.
Confirmed: if you use any css classes, used anywhere in your theme, named "container", it will get
applied to it.
I decided, since this rule is a bit overreaching beyond it's intended purpose (I think "greedy" is the word I've seen used on the forums), to override the core. This is also much simpler and faster than renaming all references to a container class in my theme. I'm posting my fix here, in case someone else runs into this issue.
In /concrete/css/cmm.app.css, fine the following:
Note: the code is all in one line, so you won't see it formatted like this.
To override it, copy /concrete/css/cmm.app.css to /css, then edit that block to read:
width: 940px;
applied to it.
I decided, since this rule is a bit overreaching beyond it's intended purpose (I think "greedy" is the word I've seen used on the forums), to override the core. This is also much simpler and faster than renaming all references to a container class in my theme. I'm posting my fix here, in case someone else runs into this issue.
In /concrete/css/cmm.app.css, fine the following:
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width:940px }
Note: the code is all in one line, so you won't see it formatted like this.
To override it, copy /concrete/css/cmm.app.css to /css, then edit that block to read:
#ccm-dashboard-page .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width:940px }
Note: This is corrected in ver. 5.6.1.2. I ended up removing the override I created after upgrading.
