Scroll To Top

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.

Customizing Colors in Core Affinity LayoutsFrom PVII: the leader in responsive Dreamweaver tools

Learn how easy it is to customize colors and create your own personal Affinity color themes.

Each of the five core Affinity layouts use a separate CSS file. To customize the colors, all you need is a single additional style sheet, containing a few exception rules. That single CSS file will allow you to set custom colors for all five layouts. You can create as many of these custom exception style sheets as you want—effectively creating an unlimited number of custom color themes for the core Affinity layouts.

See the Finished Custom Page

To deploy the Custom Color Theme

1. Download the Assets

To make things easier, we've prepared the necessary assets for you to download:

Download p7affinity-core-colors.zip

2. Unzip the Assets file

Unzip the file. The zip file contains the following folders and files:

3. Create a new Folder in your Defined Dreamweaver Site

Place its contents inside your new p7affinity-core-colors folder.

4. Create a Core Affinity Page

Create a new Core Affinity page. Select any one of the nice available layouts.

Save the page inside your p7affinity-core-colors folder.

5. Link the Custom CSS file

Open your page and switch to Code View. In the head you will see links to several CSS and script files before the closing </head> tag.:

<link href='http://fonts.googleapis.com/css?family=Life+Savers' rel='stylesheet' type='text/css'>
</head>

Make a new line just before the closing </head> tag and insert a link to the custom CSS file:

<link href='http://fonts.googleapis.com/css?family=Life+Savers' rel='stylesheet' type='text/css'>
<link href="p7affinity/p7affinity-core-exceptions.css" rel="stylesheet" type="text/css">
</head>

That's it!

The Exception Rules

The following rules are those that affect color. We'll isolate them and then simplify them by removing all properties that do not need to be changed.

body

background-image: url(../images/apple-bg.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;

We add a page background image. The image is set to fixed so that it does not scroll. It is set to not repeat. Its position is centered. and its size is set to cover, which means that in modern browsers it will scale to fit the viewport.

You can use any image you desire.

.masthead

background: rgba(0,0,0,.75)

We set a background of black, using RGBA to set 75% opacity. This allows the page background to show through. Adjust the alpha value from .75 to whatever you please.

.columns-wrapper

background-color: transparent;

We turn off the default background color of the columns wrapper DIV.

.sidebar .content

background-color: #A3B225;
background: rgba(163,178,37,.5);
background-image: none;

We set a background-color of #A3B225 for the left sidebar (for all layouts containing a left sidebar), which acts as a fallback for old browsers that do not support RGBA colors. We use RGBA to set background to the same color with 50% opacity.

We also set background image to none, which serves to turn off the linear-gradient set in the default CSS.

.sidebar-right .content

background-color: #FFE035;
background: rgba(255,224,52,.5);
background-image: none;

We set a background-color of #FFE035 for the right sidebar, which acts as a fallback for old browsers that do not support RGBA colors. We use RGBA to set background to the same color with 50% opacity.

We also set background image to none, which serves to turn off the linear-gradient set in the default CSS.

.main-content .content,
.column-1 .content,
.column-2 .content,
.column-3 .content

border-color: #000;
background-color: #FFF;
background: rgba(255,255,255,.5);

This rule covers the main content area for layouts 1-4 and the three equal width columns in layout 5. We set border color to black and background color to white. RGBA, with 50% transparency, is used for modern browsers.

.fancy

border: 1px solid rgba(255,255,255,.8);
box-shadow: none;

The fancy class is used for images and we customize the border color and turn off shadows for a flatter, cleaner look.

.top-navigation

background-color: rgb(255,153,0);
background: rgba(255,153,0,.7);

We customize the menu container, giving it an orange color. Old browsers get RGB colors. Modern browsers get RGBA with 70% opacity.

.p7DMM01 ul a

border-color: #000000;

We change the border color of the menu links in the default DMM menu.

.p7DMM01 ul a:hover,
.p7DMM01 ul a:focus,
.p7DMM01 ul a.open,
.p7DMM01 ul a.current_mark.closed

border-color: rgba(255,255,255,0.5);
background-color: #AEBD54;

We change the border and background colors of the menu links in the hover, open, and current_mark.closed states.

.p7DMM01.responsive .p7DMM-toolbar.closed:hover,
.p7DMM01.dmm-vertical .p7DMM-toolbar.closed:hover

background-color: #FF9900

We change the toolbar hover color. The toolbar presents the hamburger icon when the menu converts to responsive mode.

#copyright

color: #000;

We change the text color of the copyright notice.

.footer

background-color: #222;
background: rgba(0,0,0,.9);

We make the footer background semi-transparent using RGBA for modern browsers.

Additional Customizations

You can make an unlimited number of custom color themes. To do so, make a copy of the p7affinity-core-exceptions.css file and give it a unique name. For example, if you wanted to make a red version, name your new file p7affinity-core-exceptions-red.css. Then change the link in your page head from:

<link href="p7affinity/p7affinity-core-exceptions.css" rel="stylesheet" type="text/css" media="all">

To:

<link href="p7affinity/p7affinity-core-exceptions-red.css" rel="stylesheet" type="text/css" media="all">

Use Dreamweaver, or your preferred CSS editor, to customize the colors and you're all set! Save as many custom CSS files as you want and use them whenever you want.