Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Column Composer Magic CSS Exception Rules

PVII is the leader in creative extensions for Dreamweaver.

CCM Tutorials and Videos Home

The CSS rules illustrated in this tutorial are based on the Style Theme 01 (Classic) CSS file. Each rule begins with .p7ccm01. If you are editing Style Theme 02 (Carbon), the rules would begin with .p7ccm02.

Custom Column Background Color

Let's say you have a 2 column fixed sidebar left structure and you want to change the background color of the sidebar from its default gray to red—but you do not want to change the default CSS file because other pages or structures are using it. In this case, you simply need to create an exception rule that is outside of the main CCM style sheet. Here's how you do it:

Locate the sidebar content rule for the fixed left sidebar row, which would be:

.p7ccm01-2col-sidebar-fixed-left-column1-cnt {
background-color: #DCDCDC;
background: rgba(220,220,220,.50);
}

Copy the entire rule to your computer's clipboard (Edit > Copy).

Create a new CSS file

Create a new CSS file and name it ccm-fixed-sidebar-left-red.css (the file can be created anywhere within your defined site).

Open the page that contains the structure you want to edit. Then open your CSS Styles panel in Dreamweaver (Shift + F11). Click the first icon on the left in the row of icons at the bottom of the panel.

In the Attach External Style Sheet dialog, type the name of your new CSS file. If you've created it in a different folder, use the browser button to locate it.

Make sure Add as is set to Link

Click OK.

Switch to code view and locate your new link:

<link href="ccm-fixed-sidebar-left-red.css" rel="stylesheet" type="text/css" />

Make sure it comes after any link to a default CCM style sheet.

Open ccm-fixed-sidebar-left-red.css and paste in the rule you copied earlier:

Save the CSS file and close it.

In your web page, open the CSS Styles panel.

Make sure the All button is selected at the top of the panel.

Locate the ccm-fixed-sidebar-left-red.css file and expand it if it is not already expanded.

Select the .p7ccm01-2col-sidebar-fixed-left-column1-cnt rule and change background-color value to #FF0000.

Change the background RGBA value to rgba(255,0,0,.7)

Note: We are changing the transparency level from .5 to .7, making the red less transparent so that it does not appear to be pink. For more on RGBA colors, please see this tutorial.

That's it! You can use this technique to make as many custom exception rules as you need.