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.
View the finished example pages
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:
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.
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.
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.