For some reason CM1 is not reading my CSS file correctly. It’s applying a background image to a #header when it’s not suppose to apply one until i reference #header-bg. I’ve also noticed a few other inconsistances with it. For some reason it’s referencing a #container to wrap then entire page and center it. I don’t have a #container anywhere in my CSS. Where is it getting this from?
As far as the background goes I am not sure what is up right off hand. Can you point me to the css in question?
As far as the #Container, it is a box added by CM1 to assist with centering at template creation.
Matt,
Have you checked the region to make sure the ID (Region name) and classes don’t match anything in your CSS that loads the background? There is also a Container wrapping the entire template by default on the templates. To make it easier to identify the regions you have, there is an “Explored Regions” item on the Layout tray, that will show a list of all the regions in your template. You can click on them in the tray to highlight them in the template, making access to editing the properties easier. It will also allow you to see all the regions on the layout in case there is one that is not as obvious.
With your CSS in as a Theme, have you ensured you selected the Theme from the Style tab in Design Manager?
@David - I have scowered my CSS code and nothing is matching the ID or Class exactly. Yes I have selected my theme in the Style Tab. I know this because it loads the correct background for the body of the site.
Do you have FireFox with FireBug installed? You can make quick work of it by creating a page using the template you are working on. Launch the page into preview, into a new tab, and inspect the element you see the background on. That will show you the CSS applying to the element so you can pinpoint it easily.
You can do this with Chrome, FireFox OOB, IE Developer tool, etc… FireBug has one of the easiest to use interfaces for this but the others do have built in tools that will make it a little easier.
I second Firebug, it is the very best tool for this sort of thing.
When I look at it in FireBug, I notice there is a lot of perc-[] markup in it. Could that be throwing it off?
I have my site setup for 1000px but the percussion markup that is being added it changing it to 960px.
It shouldn’t. most of the perc items are for containers classes and should not conflict with the div id’s that drive the regions.
If you inspect the item in FireBug, look on the right side. There is a CSS side bar. If you see something over there at the top with a background property on it, that’s what is affecting it. It will show you the selector affecting it, the CSS file link as a clickable link.
Looking at the CSS on the side shows that only a color is assigned to the div. I haven’t even inserted the div that has the background image assigned to it and it’s already showing up. The CM1 markup is killing my theme. It looks perfect outside of CM1. Once I put it in and CM1 adds all of it’s class markup of vert and horiz and all that stuff, it looks awful.
When I go and look at another div block that I have for my footer, it’s not even reading in any of my CSS for it to style it.
Hi Matt,
The width issues you’re experiencing are due to an issue in how are system CSS is applied, which has been submitted to product management. This thread outlines the workaround for this issue (first reply):
https://community.percussion.com/t/remove-percussion-css-non-theme/1591
Let me know if this corrects some of the layout issues.
Matt, here is the complete workaround taken from our help site:
*** Important Layout Rendering Note ***
Upgrading to 2.4 or 2.5
Certain regions may be affected in your existing layout unless the following steps are performed.
edit the cmroot\web_resources\cm\css\perc_decorations.css file
copy the following lines in the Region CSS section
.vspan_2 { height : 120px }
.vspan_4 { height : 240px }
.vspan_6 { height : 360px }
.vspan_8 { height : 480px }
.hspan_2 { width : 160px }
.hspan_8 { width : 640px }
.hspan_10 { width : 800px }
.hspan_12 { width : 960px }
#content { margin : 0 auto }
/* Wrapper for all body content */
#container
{
margin: 0 auto;
}
edit your theme.css file
place the copied lines at the top of your theme.css file
update the values to work for your theme design
@Jon - That worked perfectly. Thank you very much for that code snippet to fix my issues. On a side note, what’s the easiest way to include two other css files into my template?
Hi Matt, glad to hear that helped. One way to include additional CSS files would be to place them in a folder within your theme and reference them in the head of your templates. You can do that by clicking on the “Content” tab within the template editor and under "actions’ select “edit meta-data”. There you find find additional code entry points to place those references.
What do I set the href value to so that it will work when these sites go live?
/web_resources/themes/[theme folder]/[css folder]/[file name]
Okay, I noticed that my main css file has an additional starting point of /Rhythmyx before /web_resources.
CM1 is made to alias to the physical location. When you publish the site, the path will be what I pasted above. The Rhythmyx piece is for the back end when in CM1 but you don’t need to worry about that because of the path alias.
When I preview my page, I view source and cm1 is adding additional classes with predefined widths and heights to some of my regions, yet in the layout view I have set the option for it to: “Do not resize” and have made sure the width and height boxes are empty.
For instance it is adding the classes:
hspan_12
vspan_8
I realize I could override these classes, but that’s more of a hack to fix the problem. I am not seeing why it’s adding these by default?
Is there way to get it to not do this?
This reply was created from a merged topic originally titled
perc_decoration.css styles adding widths to my regions.