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

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

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

body

background-color: #FFFFFF;
font-family: "Segoe UI", "Gill Sans", Optima, sans-serif;
margin: 0px 0px 30px 0px;

.p7DMM04, #layout

max-width: 1392px;
margin: 0px auto;

The menu bar and main container for your Metroplex layout. We use a max-width and recommend that you do not change to a fixed width. You can change the max-width value, but if you do, you need to make a like adjustment to the max-width in your second media query (at the bottom of the CSS file):

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

The max-width in the media query should be 20px higher than the max-width set in the #layout rule.

#layout

max-width: 1360px;
padding: 15px;
border: 1px solid rgba(0,0,0,.75);
overflow: hidden;

The main container for your Metroplex layout. The max-width was set in the previous combined rule. This rule resets the value based on the addition of padding and border. If you add the 15 pixels of left/right padding, and the border to 1360 you get a total of 1392, which is the rendered width. Overflow is set to hidden to contain the animations.

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.

#logo

padding: 10px 20px;
position: relative;
z-index: 10;
background-image: linear-gradient(#333, #111);
background-color: #151515;
box-shadow: 0px 0px 30px #000;

The logo is given some breathing room with padding. It is positioned relative, with a z-index, to cause its box-shadow to appear above the DIV below it. Background-image is a CSS linear gradient that begins with color #333 (dark gray) and ramps to near-black (#111). In the absence of a direction value, linear gradients render from top to bottom. We also set a box-shadow.

#logo img, .affinity-row img, .footer img

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

This rule makes all images inserted in your page scale with window size.

.fancy

border: 1px solid rgba(255,255,255,.5);
box-shadow: 0px 0px 20px rgba(0,0,0,.5);

Add the fancy class to an image (or any other element) to add a border and drop shadow effect (for details on rgba colors, see the RGBA section at the end of this page):

<img class="fancy"...>

.accented

border: 1px solid #222;

Add the accented class to an image (or any other element) to add a border:

<img class="accented"...>

Affinity Metroplex 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 and fully researched 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 few thousand lines of CSS code went. They are simply not needed.

.affinity-row

padding: 0px;
margin-bottom: 15px;

The default Metroplex row. All column structures are contained within an affinity-row DIV. This rule is actually a placeholder and, under normal circumstances, should probably not be edited.

.affinity-row:after

visibility: hidden;
display: block;
content: "\0020";
clear: both;
height: 0;

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

.affinity-row .column-half

width: 49.5%;
float: left;
margin-right: 1%;

The structural wrapper for the columns in a 2-column row.

.affinity-row .column-third

width: 32.5%;
float: left;
margin-right: 1.25%;

The structural wrapper for the columns in a 3-column row.

.affinity-row .column-fourth

width: 24.25%;
float: left;
margin-right: 1%;

The structural wrapper for the columns in a 4-column row.

.affinity-row .column-fifth

width: 19%;
float: left;
margin-right: 1.25%;

The structural wrapper for the columns in a 5-column row.

.affinity-row.sidebar-left .column-1

width: 74.75%;
float: right;
margin-left: 1.25%;
-webkit-transition: width ease-in-out .5s .1s;
transition: width ease-in-out .5s .1s;

The structural wrapper for the main content column in a 2-column row with a left sidebar. We also assign a CSS animation triggered when column widths change as you resize your browser window beyond media query breakpoints. The breakpoints for the following media query would be 700px and 1380px.

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

.affinity-row.sidebar-left .column-2

width: 24%;
float: right;
transition: width ease-in-out .5s .1s;

The structural wrapper for the sidebar column in a 2-column row with a left sidebar. Both columns are floated right. This allows us to have the main column appear on the right side of your page even though it comes first in the source code. Note that the widths of the 2 columns, plus the margin, add up to 100%. Feel free to edit the widths, but make sure the total equals 100%.

.affinity-row.sidebar-left .column-content

line-height: 1.5;

This rule targets the content inside both columns of a sidebar-left row. We simply set line-height. If you are an advanced CSS author, you can make this rule more global. For the convenience of beginners, we chose to make it a bit more specific in its targeting.

.affinity-row.sidebar-left .column-2 .column-content

font-size: .9em;

We reduce the font size by 10% for column-2 in the sidebar-left structure, which is the sidebar column.

.affinity-row.sidebar-right .column-1

width: 74.75%;
float: left;
margin-right: 1.25%;
transition: width ease-in-out .5s .1s;

The structural wrapper for the main content column in a 2-column row with a right sidebar.

.affinity-row.sidebar-right .column-2

width: 24%;
float: left;
transition: width ease-in-out .5s .1s;

The structural wrapper for the sidebar column in a 2-column row with a right sidebar. Both columns are floated left. The sidebar column displays on the right side of the page and its markup comes before the main content column's.

.affinity-row.sidebar-right .column-content

line-height: 1.5;

This rule targets the content inside both columns of a sidebar-right row. We simply set line-height.

.affinity-row.sidebar-right .column-2 .column-content

font-size: .9em;

We reduce the font size by 10% for column-2 in the sidebar-right structure, which is the sidebar column.

.left-border

border-left: 1px solid rgba(0,0,0,.75);

Use this class if you need to assign a left border to any element.

.right-border

border-right: 1px solid rgba(0,0,0,.75);

Use this class if you need to assign a right border to any element.

.left-right-border

border-left: 1px solid rgba(0,0,0,.75);
border-right: 1px solid rgba(0,0,0,.75);

Use this class if you need to assign both a left and a right border to any element.

.boxed

border: 1px solid rgba(0,0,0,.75);

Use this class if you need to assign a border to all sides of any element.

.no-border

border: none !important;

Use this class if you need to remove all borders for any element. It is used in the default structural markup to ensure that the last column in a multi-column row does not have a right border.

Column Colors

Assign the following rules as additional classes to any element on your page to give it a distinctive flat or gradient background. For example, if this is your default tag for a Metroplex column:

<div class="column-content boxed p7ehc-sbl"> add one of the color classes below to the tag:

<div class="column-content boxed p7ehc-sbl red">

You can also create your own custom color classes using ours as guidelines.

.red

background-color: #D14747;
background-image: linear-gradient(#D04444, #B42D2D);

The CSS linear gradient begins with color #D04444 and ramps to #B42D2D. In the absence of a direction value, linear gradients render from top to bottom. Older browsers will use the background-color.

.blue

background-color: #78A6EB;
background-image: linear-gradient(90deg, #78A6EB, #5992E6);

.gray

background-color: #ABABAB;
background-image: linear-gradient(90deg, #999, #BBB);

.green

background-color: #81C796;
background-image: linear-gradient(180deg, #9AD1AB, #65BA7E);

.red, .blue, .gray, .green

border-top: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.4);
border-bottom: 1px solid rgba(0,0,0,.4);
border-left: 1px solid rgba(0,0,0,.1);

This cobined rule sets a border around each of your colored boxes. The border colors are set so that the top and left are softer than the right and bottom, which results in a subtle raised effect. Older browsers will render a solid border all around.

.black

background-color: #111;
color: #BBB;

The black and white classes are flat colors.

.white

background-color: #FFF;

.black, .white

border: 1px solid rgba(0,0,0,.75);

The black and white classes receive a solid border all around set to 75% opacity.

Column Content and Padding Management

The following rules serve to manage the padding and line-heights inside of the content areas.

.column-content

padding: 15px 24px;

Padding inside of the default content areas.

.column-content p

line-height: 1.65;

Line height for paragraph text inside the default content areas.

.affinity-row.sidebar-right .column-content,
.affinity-row.sidebar-left .column-content,
.affinity-row.thirds.full-height .column-content

padding: 30px;

This rule increases the padding in sidebar layouts and in the 3-column full-height layout.

Heading Styles

The following rules serve to style heading elements.

h1, h2, h3, h4

line-height: 1em;
margin: 30px 0px 0px 0px;
font-family: "PT Sans Narrow", Optima, "Segoe UI", Arial, sans-serif;
font-weight: 400;

.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 content DIV. Subsequent headings in your content areas will revert to default margins.

h1.centered-text

text-align: center;
margin: 0px !important;

This class is assigned to the heading that zooms into the middle of Metroplex layout 1. We use it to center the heading and zero out its margin.

.inner-row-heading

position: relative;
top: 20px;
margin: 0px 0px 0px 24px;

Use this class when you add a heading inside a row that contains multiple columns and the heading tag is positioned ablve the columns.:

<div class="affinity-row">
<h2 class="inner-row-heading">Heading for the 2-column structure below</h2>
<div class="column-half">
<div class="column-content">
<p>Affinity 2-Column Row: Column 1</p>
</div>
</div>
<div class="column-half">
<div class="column-content">
<p>Affinity 2-Column Row: Column 2</p>
</div>
</div>
</div>

Footer and Copyright Sections

The following rules define the footer area.

.footer

color: #000;
font-size: 0.85em;
border: 1px solid rgba(0,0,0,.75);

.footer h3, .footer h4

font-family: "Segoe UI", "Gill Sans", Optima, sans-serif;
font-weight: normal;
text-transform: uppercase;
margin: 10px 0px 0px 0px;

.footer ul

margin: 0px;
padding: 0px;
margin-top: 10px;

The links in the footer are contained inside unordered lists.

.footer ul li

list-style-type: none;
line-height: 1.75;

Footer Link Styles

.footer a

color: #000;

The footer links color.

.footer a:hover, .footer a:focus

color: #B02125;

.copyright

font-size: .7em;
text-transform: uppercase;
clear: both;
padding: 0px;

The copyright element is a paragraph at the bottom of the footer.

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)

body

margin: 0px;

.p7DMM04.p7DMM.p7dmm-left, .p7DMM04.p7DMM.p7dmm-right

padding: 0px !important;

#layout

max-width: none;
padding: 0px;
border: none;

.copyright

padding: 10px 20px;

.affinity-row

margin-bottom: 0px;

.column, .column-1, .column-2, .column-3,
.column-half, .column-third, .column-fourth,
.column-fifth

float: none !important;
width: auto !important;
margin-right: 0px !important;

For smartphones we un-float all columns and reset their width to auto.

.column-content, .footer

height: auto !important;
max-height: 888678px;
border: none !important;

This rule is necessary to turn off the effects of the PVII Equal Height Columns script (in applicable layouts). When the script encounters the above height and max-height values, it excludes that column from its height calculations. We also turn off all borders.

Media Query for Conventional Browsers at less than Max-Width

The following Media Query targets desktop and laptop browsers when the window width is less than the default max-width setting in the #layout rule. Remember—if you change the max-width on your #layout rule in the main section of your style sheet, you must change the max-width on this media query.

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

#layout

max-width: none;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;

When browser window width hits the max-width set in the query (in this case 1380px) the layout becomes flexible and the borders are removed.

.affinity-row.sidebar-left .column-1

width: 68.75%;

This rule, and the rules that follow, serve to widen the sidebars in windows between 700 and 1380 pixels wide.

.affinity-row.sidebar-left .column-2

width: 30%;

.affinity-row.sidebar-right .column-1

width: 68.75%;

.affinity-row.sidebar-right .column-2

width: 30%;

Media Query for Tablets in Landscape View Only

The following Media Query targets tables when they are turned sideways.

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

body

font-size: .85em;

In landscape mode, we want tablets to display a smaller font size.

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

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 Metroplex Snippets

Metroplex 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 depitced 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 Metroplex Snippets.

There are Snippets for Adjacent and Nested rows.

To insert a Row

Place your cursor inside a row and then switch to code view:

<div class="affinity-row">
<div class="column-content">
<p>Affinity Metroplex 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, Metroplex 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 Metroplex 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, Metroplex 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).

That's it!

Metroplex Animations

Note: animations run automatically when the page loads.

Metroplex includes a library (p7metroplex-animate) of CSS3 animations that you can use to add some interest to your pages. The animations are supported by all modern browsers, including IE10. Older browsers see a perfect page without animation. The default layouts each contain one or more effects, which are deployed by simply assigning 2 CSS classes to the element you wish to animate, plus an optional third class to assign a delay beofre the animation starts. In layout 1, for example, there are effects assigned to the 3 columns in the first row, a heading in the second row, and the entire third row. Here are the tags. The classes that were added to trigger the animation are highlighted:

Row 1 - Column 1:

<div class="column-content blue p7ehc-1 p7-animate zoom-in">

Row 1 - Column 2:

<div class="column-content black p7ehc-1 p7-animate fade-in-up p7-ani-delay-half">

Row 1 - Column 3

<div class="column-content red p7ehc-1 p7-animate twist-in p7-ani-delay-3qt">

Heading in Second Row

<h1 class="centered-text p7-animate zoom-in p7-ani-delay-1-andhalf">We are Metroplex. We Define Cool.</h1>

Third Row

<div class="affinity-row p7-animate fade-in-right p7-ani-delay-1">

Setting an Animation

To assign an animation, add the p7-animate class to your element:

<div class="affinity-row p7-animate">

Then add the animation type:

<div class="affinity-row p7-animate zoom-in">

Animation Choices

The folowing animations are available:

Animation Delays

If you want a delay before the animation begins, add a delay class:

<div class="affinity-row p7-animate zoom-in p7-ani-delay-1">

Animation delays are in seconds or fractions of seconds. The choices are: