Learn how easy it is to customize colors and create your own personal Mobius color themes.
Mobius uses a single CSS file for all 5 layouts: p7affinity-5.css. To customize the colors, all you need to do is create a new style sheet, containing only those rules that affect colors. You can create as many of these custom exception style sheets as you want—effectively creating an unlimited number of custom Mobius color themes.
To deploy the custom color theme...
1. Create a Mobius page
2. Download the Custom CSS File
3. Link the Custom CSS File to your Mobius Page
The above rules go inside a new style sheet, named p7Mobius-Mauve.css, which should be placed inside your p7affinity folder. To make things easier, we've prepared a finished style sheet that you can download:
Download p7-Mobius-Mauve.css
After downloading the file, make sure to place it inside your p7affinity folder.
Open your Mobius page and switch to Code View. In the head you will see links to several CSS and script files:
<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/p7-Mobius-Mauve.css" rel="stylesheet" type="text/css" media="all">
</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-color: #EEE;
background-image: url(img/nova-pgb-white.jpg);
We change the background color and assign a different background image. In this case, we use one of the background images that come with the Nova Theme Pack. Actually, we will be transforming Mobius to use some the primary colors from Nova. If you own the Nova pack, that image will be present in your p7affinity/img folder. You can use any image you desire and any colors you desire.
background: #111;
background-color: rgba(0,0,0,.8);
box-shadow: none;
We set a background of #111, which acts as a fallback for old browsers that do not support RGBA colors. We use RGBA to set background-color to black with 80% opacity.
We also set box shadow to none, countering the box-shadow that is set in the default Mobius style sheet.
color: #AAA;
We change the text color of the tagline that appears to the right of the logo.
background: #C96;
background-color: rgba(204,153,102,0.5);
box-shadow: none;
We set a background of #C96, which acts as a fallback for old browsers that do not support RGBA colors. We use RGBA to set background-color to black with 50% opacity.
We also set box shadow to none, countering the box-shadow that is set in the default Mobius style sheet.
box-shadow: none;
background-color: rgba(255,255,255,.5);
The content element is a container for the main column structure of your page down to, but not including, the footer. We turn off box-shadow and set background color to 50% transparent white, using RGBA.
background: #C96;
background-color: rgba(204,153,102,0.5);
We change the gold highlight box to a mauve color. We use a fallback for old browsers and RGBA, with 50% transparency, for modern browsers.
color: #AAA;
background: #111;
background-color: rgba(0,0,0,.8);
box-shadow: none;
color: #000;
We change the text color of the copyright notice.
The following Media Query targets smartphones and narrow windows. For this exercise, we are using it to turn off border-radius for the logo..
@media only screen and (min-width: 0px) and (max-width: 700px)
border-radius: 0px !important;
You can make an unlimited number of custom color themes for Mobius. To do so, make a copy of the p7-Mobius-Mauve.css file and give it a unique name. For example, if you wanted to make a blue version of Mobius, name your new file p7-Mobius-Blue.css. Then change the link in your page head from:
<link href="p7affinity/p7-Mobius-Mauve.css" rel="stylesheet" type="text/css" media="all">
To:
<link href="p7affinity/p7-Mobius-Blue.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.