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.

Affinity Aspire Style GuideFrom PVII: the leader in responsive Dreamweaver tools

The Aspire Theme

Get the power of an open source CSS framework with a fraction of the code and complexity, more stability, and legendary PVII technical support that is always free.

Aspire uses a single CSS file for all 5 layouts: p7affinity-7.css. We'll list and discuss each rule. Note that simple declarations, such as backgrounds, padding and margins, for example, will not be covered. It is assumed that their meaning and purpose are obvious even to CSS beginners.

body

font-family: Buda, "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 115%;
margin: 0px;
background-image: url(img/aspire-logo.png);
background-repeat: no-repeat;

We use a Google font to make your page look a little more elegant. The font we chose, is a little smaller than typical Web fonts, so we set font-size for the body to 115%. You can adjust this as you see fit.

The background image is used for the logo. Your logo does not need to be the same size as ours, but it should not be so large that it obscures too much of the page.

Tip: Do not use Dreamweaver's CSS editor or CSS Designer to edit the background. Dreamweaver will corrupt the code. Edit this rule manually in Code View.

.p7DMM

font-family: Buda, "Palatino Linotype", "Book Antiqua", Palatino, serif;
padding-left: 24px;

We set the default DMM menu to use a Google font and give it some left padding.

.p7DMM.dmm-vertical

padding-left: 0px;

We remove the left padding for DMM menus in vertical accordian mode.

.p7DMM div

border-radius: 4px;
padding: 0px !important;

This rule sets a border radius (rounded corners) on the sub-menu container so that as the menu slides up and down, the rounded corners of the sub-menu animate seamlessly.

.main-row

zoom: 1;
background-color: rgba(255,255,255,.2);
border-radius: 10px;

This element contains all content areas of the page. We set an almost-transparent white background to make text in the left column more readable where it intersects with the logo.

.main-row:before, .main-row:after

position: relative;
z-index: 4;
margin: 0px 0px;
background-color: #A47C72;
background: rgba(125,87,78,.5);
box-shadow: 0px 0px 30px #000;
border-radius: 0px;
padding: 0px 80px;

This rule ensures that the floated elements inside each row are cleared without having to add markup to your page.

.column

float: left;

We float all columns left by default...so that they appear side-by-side.

.content

padding: 20px;
transition: padding linear .5s .1s;

We assign padding to all content DIVs. We also assign a CSS3 animation effect, which smoothly scrolls the page content as the browser window is resized.

.aspire-5 .content

padding: 20px 40px;

We set unique padding values for the content area in only layout 5.

Column Widths

We include several rules to allow you to easily add multi-column rows to your page—or to change the widths of existing columns. They are:

Normal Columns

.percent20 { width: 20%; }
.percent25 { width: 25%; }
.percent30 { width: 30%; }
.percent333 { width: 33.333%; }
.percent40 { width: 40%; }
.percent50 { width: 50%; }
.percent60 { width: 60%; }
.percent75 { width: 75%; }

Markup example

To create a row with two equal-width columns:

<div class="main-row">
<div class="column percent50">
<div class="content">
Content Here.
</div>
</div>
<div class="column percent50">
<div class="content">
Content Here
</div>
</div>
</div>

Boxed Columns

.percent20.boxed { width: 18.4%; }
.percent25.boxed { width: 23.5%; }
.percent30.boxed { width: 28%; }
.percent333.boxed { width: 32%; }
.percent40.boxed { width: 38%; }
.percent50.boxed { width: 49%; }
.percent60.boxed { width: 59%; }
.percent75.boxed { width: 74%; }

Boxed Column Spacer

.column.boxed.spacer { margin-left: 2%; }

The spacer class is assigned to each column except for the first column in boxed rows.

Markup Example:

<div class="main-row">
<div class="column percent50 boxed">
<div class="content border-boxed">
Content Here.
</div>
</div>
<div class="column percent50 boxed spacer">
<div class="content border-boxed">
Content Here
</div>
</div>
</div>

.left-20

position: relative;
left: 20%;

