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.
To make things easier, we've prepared the necessary assets for you to download:
Download p7affinity-core-colors.zip
Unzip the file. The zip file contains the following folders and files:
Place its contents inside your new p7affinity-core-colors folder.
Create a new Core Affinity page. Select any one of the nice available layouts.
Save the page inside your p7affinity-core-colors folder.
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 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.
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.
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.
background-color: transparent;
We turn off the default background color of the columns wrapper DIV.
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.
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.
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.
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.
background-color: rgb(255,153,0);
background: rgba(255,153,0,.7);
border-color: #000000;
We change the border color of the menu links in the default DMM menu.
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.
background-color: #FF9900
We change the toolbar hover color. The toolbar presents the hamburger icon when the menu converts to responsive mode.
color: #000;
We change the text color of the copyright notice.
background-color: #222;
background: rgba(0,0,0,.9);
We make the footer background semi-transparent using RGBA for modern browsers.
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.