Affinity Nova Style GuideFrom PVII: the leader in responsive Dreamweaver tools
The Nova 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.
Nova uses a single CSS file for all 5 layouts: p7affinity-6.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: "Segoe UI", "Gill Sans", Optima, sans-serif;
margin: 0px;
background-color: #222;
background-image: url(img/nova-pgb-black.jpg);
background: url(img/nova-pgb-white.jpg), url(img/nova-pgb-black.jpg);
background-repeat: repeat-x, repeat;
background-position: 0px 0px, 200px 200px;
background-attachment: fixed;
The background image is set twice. The first instance is a fallback for old browsers. The second instance is for modern browsers and sets dual background images. CSS allows multiple backgrounds, declared with commas separating them. The images are stacked, with the first one always on top. In this case, the white image is 500 pixels tall and is set to repeat-x (horizontally). The second image is set to repeat (tile in both directions).
Background position sets the first image to 0px and the second to 200px. The 200px position for the second image has no effect since it is set to tile. It simply appears below the first position, which is 500 pixels tall. The position of 200px was set as an indicator, for you, so that you know it is for second image. It is there for advanced users, who might want to have different tiling scenarios.
Background-attachment fixed means that as you scroll the page, the background images will not move.
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.
#logo
position: absolute;
top: 0px;
left: 5px;
z-index: 5;
border-radius: 0px 0px 8px 8px;
box-shadow: 5px 5px 20px rgba(0,0,0,.5);
Position is set to absolute, with a z-index of 5, so that the logo always site above the menu. Border-radius is set to 8px bottom right and 8px bottom left using CSS shorthand. Shorthand for properties that relate to the 4 sides or corners of an element are always written in the following order:
property: top (or top left) right (or top right) bottom (or bottom right) left (or bottom left)
We also set a box shadow.
img
vertical-align: bottom;
This is a baseline adjustment for images that is needed when a strict or HTML5 DOCTYPE is used. It prevents the inclusion of white space below the image.
a:active
background: none;
This is a workaround for IE10 (and higher) which otherwise would assign an active background and color effect to all links.
#layout
max-width: 1320px;
margin: 0px auto;
The layout element is the container for your entire page. We set a max-width and auto left/right margins (to center the layout). You can adjust the max-width value if you wish. All columns inside are set to percentage widths so everything will always adjust perfectly.
#top-navigation
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 element is a container for the main navigation menu. It is positioned relative with a z-index lower than the logo element but higher than the content element so that all adjacent shadows render correctly. Background-color in RGB is a fallback for older browsers. Background is set in RGBA with .5 (50%) alpha transparency. Border-radius is set to 10 pixels on the bottom right and left. Left and right margins are set to 40 pixels, which creates an indented effect relative to the the logo element.
Padding is set to 80px left/right to clear an area for the logo. Adjust this if your logo is wider than the default one that we provide.
#content
position: relative;
z-index: 1;
background-color: #FFF;
margin: 0px 80px;
border-radius: 0px 0px 8px 8px;
box-shadow: 0px 0px 30px #000;
The content element is a container for the main column structure of your page down to, but not including, the footer. Its z-index is lower than logo and top-navigation. Left and right margins are set to 80 pixels, which creates an indented effect relative to the the logo and navigation elements.
#top-navigation, h1, h2, h3, h4
font-family: Federo, "Arial Narrow", Arial, sans-serif;
font-weight: 400;
The Federo font is a Google Font linked to your page in the <head> like this;
<link href='http://fonts.googleapis.com/css?family=Federo' rel='stylesheet' type='text/css'>
h1, h2, h3, h4
margin: 30px 0px 0px 0px;
.column-content h1:first-child,
.column-content h2:first-child,
.column-content h3:first-child,
.column-content h4:first-child
margin-top: 10px;
This rule sets a 10px top margin for any heading that is the first element inside a column-content DIV. Subsequent headings in your content areas will revert to margin set in the previous rule (h1, h2, h3, h4).#footer
color: #222;
margin: 0px 20px;
background-color: rgb(34,34,34);
background-color: rgba(34,34,34,.65);
border-radius: 0px 0px 10px 10px;
padding: 10px 24px;
box-shadow: 0px 0px 30px #000;
text-align: center;
Left/right margins are set to 20 pixels to match the layout DIV. Border-radius is set to 10 pixels on the bottom corners.
#footer img
opacity: .6;
-webkit-transition: opacity linear .35s .1s;
transition: opacity linear .35s .1s;
#footer img:hover
opacity: 1;
Opacity changes from .6 to 1 on hover. Based on the transition property declared on the previous rule, we are fading from .6 (60% opaque/40% transparent) to fully opaque. The effect, therefore, is an animated fade-in.
#copyright
margin: 12px 100px 30px 100px;
color: #888;
font-size: 0.75em;
text-transform: uppercase;
text-align: center;
.column-content img
width: auto !important;
height: auto !important;
max-width: 100%;
border-radius: 8px;
border: 1px solid;
border-color: rgba(0,0,0,.75);
display: block;
Images inserted into the column content elements are set to scale with the window width. They are also assigned rounded corners and a border. Display block is set as a workaround for rendering bugs in Dreamweaver design view and can be removed at your discretion.
Tip: If you are using image an image gallery, or other scripted image handling widget in your page, delete the width and height settings above. For your embedded images to remain scalable, you must then insure that you remove the width anf height attributes that Dreamweaver places on the img tag. Max-width is what makes your images scalable. The height and width are in this rule to prevent Dreamweaver from breaking scalability.
Nova Row and Column Structures
The following rules define the row and column structures in your page. The PVII approach to flexible CSS design has been carefully engineered to ensure optimum efficiency. If you've ever used a CSS grid framework, or Dreamweaver's Fluid Grid feature, you will probably be wondering where the extra thousand lines or so of CSS code went. They are simply not needed.
.affinity-row
zoom: 1;
The default Nova row. All column structures are contained within an affinity-row DIV. This rule is actually a placeholder and, under normal circumstances, should not be edited. Zoom is used as a workaround for CSS issues in old versions of Explorer (7 and under).
.affinity-row:after
visibility: hidden;
display: block;
content: "\0020";
clear: both;
height: 0;
This rule ensures that the floated elements inside each row are cleared without having to add markup to your page.
.affinity-column
float: left;
We set all columns to float left since most of them will need to do just that. If we need to change direction, we will do that in separate more specific rules.
.affinity-column.reverse-float
float: right;
Sometimes we need to reverse the float direction to position the first column in the source code order to the right of where it would ordinarily be.
Nova Column Width declarations: The Usable Grid
The following classes are assigned to column DIVs inside affinity-row containers to set the widths of your columns. This percentage-based grid system also allows you to conveniently change the widths of your columns.
Whole percentage columns
Whole percentage columns means that these columns have widths that can be mixed and matched to equal exactly 100%. When customizing or editing, simply make sure that the width classes you assign to each of the columns in a row add up to 100%.
.affinity-row .percent15 {width: 15%;}
.affinity-row .percent85 {width: 85%;}
.affinity-row .percent60 {width: 60%;}
.affinity-row .percent40 {width: 40%;}
.affinity-row .percent20 {width: 20%;}
.affinity-row .percent80 {width: 80%;}
.affinity-row .percent30 {width: 30%;}
.affinity-row .percent70 {width: 70%;}
.affinity-row .percent25 {width: 25%;}
.affinity-row .percent50 {width: 50%;}
.affinity-row .percent75 {width: 75%;}
Rounded percentages for 3 columns
In order to have 3 equal width columns, the sum of the widths must equal 100%. When you divide 100 by 3, the result is not a whole number—so we come as close as we can by using 3 decimal places. 33.333 x 3 = 99.999.
.affinity-row .percent333 {width: 33.333%;}
Boxed columns
Boxed columns are designed with full borders and a 2% gutter between columns. The sum of the column widths + the gutter must equal 100%.
.affinity-row .percent25.boxed {width: 23.5%;}
.affinity-row .percent333.boxed {width: 32%;}
.affinity-row .percent50.boxed {width: 49%;}
.affinity-row .column-content.boxed
border: 1px solid;
border-color: rgba(0,0,0,.5);
border-radius: 8px;
padding: 1em;
.affinity-row .boxed.spacer
margin-left: 2%;
Example markup for a 2-column equal width boxed row:
<div class="affinity-row">
<div class="affinity-column percent50 boxed">
<div class="column-content boxed">
Content Here.
</div>
</div>
<div class="affinity-column percent50 boxed spacer">
<div class="column-content boxed">
Content Here
</div>
</div>
</div>
.column-content
padding: 32px;
overflow: hidden;
Overflow is set to hidden to contain the CSS3 animation effects used on the images.
.column-content p
line-height: 1.6em;
.column-content.border-left
border-left: 1px #000;
border-left-style: dotted;
Use this class if you need to assign a left border to any element.
.column-content.border-right
border-right: 1px #000;
border-right-style: dotted;
Use this class if you need to assign a right border to any element.
.column-content.border-top
border-top: 1px #000;
border-top-style: dotted;
Use this class if you need to assign a top border to any element.
.column-content.border-bottom
border-bottom: 1px #000;
border-bottom-style: dotted;
Use this class if you need to assign a bottom border to any element.
.column-content.border-left-right
border-left: 1px #000;
border-right: 1px #000;
border-left-style: dotted;
border-right-style: dotted;
Use this class if you need to assign both a left and a right border to any element.
.column-content.radius-bottom
border-radius: 0px 0px 6px 6px;
Use this class if you need to round the bottom corners of an element.
.column-content.radius-bottom-left
border-radius: 0px 0px 0px 6px;
Use this class if you need to round the bottom left corner of an element.
.column-content.radius-bottom-right
border-radius: 0px 0px 6px 0px;
Use this class if you need to round the bottom right corner of an element.
.centered
text-align: center;
Use this class to center the content in an element.
Column Colors
Assign the following rules as additional classes to any element on your page to give it a distinctive look. The following classes can be assigned to a column-content DIV or a row DIV.
.colored-mauve
color: #000000;
background: -webkit-linear-gradient(90deg, #A7827A, #67483F);
background: linear-gradient(90deg, #A7827A, #67483F);
background-color: #A7827A;
font-size: 1.35em;
font-family: Federo, "Arial Narrow", Arial, sans-serif;
line-height: 1.15em;
Background is a CSS linear gradient that renders a golden hue. Background-color is used as a fallback for old browsers that do not support linear gradients. The gradient is set to render from left to right (90deg). Font is set to a large size and a special face called Life Savers, which is a Google Font linked in the head of your page:
<link href='http://fonts.googleapis.com/css?family='Federo' rel='stylesheet' type='text/css'>
.colored-black
color: #DDD;
background: -webkit-linear-gradient(90deg, #444, #000);
background: linear-gradient(90deg, #444, #000);
background-color: #222;
font-size: 1.75em;
font-family: "Life Savers", "Arial Narrow", Arial, sans-serif;
line-height: 1.15em;
Background is a CSS linear gradient that ramps from dark gray to black at 90 degrees (left to right). Background-color is used as a fallback for old browsers that do not support linear gradients.
.red
background-color: #C33;
.black
color: #DDD;
background-color: #151515;
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)
.affinity-column
float: none;
width: auto !important;
.column-content
padding: .75em;
border: none !important;
border-radius: 0px;
height: auto !important;
max-height: 888678px;
#layout
max-width: none;
#content, #top-navigation, .column-content, #footer, #copyright
margin: 0px;
border-radius: 0px !important;
#top-navigation
padding: 0px;
#logo
z-index: 999999;
left: 0px;
For smartphones we move the log all the way left and increase its z-index.
#logo img
max-width: 44px;
width: auto !important;
height: auto !important;
For smartphones we reduce the size of the logo
#top-navigation
padding-left: 0px;
For smartphones we remove left padding from the navigation bar.
#top-navigation ul
padding-left: 48px;
For smartphones we pad the left side of the DMM menu, to clear a space for the logo.
#top-navigation ul ul
padding-left: 0px;
We reset the left padding to zero for sub-menus.
Media Query for Tablets
The following Media Query targets tablets only.
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
#content
margin: 0px 40px;
#top-navigation
margin: 0px 20px;
#copyright
margin: 0px 10px;
#footer
margin: 0px 60px;
.column-content
padding: 20px;
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 Nova row
Here is the default content row for Nova layout 01:
<div class="affinity-row">
<div class="affinity-column percent50">
<div class="column-content p7ehc-1">
<h1>Main section heading</h1>
<p>Boilerplate text is here</p>
</div>
</div>
<div class="affinity-column percent50">
<div class="column-content border-left p7ehc-1">
<h2>Column 2 heading</h2>
<p>Boilerplate text is here</p>
</div>
</div>
</div>
To change this to 3 columns (Edits in red):
<div class="affinity-row">
<div class="affinity-column percent333">
<div class="column-content p7ehc-1">
<h1>Main section heading</h1>
<p>Boilerplate text is here</p>
</div>
</div>
<div class="affinity-column percent333">
<div class="column-content border-left p7ehc-1">
<h2>Column 2 heading</h2>
<p>Boilerplate text is here</p>
</div>
</div>
<div class="affinity-column percent333">
<div class="column-content p7ehc-1">
<h1>New Column</h1>
<p>Add your content here</p>
</div>
</div>
</div>
To change the default equal-width 2-column row to a 60/40 row:
<div class="affinity-row">
<div class="affinity-column percent60">
<div class="column-content p7ehc-1">
<h1>Main section heading</h1>
<p>Boilerplate text is here</p>
</div>
</div>
<div class="affinity-column percent40">
<div class="column-content border-left p7ehc-1">
<h2>Column 2 heading</h2>
<p>Boilerplate text is here</p>
</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);
Using the Nova Snippets
Nova includes a suite of Snippets to help you add nested and adjacent rows to your page. To access the Snippets open the Snippets panel in Dreamweaver (Window > Snippets). Note that our Snippets panel below is depicted in a custom Workspace combined on a single panel along with Files, CSS Styles, and Tag Inspector. Your panel will likely be all by itself.
Inside the panel, locate and expand the PVII folder and you will see the Nova Snippets.
There are Snippets for Adjacent and Nested rows.
To insert a new row
Place your cursor inside a row and then switch to code view:
<div class="affinity-row">
<div class="column-content">
<p>Affinity Nova extends the scope of your Affinity layout choices to include designs suitable for a corporation or professional firm that wants to present a serious image without sacrificing design. Like all Affinity designs, Nova is mobile-ready and responsive.</p>
</div>
</div>
Place your cursor just to the left of the affinity-row DIV and press Enter to create a new line:
[New Line]
<div class="affinity-row">
<div class="column-content">
<p>Affinity Nova extends the scope of your Affinity layout choices to include designs suitable for a corporation or professional firm that wants to present a serious image without sacrificing design. Like all Affinity designs, Nova is mobile-ready and responsive.</p>
</div>
</div>
Place your cursor on the new line and double-click your desired Snippet (Snippets can also be dragged to their destination).
To nest a row inside an existing column
Place your cursor inside a row and then switch to code view:
<div class="affinity-row">
<div class="column-content">
<p>Affinity Nova extends the scope of your Affinity layout choices to include designs suitable for a corporation or professional firm that wants to present a serious image without sacrificing design. Like all Affinity designs, Nova is mobile-ready and responsive.</p>
</div>
</div>
Place your cursor just to the right of the column-content DIV you wish to add your row to and press Enter to create a new line:
<div class="affinity-row">
<div class="column-content">
[New Line]
<p>Affinity Nova extends the scope of your Affinity layout choices to include designs suitable for a corporation or professional firm that wants to present a serious image without sacrificing design. Like all Affinity designs, Nova is mobile-ready and responsive.</p>
</div>
</div>
Place your cursor on the new line and double-click your desired Snippet (Snippets can also be dragged to their destination).