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.
Boardroom uses a single CSS file for all 5 layouts: p7affinity-3.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.
background-color: #ECECEC;
background-image: url(img/boardroom-bg.png);
font-family: "Droid Sans", Optima, "Segoe UI", Arial, sans-serif;
margin: 0px 0px 30px 0px;
The font-stack leads off with Droid Sans, which is a Google font. It is served via this link in the head of your Boardroom page:
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css">
font-family: Cuprum, Optima, Arial, Helvetica, sans-serif;
font-size: 1.2em;
This rule serves an exception to the root Drop Menu Magic element to set a font size and family specific to the Boardroom page. The font set is Cuprum, which is a Google font served via this link in the head of your page:
<link href="http://fonts.googleapis.com/css?family=Cuprum" rel="stylesheet" type="text/css">
padding-left; 20px;
When your DMM menu is aligned left, we want to add a bit of breathing room.padding-right; 20px;
When your DMM menu is aligned right, we do a bit of breathing room on the right.
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.
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.
border-top: 1px solid #000;
border-bottom: 1px solid #000;
The banner element contains the banner image. We simply assign a border above and below.
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom;
Utility class for images. The scalable class makes images scale with window size. You must assign this class to any image you wish to make scalable.
border: 1px solid rgba(255,255,255,.5);
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
Add the fancy class to the scalable class to an image or to an image you have already made scalable to add a border and drop shadow effect that makes your image appear rasised (for details on rgba colors, see the RGBA section at the end of this page):
<img class="fancy"...>
or <img class="scalable fancy"...>
border-radius: 5px;
border: 1px solid #222;
Add the accented class to an image as a single class or as an additional class to add rounded corners and a border:
<img class="accented"...>
or <img class="scalable accented"...>
max-width: 1360px;
margin: 0px auto;
background-color: #FFF;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
border-radius: 0px 0px 7px 7px;
The main container for your Boardroom 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.
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.
padding: 0px;
The default Boardroom 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.
background-color: #EEE;
background-image: linear-gradient(#EEE, #CCC);
This rule assigns a gray gradient background to every other row. If you do not want this alternating row effect, delete or comment out the rule.
background-color: transparent;
background-image: none;
background-image: none;
This rule turns off the alternating row effect for nested rows.
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.
width: 50%;
float: left;
The structural wrapper for the columns in a 2-column row.
width: 33.3333333%;
float: left;
The structural wrapper for the columns in a 3-column row.
width: 25%;
float: left;
The structural wrapper for the columns in a 4-column row.
width: 20%;
float: left;
The structural wrapper for the columns in a 5-column row.
width: 76%;
float: right;
The structural wrapper for the main content column in a 2-column row with a left sidebar.
width: 24%;
float: right;
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 add up to 100%. Feel free to edit the widths, but make sure the total equals 100%.
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.
font-size: .9em;
We reduce the font size by 10% for column-2 in the sidebar-left structure, which is the sidebar column.
width: 76%;
float: left;
The structural wrapper for the main content column in a 2-column row with a right sidebar.
width: 24%;
float: left;
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.
line-height: 1.5;
This rule targets the content inside both columns of a sidebar-right row. We simply set line-height.
font-size: .9em;
We reduce the font size by 10% for column-2 in the sidebar-right structure, which is the sidebar column.
border-left: 1px solid #000;
This class is assigned to the main content column, for example, when that column is displayed on the right side of the page. You can use this class on any element to which you want to assign a solid left border.
border-right: 1px solid #000;
This class is assigned to the main content column, for example, when that column is displayed on the left side of the page. You can use this class on any element to which you want to assign a solid right border.
border-left: 1px solid #000;
border-right: 1px solid #000;
This class is assigned, for example, to the middle column of a 3-column row.
The following rules serve to manage the padding and line-heights inside of the content areas.
line-height: 1.35;
padding: 15px 24px;
Line-height and padding inside of the default content areas.
padding: 30px;
This rule increases the padding in sidebar layouts and in the 3-column full-height layout.
The suite of Snippets that comes with Boardroom allows you to add rows to your page. Those rows can be added as either adjacent or nested rows (we'll cover that at the end of this document). Based on the placement of a row, you will need different types of padding attributes. These rules address that need.
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
Just as the rule name suggests, this class sets top, bottom, and left padding to zero. It does so with !important notations to ensure that this class always takes precedence. This class would be used, for example, on the first column in a nested row.
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
This class sets top, right, and bottom padding to zero. This class would be used, for example, on the last column in a nested row.
padding-top: 0px !important;
padding-bottom: 0px !important;
This class would be used on all columns in a nested row—except for the first and last. It would also be used on the column inside a single-column row.
The following rules serve to style heading elements.
font-family: Cuprum, Optima, Arial, Helvetica, sans-serif;
line-height: normal;
margin: 30px 0px 0px 0px;
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.
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>
The following rules define the footer area.
color: #000;
font-size: 0.8em;
border-radius: 0px 0px 5px 5px;
border-top: 1px solid;
border-color: #726561;
background-color: #857671 !important;
background-image: linear-gradient(#857671, #5F5450) !important;
The background properties are given !important notations to override the default alternate row background effect.
font-family: "Droid Sans", Optima, "Segoe UI", Arial, sans-serif;
font-weight: normal;
text-transform: uppercase;
margin: 10px 0px 0px 0px;
The font family for headings in the footer is reset from the default Cuprum to Droid Sans. The thicker lines of Cuprum do not display as clearly at small sizes as Droid Sans does.
margin: 0px;
padding: 0px;
margin-top: 10px;
The links in the footer are contained inside unordered lists.
list-style-type: none;
line-height: 1.75;
color: #000;
The footer links color.
color: #CFC9C7;
font-size: 0.85em;
text-transform: uppercase;
clear: both;
padding: 5px 10px 15px 20px;
The copyright element is a paragraph at the bottom of the footer.
The following rules define extra features and effects that can be used for design emphasis.
font-size: 1.25em;
line-height: 1.75em;
font-family: Cuprum, Optima, Arial, Helvetica, sans-serif;
Assign the largesse class to any element on your page to make its content stand out.
font-family: Cuprum, Optima, Arial, Helvetica, sans-serif;
font-size: 1.25em;
line-height: 1.75;
color: #BBB;
border-radius: 0px 0px 10px 10px;
padding: 28px 36px;
background: linear-gradient(#333, #111);
background-color: #333;
margin-bottom: 20px;
Use this class to assign a black accent box around your content.
background: linear-gradient(#EEE, #AAA);
background-color: #DDD;
color: #000;
Add the gray class to the blast class to make your accent box gray:
<div class="column-content blast gray">
border-radius: 6px !important;
Use this class on any element to give that element rounded corners on all 4 sides.
The following Media Query targets smartphones and narrow windows. Please limit yourself to color changes only—unless your CSS skills are fairly advanced.
margin: 0px;
max-width: none;
padding: 0px;
float: none !important;
width: auto !important;
For smartphones we un-float all columns and reset their width to auto.
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.
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.
max-width: none;
When browser window width hits the max-width set in the query (in this case 1380px) the layout becomes flexible.
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...
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);
Boardroom 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 Boardroom Snippets.
There are Snippets for Adjacent and Nested rows.
Use a nested row Snippet when you want to add a row inside of an existing row. If, for example, you would like to place a row between paragraphs, place your cursor at the end of the paragraph that you want the row to follow. Then switch to code view:
<p>This is s paragraph. I want my new row to come right after this text.</p>
<p>This is the next paragraph. My new row will be between these 2 paragraphs.</p>
In Code View, place your cursor just to the right of the first paragraph's closing tag </p> and press Enter once to create a new line.
<p>This is s paragraph. I want my new row to come right after this text.</p>
<p>This is the next paragraph. My new row will be between these 2 paragraphs.</p>
Place your cursor on the blank line, between the 2 paragraphs, and double-click your desired Nested Snippet (Snippets can also be dragged to their destination).
That's it. Switch back to Design View and add content to your new row.
Use an adjacent row Snippet when you want to add a row above or below an existing row. If, for example, you would like to place a row above the first row inside the content area of Layout 01, place your cursor inside that row and then switch to code view:
<div class="affinity-row">
<div class="column-content largesse">
<p>Affinity Boardroom 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, Boardroom 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 largesse">
<p>Affinity Boardroom 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, Boardroom is mobile-ready and responsive.</p>
</div>
</div>
Place your cursor on the new line and double-click your desired Adjacent Snippet (Snippets can also be dragged to their destination).
That's it!