We use this special rule to change the visual order in which the columns render in layout 2, which contains a main content area flanked by 2 sidebars. When viewed on a phone, we want the main column to appear first...so it must be the first column in the source code order. On a desktop browser, we use this rule to move the main column 20% to the right. Then we use the following rule to move the left sidebar column to the left edge of the layout.

.left-neg-60

position: relative;
left: -60%;

We use the following rule to move the left sidebar column to the left edge of the layout...in Layout 2. This changes the visual ordering from the source code ordering, to provide a more usable view on small devices.

.border-left-right-bottom

border: 1px solid;
border-top: none;
border-radius: 0px 0px 5px 5px;

This class is assinged to content areas to create a boxed effect, open on the top.

.border-boxed

border: 1px solid;
border-radius: 5px;

This class creates a border around all 4 sides.

.aspire-4 .border-left-right-bottom

border: 1px solid;
border-radius: 5px;

This border class is used in Layout 4. It is the same as border-boxed, but we've kept it separate in case you want to further customize it for just Layout 4.

#masthead

font-size: 1.5em;
padding: 0px 20px;

This element contains your masthead. In Aspire pages, this would be the text Aspire inside an H1 tag.

h1, h2, h3, h4

margin: 0px;

We zero the margins for heading elements.

span.dropcap

font-family: Combo, "Palatino Linotype", "Book Antiqua", Palatino, serif;
float: left;
font-size: 8em;
margin: 0 10px 0 0;
padding: 0 .1em 0 0;
display: block;
line-height: 0.775em;
border-right: 1px solid;
font-stretch: ultra-condensed;

This class defines the optional dropcap. You can assign a dropcap to any leading character on your page by wrapping that character in a span and assign it the class dropcap:

<p><span class="dropcap">H</span>ome is where the heart is.</p>

.emfatico

font-size: 20px;
line-height: 1.75;
background-color: #222;
background: rgba(0,0,0,.85);
color: #FFF;
border-radius: 5px;
margin: 10px 0px;

The emfatico class can be assigned to any element on your page to give it a contrasting background and slightly larger text.

.emfatico, .content.emfatico

padding: 5% 5%;

We reduce the padding for emfatico elements to a percentage so that the padding scales with the window or device width.

.red

background-color: #CE4242;
background: rgba(204,51,51,.85);
color: #000;

This class can be added to an emfatico element to color the element red:

<div class="emfatico red">This box is red</div>

.white

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

This class can be added to an emfatico element to color the element white:

<div class="emfatico white">This box is white</div>

Background Rotator Magic Compatibility

The following rules will help you to prepare your page for insertion of a BRM background rotator. Simply assign the class brm to your page's body tag:

<body class="aspire-1 brm">

.brm .main-row

background: linear-gradient(180deg, rgba(255,255,255,.75) 70%, rgba(255,255,255,0));

.aspire-4.brm .main-row

background: none;

.aspire-4.brm .column .content

background: linear-gradient(180deg, rgba(255,255,255,.85) 70%, rgba(255,255,255,.65));

Additional Rules

#copyright span

display: block;

This allows you to do a multi-line presentation inside the copyright without having to use paragraphs. Example:

<p id="copyright">&copy;2014 Aspire, LLC. <span>All Rights Reserved.</span></p>

The span appears on its own line.

#footer

padding: 0;
font-size: 0.75em;

The Footer...which includes the copyright.

#footer .content

padding: 12px 20px;
border: none;

The content inside the footer. This includes the copyright.

.aspire-2 #footer, .aspire-3 #footer

width: 60%;
margin: auto;

This positions the footer aligned to the left edge of the main content section in layouts 2 and 3.

.aspire-5 .p7DMM, .aspire-5 #masthead, .aspire-5 #footer .content

padding-left: 40px;

This adds left padding to the menu, the masthead, and the footer in layout 5.

.main-row.aspire-4

padding: 10px 24px;

We set custom padding for the main row in layout 4.

img.scalable

width: auto;
height: auto;
max-width: 100%;

Assign this class to any image that you want to have scale with the page.

.rounded

border-radius: 5px;

Use this class if you need to round the corners of an element.

.centered

text-align: center;

Use this class if you need to center the content inside of an element.

.opaque

opacity: .65;

