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 MobiusFrom PVII: the leader in responsive Dreamweaver tools

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.

See the Finished Custom Page

To deploy the Custom Color Theme

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

Download the Custom CSS File

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.

Link the Custom CSS file

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 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-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.

#logo

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.

#logo .right-side

color: #AAA;

We change the text color of the tagline that appears to the right of the logo.

#top-navigation

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.

#content

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.

.colored-gold

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.

#footer

color: #AAA;
background: #111;
background-color: rgba(0,0,0,.8);
box-shadow: none;

We change the text color and background. We turn off shadows.

#copyright

color: #000;

We change the text color of the copyright notice.

Smartphone Menu Media Query

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)

#logo

border-radius: 0px !important;

Additional Customizations

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.