Toggle Menu

Can this really be an Allegro page?

Absolutely. PVII CSS pages can wear many faces. We thought we'd show you a simple, yet striking makeover.

The pretty Allegro girl...

When we selected the image of the girl you see above, we were struck with her gaze. She is looking, we thought, at something that was at once familiar and perhaps a little surprising. That's a lot like what we see when we look at one of our page designs. A little burst of color here, a little modification to the flow, a new logo, and voila! A new design. That's what this showcase page is all about.

About this page...

This page began life as an Allegro Portal Page. We modified the Intro DIV to make it a single column that spans the full width of the page.

Select the Intro DIV in your default Allegro page, delete it, and replace it with the revised Intro DIV code below:

<div id="intro" class="allegro-row allegro-color-2">
<div class="column-group max-none">
<div class="allegro-column column-100">
Remove this text and Insert your Image Rotator here
</div>
</div>
</div>

Then we added an exception CSS rule that customizes the max-none properties to remove the rounded corners, width, and bottom white space:

.max-none {
margin-bottom: 0px !important;
border-radius: 0px !important;
width: auto;
}

We edited the logo DIV changing its background-color to white, its height to 4em, and the logo background-image to the dark variant:

#logo {
background-color: #FFF;
height: 4em;
background-image: url(/img/logo-dark.png);
}

Finally, we edited the root DMM09 rule to change the menu background to dark gray and the menu z-index to 9999:

.p7DMM09 {
background-color: #151515;
background: rgba(0,0,0,.85);
z-index: 9999;
}

Image rotator customizations

Not much to do here. The IRM2 widget on this page bears a single customization. We made the Paginator overlay the images, instead of being above them. Here is the rule:

.p7ir2-paginator {
width: 100%;
position: absolute;
top: 0px;
z-index: 99;
}

So, if you look really close, you can see the connection between this page and its Allegro roots. But, if you didn't know this page was based on Allegro, would you see the connection?

You'll never know, but we think this is a perfect disguise.

And in closing...

We hope you enjoy looking at this page. We think it's pretty cool.

In order to create this page, you'll need Allegro and Image Rotator Magic 2... and a little creative imagineering.

Happy designing!