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.

Updating to Page Builder Magic 1.0.8

PVII is the leader in creative extensions for Dreamweaver.

What's new in 1.0.8

The original Page Builder pages work fine. You do not need to update the pages unless you want to take advantage of the new Equal Height solution or mobile solution. To update pages made with Page Builder Magic 1.0.7 to conform with version 1.0.8 follow the instructions below.

Updates by Layout Number

The type of update you do is determined by the layout you are using. Please follow the instructions carefully.

All Layouts

Open your page and switch to Code View.

Locate the device Meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Remove the meta tag (the entire line).

Layouts 01 and 02

Open your page in Code View, then locate the p7mobile script link:

<script type="text/javascript" src="p7csspbm/p7mobile.js"></script>

Remove the script link (the entire line).

Layouts 01, 03, 04, 05, 06, 11, 12

Open your Page Builder CSS file: p7csspbm_01.css, p7csspbm_03.css, p7csspbm_04.css, p7csspbm_05.css, p7csspbm_06.css, p7csspbm_11.css, or p7csspbm_12.css

Make a new line at the bottom of the file and paste in these rules:

/*Mobile Devices*/
/*Phones*/
@media only screen and (max-device-width: 480px) {
body { min-width: 0px !important;}
}
/*Tablets*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body { min-width: 0px !important;}
}

Layout 02

Open your Page Builder CSS file: p7csspbm_02.css

Make a new line at the bottom of the file and paste in these rules:

/*Mobile Devices*/
/*Phones*/
@media only screen and (max-device-width: 480px) {
body { min-width: 0px !important;}
.content-wrapper { width: 960px;}
}
/*Tablets*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body { min-width: 0px !important;}
.content-wrapper { width: 960px;}
}

Layouts 07, 08, 09, 10

Open your Page Builder CSS file: p7csspbm_07.css - p7csspbm_10.css

Make a new line at the bottom of the file and paste in these rules:

/*Mobile Devices*/
/*Phones*/
@media only screen and (max-device-width: 480px) {
body { min-width: 0px !important;}
.content-wrapper {width: auto; margin: 0px 15px;}
}
/*Tablets*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body { min-width: 0px !important;}
.content-wrapper {width: auto; margin: 0px 15px;}
}

Layouts 13, 14

Open your Page Builder CSS file: p7csspbm_13.css or p7csspbm_14.css

Make a new line at the bottom of the file and paste in these rules:

/*Mobile Devices*/
/*Phones*/
@media only screen and (max-device-width: 480px) {
body { min-width: 0px !important;}
.content-wrapper {width: 960px; margin: 0px 10px;}
.main-content {width: 518px;}
}
/*Tablets*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body { min-width: 0px !important;}
.content-wrapper {width: 960px; margin: 0px 10px;}
.main-content {width: 518px;}
}

Layouts 15, 16

Open your Page Builder CSS file: p7csspbm_15.css or p7csspbm_16.css

Make a new line at the bottom of the file and paste in these rules:

/*Mobile Devices*/
/*Phones*/
@media only screen and (max-device-width: 480px) {
body { min-width: 0px !important;}
.content-wrapper {width: 960px; margin: 0px 10px;}
.main-content, .sidebar1, .sidebar2 {width: 316px;}
}
/*Tablets*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body { min-width: 0px !important;}
.content-wrapper {width: 960px; margin: 0px 10px;}
.main-content, .sidebar1, .sidebar2 {width: 316px;}
}

Layouts 03-16

Use the CSS Page Builder Magic to create a test page inside the folder that contains your current p7csspbm assets folder. When you create the page, choose any layout between 03 and 16. After creating the test page, you can delete it. The system will generate a new asset folder named p7ehc, which contains the Equal Height Column script.

Open your page in Code View, then locate the p7mobile script link:

<script type="text/javascript" src="p7csspbm/p7mobile.js"></script>

Change the script link to:

<script type="text/javascript" src="p7ehc/p7EHCscripts.js"></script>

Adjust the path to the asset folder if it is not at the same level as your page.

Look for all instances of any of the following column DIV tags:

<div class="sidebar">
<div class="sidebar2">
<div class="main-content">

Add an additional p7ehc-1 class to each tag, so they look like this:

<div class="sidebar p7ehc-1">
<div class="sidebar2 p7ehc-1">
<div class="main-content p7ehc-1">

That's it. You are now up-to-date. Make sure you read through the updated user guide, particularly the CSS sections.