Use this class if you need to make an image semi-transparent. Assign to the <img> tag only. The following image is set to be scalable, rounded, and opaque:

<img src="aspire-06.jpg" alt="" class="scalable rounded opaque">

Link Styles

We've included basic link styles for you.

Links inside emfatico elements

.emfatico a { color: #AAA;}
.emfatico a:hover { color: #FFF;}

Links inside emfatico elements set to red

.emfatico.red a { color: #FFF;}
.emfatico.red a:hover { color: #000;}

Content links and links inside emfatico elements set to white

a, .emfatico.white a { color: #39F; }
a:hover, .emfatico.white a:hover { color: #000; }

Smartphone Menu Media Query

The following Media Query targets smartphones and narrow windows. Please limit yourself to color changes only—unless your CSS skills are fairly advanced.

@media only screen and (min-width: 0px) and (max-width: 700px)

.column {
float: none !important;
width: auto !important;
position: static;
}
.spacer { margin: 20px 0px !important; }
.emfatico { border-radius: 5px !important; }
.content {
padding: .5em 1.5em;
border: none !important;
height: auto !important;
max-height: 888678px;
}
.main-row.aspire-4 {
padding: 0px;
}
.aspire-5 .p7DMM {
padding-left: 0px;
}
.aspire-2 #footer,
.aspire-3 #footer {
width: auto;
}
.border-left-right-bottom {border: none;}

Media Query for Tablets

The following Media Query targets tablets and all browsers when the window width is 1024 pixels wide or less.

@media only screen and (min-width: 701px) and (max-width: 1024px)

.column { position: static; }
.column.sec-2.percent20 { width: 40% !important; }
.aspire-3 .column.sec-1, .aspire-4 .column.sec-2 { width: 38% !important; }
.aspire-3 .column.sec-2, .aspire-4 .column.sec-1 { width: 59% !important; }
.aspire-3 .column.sec-2 .content {
border-right: none;
border-bottom: none;
border-radius: 0px;
}
.aspire-2 .main-row {padding-left: 6px;}

.column.sec-3.percent20 {
width: auto !important;
float: none !important;
}
.column.sec-3 .content {
border: none !important;
height: auto !important;
max-height: 888678px;
}
.aspire-2 #footer,
.aspire-3 #footer {
width: auto;
}

This document will evolve to include additional information. If there is anything you are unsure about please do not hesitate to ask for support. PVII Support Home...

Quick Exercise:
Changing the column configuration for a default Aspire row

Here is the default content row for Aspire layout 01:

<div class="main-row aspire-1">
<div class="column sec-1 percent60">
<div class="content p7ehc-1">
Boilerplate text is here
</div>
</div>
<div class="column sec-2 percent20">
<div class="content border-left-right-bottom p7ehc-1">
Boilerplate text is here
<div class="emfatico">
Boilerplate text is here
</div>
</div>
</div>
<div class="column sec-3 percent20">
<div class="content p7ehc-1">
Boilerplate text is here
</div>
</div>
</div>

To change this to 3 equal width columns (Edits in red):

<div class="main-row aspire-1">
<div class="column sec-1 percent333">
<div class="content p7ehc-1">
Boilerplate text is here
</div>
</div>
<div class="column sec-2 percent333">
<div class="content border-left-right-bottom p7ehc-1">
Boilerplate text is here
<div class="emfatico">
Boilerplate text is here
</div>
</div>
</div>
<div class="column sec-3 percent333">
<div class="content p7ehc-1">
Boilerplate text is here
</div>
</div>
</div>

Editing and determining RGBA colors

The following procedures will enable you to convert HEX colors to RGBA in Dreamweaver CS5 and under. Dreamweaver CS5.5 and up have native support for RGBA built in.

RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows you to set a transparency level for the element being colored—be it a background color, a text color, or a border color. White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to determine the RGB values using its standard color picker tool.

In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6. Open the color picker. Then click the System Color Picker icon:

The System Color Picker will open:

Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value to:

rgba(102,204,102,1);

Remember, the "1" at the end is the alpha value and means your color is fully opaque (no transparency). To set transparency, choose a decimal value between 1 and 0. For example, to set 50% transparency, your values would be:

rgba(102,204,102,.5);