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.
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.
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.
padding-left: 0px;
We remove the left padding for DMM menus in vertical accordian mode.
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.
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.
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.
float: left;
We float all columns left by default...so that they appear side-by-side.
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.
padding: 20px 40px;
We set unique padding values for the content area in only layout 5.
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:
.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%; }
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>
.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%; }
.column.boxed.spacer { margin-left: 2%; }
The spacer class is assigned to each column except for the first column in boxed rows.
<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>
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.
position: relative;
left: -60%;
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: 1px solid;
border-radius: 5px;
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.
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.
margin: 0px;
We zero the margins for heading elements.
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>
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.
padding: 5% 5%;
We reduce the padding for emfatico elements to a percentage so that the padding scales with the window or device width.
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>
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>
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">
background: linear-gradient(180deg, rgba(255,255,255,.75) 70%, rgba(255,255,255,0));
background: none;
background: linear-gradient(180deg, rgba(255,255,255,.85) 70%, rgba(255,255,255,.65));
display: block;
This allows you to do a multi-line presentation inside the copyright without having to use paragraphs. Example:
<p id="copyright">©2014 Aspire, LLC. <span>All Rights Reserved.</span></p>
The span appears on its own line.
padding: 0;
font-size: 0.75em;
The Footer...which includes the copyright.
padding: 12px 20px;
border: none;
The content inside the footer. This includes the copyright.
width: 60%;
margin: auto;
This positions the footer aligned to the left edge of the main content section in layouts 2 and 3.
padding-left: 40px;
This adds left padding to the menu, the masthead, and the footer in layout 5.
padding: 10px 24px;
We set custom padding for the main row in layout 4.
width: auto;
height: auto;
max-width: 100%;
Assign this class to any image that you want to have scale with the page.
border-radius: 5px;
Use this class if you need to round the corners of an element.
text-align: center;
Use this class if you need to center the content inside of an element.
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">
We've included basic link styles for you.
.emfatico a { color: #AAA;}
.emfatico a:hover { color: #FFF;}
.emfatico.red a { color: #FFF;}
.emfatico.red a:hover { color: #000;}
a, .emfatico.white a { color: #39F; }
a:hover, .emfatico.white a:hover { color: #000; }
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;}
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...
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>
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);