Properly Scope Theme Styles with .ccm-page
Now that we can dynamically generate our
style.css file from SASS, we have an easy way of fixing some theme scoping issues. For example, try dragging some of the icons around in edit mode. Notice how they lag strangely (a behavior not seen on other concrete5 sites.) I strongly suspect styles like this in our theme are to blame:
These are greedy styles -- they’re adding a transition to all links, which is bleeding through to the
<a> tag found inside the core concrete5 panels.
How do we combat this? With SASS, it’s easy. We know that
div.ccm-page wraps the entire content of the website, because its one of the classes that is output by the
<?=$c->getPageWrapperClass()?> call that we added to our header. If we can make this link class apply just to
<a> tags inside this class, our theme’s behavior should be unchanged, but the concrete5 editing interface won’t be affected by it. With SASS, that’s as easy as opening
style.scss and modifying the inclusion of the
_common.scss to be wrapped by
_common.scss. First, we see some
<body> tag styles:
Let’s modify those so that the padding and margin apply to body, but the other styles apply to
Next, let’s take all the rest of the styles, including our problematic links style, and put them inside the
Rebuild our styles, and our problem is fixed!