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.

Metro-Chic: Morphing MetroplexThe amazing transformative nature of PVII CSS

The 5-Minute Metroplex Makeover

Give your menu a page-spanning gradient background with the menu centered inside. Remove the outer borders from your layout columns and round the inner corners. Round the corners of all images inside your content columns. Remove the outer borders around the footer. Top it off with an elegantly understated page background texture and the transformation is complete. Do it all in just a few moments with absolutely no coding.

Finished Example...

View the finished example pages

Required for this tutorial

This tutorial requires PVII Affinity and the Affinity Metroplex theme pack.

We've prepared a zip file containing a CSS file and page background image for you.

Download the metro-chic zip file

Unzip the file and place its contents inside the p7affinity folder in your Affinity site:

Create a Metroplex Page

Choose File > New PVII Page Pack > CSS Affinity

Select a Page Design, choose the Metroplex Style Theme and click Create.

Save your page in your current defined Dreamweaver site.

Attach the Metro-Chic CSS file

To complete the transformation, simply link the metro-chic.css file to your page.

Choose Format > CSS Styles > Attach Style Sheet

The Attach Style Sheet entry is below the list of CSS styles. Use the down arrow at the bottom of the list to scroll the menu down if necessary.

Browse to the metro-chic.css file in your p7affinity folder.

Make sure Add as Link is selected and click OK.

Tip: You can follow this same procedure for any of the 5 Metroplex Page Designs.

That's it. Enjoy your newly transformed page.

About Affinity Metroplex

An exciting addition to your Affinity Toolbox

Metroplex Theme Home Page | Metroplex Examples | Buy Metroplex Now ($45)

Affinity Metroplex extends the scope of your Affinity layout choices to include 5 exciting design layouts to meet a wide assortment of project requirements. Like all Affinity designs, Metroplex is mobile-ready and responsive.