Beginning In v2.4, certain auto-generated CSS classes that control the layout of the sample Percussion templates were moved from the default Percussion CSS file (perc_theme.css) to a system CSS file (perc_decoration.css).
These classes were designed to give the default Percussion templates shape in the absence of content. For example, if we select the “box” template, we see that the regions automatically adhere to a set of fixed dimensions.
Using Firebug, if we inspect one of these regions, we can see the classes acting upon it. In this example, we’re inspecting the region named “container”. Notice the class hspan_12 is setting the width of this region to 960px. This class is automatically attached to the region and cannot be removed:
Previous to v2.4, these classes only affected the layout of templates that utilized the Percussion theme, or copies of that theme. An unintended consequence of moving these classes to a system CSS file is that they can now affect templates using any theme. For example, here is a screenshot of the BrightVoyage.org layout before the CSS change:
Notice the layout is centered within the screen. Now let’s look at the same layout after the change, notice the layout has changed dramatically, and is now justified left:
Inspecting this page, we can see that width assigned to hspan_12 is now acting upon the outer region of our template:
Here is the easiest way to work-around this issue to ensure your layout is not affected by this change:
- Copy these classes from the perc_decoration.css file located in cmroot\web_resources\cm\css\perc_decorations.css file or the example below.
- Paste these classes into your main CSS file and set the following classes’ width attributes to “auto”, and adding the !important declaration.
As in this example:
This issue has been filed as a product defect within our organization and will be resolved shortly, as it was never our intention to require our customers to manually modify their CSS files upon upgrade.
If you’re not comfortable implementing this workaround yourself, our support team will be happy to assist you.