Utopia: CSS and Image User Guide

Utopia
A Pop Menu Magic CSS PagePack™ by PVII
CSS and Image User Guide

© 2005 Project Seven Development. All Rights Reserved
This User Guide covers each style sheet included with the Utopia PagePack.
Style and Image guides:

1. 2-column fixed (vertical menu)
2. 3-column liquid (vertical menu)
3. 2-column liquid (horizontal menu)
4. 3-column liquid (horizontal menu)
5. PMM Menu styles
6. Image editing guide
Utopia by PVII Page 2 of 69
Fixed: 2-column – Vertical menu

utopia_fixed_vert.css
body {
background-color: #FFFFFF;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 16px 0 0 0;
padding: 0;
}
We set page background and text colors, font-family and size. Margin is set to 16px top
and padding to zero all around.
#layoutwrapper {
width: 700px;
margin: 0 auto;
}
The layout wrapper serves as the container for the two main content columns: mainbox
and navbar. It’s given a left, right, and bottom border.
We set width to 700px and then center the layout wrapper by setting its right and left
margins to auto.
Note: To center a box element with CSS, we simply need to assign that element a width and set its right and
left margins to auto. This technique is supported in all modern browsers, but not in IE5.x on Windows. For
those older browsers, we will use a workaround described at the end of this style sheet’s analysis.
Page 2 of 69
#mainbox {
width: 480px;
float: right;
margin: 64px 0 0 32px;
}
Mainbox is the containing box for the maincontent DIV, which is nested inside it. It is
floated to the right and given a width of 480px.
Floated elements are outside the normal page flow, making it possible to display
elements on the page in an order different from their order in the page source code. The
mainbox DIV comes before the navbar DIV in the page source code - but by floating
mainbox to the right, we can make the browser display it to the right of the navbar
column – which is floated to the left. We do this so that people looking at the page in a
browser see the menu on the left, while search engines and assistive readers "see" and
read the main content first. This is not to say that you will be the beneficiary of
miraculous placement on search engines just because your page is structured like this.
But it can't hurt, it might help, and it's a positive by-product of using CSS for positioning
that we might as well take advantage of it.
Now that we understand floating, let's note that we are also assigning a 64px top margin
and 32px left margin. The top margin pushes the mainbox down simply because we
think it looks better that way. The left margin serves to create a gap between the left
border of the mainbox DIV and the right border of the navbar DIV.
Note: Should you want to make this DIV wider, you must also make the layoutwrapper DIV wider by a like
amount.
h1, h2, h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #C0BA98;
}
We set font-family and color for the h1, h2, and h3 elements.
Note: if you’ll need to use H4 and/or H5 elements, simply append them to this multiple selector so that it
looks like this: h1, h2, h3, h4, h5 {property: value;}.
Page 3 of 69
h1 {
background-image: url(../images/utopia_vh1bg.gif);
background-repeat: no-repeat;
font-size: 1.5em;
font-weight: normal;
padding: 3px 12px;
margin: 0;
}
We set specific properties for the h1. The background image is what creates the
rounded top in the mainbox DIV.
Note: should you make the mainbox DIV wider, you’ll need to edit the background image to make it wider by
a like amount.
h2 {
background-color: #4A4A4A;
font-size: 1.4em;
padding: 3px 12px;
}
We set specific properties for the h2 element – including a dark gray background color.
h3 {
color: #333333;
padding: 0 24px;
margin: 24px 0 0 0;
}
We set specific properties for the h3 element.
Page 4 of 69
#maincontent {
border: 1px solid #4A4A4A;
font-size: .8em;
padding: 20px 0 0 0;
}
The maincontent DIV is nested inside mainbox and is the element that actually contains
the main content. We set a 1px border all around, a font-size, and padding on top.
#maincontent p {
margin: 6px 24px 12px 24px;
line-height: 1.5em;
}
We set margins for all paragraphs inside maincontent. We set left and right margins to
24px, to provide white space inside the maincontent’s borders. We set line-height to 1.5
ems for more comfortable reading.
Note: If you add new elements, such as unordered lists, to your maincontent area, and you want them to
align horizontally with your paragraphs, then create a new style rule and set left and right margin to 24px.
For example: #maincontent ul {margin: 0 24px;}.
.floatleftimg {
float: left;
margin: 0 14px 0 0;
}
This class is assigned to the flight attendant photo and causes it to float inside the
maincontent DIV so that text can flow around it. We set margin on the right to provide
some white space between the image and the surrounding text.
Tip: If you would prefer the image to float to the right of the column, and text to wrap left, then change the
left float property to right and set a margin on the left instead of the right side.
Page 5 of 69
#navbar {
width: 188px;
float: left;
}
The navbar DIV is the parent for several other DIVs, which are nested inside. The
nested DIVs are topimage, navigator, navwrapper, bottomimage, and sidecontent.
Navbar is given a width of 188px and floated left – so it renders to the left of mainbox.
Box model width calculation

Let’s pause for a moment and discuss how the widths of mainbox and leftbox relate to
the layout wrapper.
The layout wrapper is set to a width of 700px. In order for our layout to work, all of the
elements nested inside layout wrapper must be equal to (or less than) a total width of
700px. The CSS box model defines the visible width of a box as the sum of its stated
width plus padding and borders. Let’s add up the widths of the elements nested inside
the layout wrapper:
Mainbox has a declared width of 480px and a left margin of 32px which, though not part
of the visible box, is part of the space it occupies. The rendered width of mainbox is: 480
+ 32 = 512.
Navbar has a declared width of 188px. There are neither borders, padding, nor margins
assigned. The sum of mainbox and navbar equals the declared width of the layout
wrapper: 188 + 512 = 700.
Note: should you need to change the width, padding, or borders of the main or navbar boxes, be sure to
consult this section as a guide in recalculating your box model settings.
Page 6 of 69
#navigator {
width: 188px;
height: 36px;
background-image: url(../images/utopia_vnavigator.gif);
font-size: 1px;
}
This DIV contains the Navigator heading that precedes the main menu.
Height and width match the dimensions of the image, which is assigned as a non-
repeating background. Font-size is set to 1px to prevent browsers from expanding the
DIVs height if a user increases text size in his browser.
#navwrapper {
background-image: url(../images/utopia_vgradient.jpg);
background-repeat: repeat-y;
padding: 0 8px;
}
This element is the wrapper for the main navigation bar. We set a background image
that provides the gradient behind the menu and the thick (8px wide) dark gray borders
on either side. This image is set to repeat vertically, along the y-axis.
Padding is set to 8px left and right to enable the menu to clear the left and right borders.
Page 7 of 69
#bottomimage {
width: 188px;
height: 20px;
background-image: url(../images/utopia_bottomborder.jpg);
background-position: left bottom;
font-size: 1px;
}
This DIV carries the bottom of the navbar graphic – assigned as a non-repeating
background image.
Width and height are set to match the image’s dimensions. The background image is set
and positioned at the bottom left edge of the DIV.
Font-size is set to 1px to prevent browsers from expanding the DIVs height if a user
increases text size in his browser.
#sidecontent {
border: 2px dotted #DFDABD;
color: #ABA476;
font-size: 0.7em;
margin: 20px 12px;
padding: 16px;
}
This DIV contains the content box that appears below the main navbar. It’s assigned a
light wheat-colored 2px dotted border, dark wheat text color, and a relatively small font-
size. Margin is set to 20px top and bottom and 12px left and right. The margin serves to
offset the content box vertically from the navigation bar and to align it horizontally with
the menu bar. Padding is set to provide white space within the dotted borders.
#sidecontent h4 {margin: 0;}

We set margins to zero for all h4 elements inside the sidecontent box.
#sidecontent p {margin: 8px 0 12px 0;}
We set margins for all paragraphs inside the sidecontent box.
Page 8 of 69
#footer {
font-size: .7em;
margin: 0 24px 0 220px;
padding: 16px 0;
clear: both;
}
We set font-size to a small size. We set margins to align the footer’s left edge to the left
edge of mainbox. We set padding top and bottom and clear the floated elements above.
#maincontent a, #sidecontent a, #footer a {

color: #993300;
}
We use a multiple selector to set the default color for all links in the maincontent,
sidecontent, and footer boxes.
#maincontent a:visited, #sidecontent a:visited, #footer a:visited

{
color: #736B4D;
}
We set the visited color for all links in the maincontent, sidecontent, and footer boxes.
#maincontent a:hover, #sidecontent a:hover, #footer a:hover {

color: #000099;
}
We set the hover color for all links in the maincontent, sidecontent, and footer boxes.
Page 9 of 69
#maincontent a:active, .p7ie6Fix:active, #sidecontent a:active,

#footer a:active,
#maincontent a:focus, #sidecontent a:focus, #footer a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #C8805C;
}
We set the active and focus colors for all links in the maincontent, sidecontent, and
footer boxes. The active and focus states occur when a visitor reaches a link using his
keyboard instead of his mouse. By setting white text against a dark background color,
we provide extra visual feedback to help keyboard surfers see which link is selected.
Note: The p7ie6Fix:active selector fixes an IE6 bug that interferes with the active selector working when a
link is accessed with the keyboard tab key. This PVII fix enables IE6 to correctly light up the link.
#skiplinks {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
}
The skiplinks DIV houses special links that assist keyboard and blind visitors to skip over
or skip to important parts of the page. The skiplinks box is positioned absolutely at the
top left edge of the window. White-space is set to nowrap to keep all the links in the box
on the same line.
Note: Skip links are not links to other pages – they are links to sections of the current page. We can do this
by assigning the link a hash mark -#- followed by the ID of element we wish to skip to. For example, if we
want to skip to the main navbar, we assign the hyperlink: #p7PMnav. To skip to the sidebar, we assign the
hyperlink: #sidecontent.
.skips {
font-size: 0.85em;
color: #FFFFFF;
margin: 0;
}
The skips class is assigned to the paragraph or the unordered list that houses the page’s
skip links. In this layout, there are skip links at the top of the page (inside the skiplinks
box) and also in an unordered list below the sidecontent box.
We set font-size to .85em and color to white – to match the page background – and set
margin to zero.
Page 10 of 69
.skips a, .skips a:visited, .skips a:hover {

color: #FFFFFF;
cursor: default;
}
This multiple selector styles the default, visited, and hover states for all links inside
elements that are assigned the class skips. Color is set to match the page background,
text decoration (underlining) is turned off, and the cursor is set to default – to ensure that
if a visitor happens to mouse over the “invisible” links his cursor will not change to a
pointer.
Note: We do not want these links apparent unless they are accessed using the keyboard or an assistive
reader.
.skips a:active, .skips a:focus {

color: #FFFFFF;
}
The active and focus states apply to our skiplinks when they are reached using the
keyboard. We set the color to white over a dark background. When a keyboard surfer
reaches one these links, it will light up prominently.
#p7PMnav {
background-color: transparent;
font-size: .8em;
}
We need to turn off the background color of the root menu to allow the gradient
background assigned to the navwrapper element to show through. We set menu font
sizes.
Page 11 of 69
IE5 and 6 Fixes

We use a proprietary Microsoft feature called Conditional Comments to target specific
Windows-only browser versions with CSS workarounds. If you look in the head region of
your page, you'll find a Conditional Comment block. Let's examine it and see what it
does:

The first line begins the comment and sets the version to be targeted. In this case, the
comment targets all versions of IE5 – which spans IE5.0 through 5.99. Between the
opening and closing comment markers are a style tag pair. Whatever is contained inside
the comments will only be read by MSIE5.x Windows browsers. All other browsers will
ignore the code. The first thing we need to do is to make sure that IE5.x centers the
layoutwrapper DIV. We do this by setting text to align center for the body element. IE5
will now center everything on the page – not just text, but DIVs as well. So the second
rule sets text to align left inside the layoutwrapper – which remains centered.
The second Conditional Comment targets all IE Windows browsers that qualify as less
than or equal to IE6 – that is, all versions from IE5.0 through 6.99:

This works around a bug in IE that would cause the skiplink that targets the sidecontent
box to not work.
Page 12 of 69
Liquid: 3-column – Vertical menu

utopia_liquid_vert.css
body {
color: #333333;
font-size: 100%;
padding: 0;
margin: 0;
}
We set page background and text colors, font-family and size. Margin and padding are
set to zero all around.
#layoutwrapper {
margin: 0;
padding: 0;
}
The layout wrapper serves as the container for all page elements except for the skiplinks
box and the footer. Margin and padding are set to zero.
Page 13 of 69
#navbar {
width: 188px;
position: absolute;
top: 30px;
left: 16px;
z-index: 20000;
}
The navbar DIV is the parent for several other DIVs, which are nested inside. The
nested DIVs are topimage, navigator, navwrapper, bottomimage, and sidecontent.
Navbar is given a width of 188px and positioned absolutely – so it renders 30px from the
top edge and 16px from the left edge of the window. Z-index is set to a high number to
work around bugs in IE5 Mac.
#navigator {
width: 188px;
height: 36px;
background-image: url(../images/utopia_vnavigator.gif);
font-size: 1px;
}
This DIV contains the Navigator heading that precedes the main menu.
Height and width match the dimensions of the image, which The is assigned as a non-
repeating background. Font-size is set to 1px to prevent browsers from expanding the
DIVs height if a user increases text size in his browser.
#navwrapper {
background-image: url(../images/utopia_vgradient.jpg);
padding: 0 8px;
}
This element is the wrapper for the main navigation bar. We set a background image
that provides the gradient behind the menu and the thick (8px wide) dark gray borders
on either side. This image is set to repeat vertically, along the y-axis.
Padding is set to 8px left and right to enable the menu to clear the left and right borders.
Page 14 of 69
#bottomimage {
width: 188px;
height: 20px;
background-image: url(../images/utopia_bottomborder.jpg);
background-position: left bottom;
font-size: 1px;
}
This DIV carries the bottom of the navbar graphic – assigned as a non-repeating
background image.
Width and height are set to match the image’s dimensions. The background image is set
and positioned at the bottom left edge of the DIV.
Font-size is set to 1px to prevent browsers from expanding the DIVs height if a user
increases text size in his browser.
#sidecontent {
font-size: 0.75em;
margin: 0 8px;
padding: 16px;
color: #A69F75;
border: 2px dotted #D1CCAF;
}
This DIV contains the content box that appears below the main navbar. It’s assigned a
light wheat-colored 2px dotted border, dark wheat text color, and a relatively small font-
size. Margin is set to 12px left and right. The margin serves to align sidecontent
horizontally with the menu bar. Padding is set to provide white space within the dotted
borders.
Page 15 of 69
#centerbox {
position: relative;
padding: 60px 0 0 0;
margin: 0 0 0 220px;
min-width: 500px;
}
Centerbox contains both the maincontent and rightbox DIVs, which are positioned inside
it. We assign top padding of 60px so that the tops of both maincontent and rightbox start
60px from the top of centerbox. Left margin is set to 200px allowing centerbox to clear
the navbar DIV.
We set min-width to 500px, which sets a limit on how narrow centerbox can become as
the browser window is resized - preventing the layout from breaking or becoming
unreadable.
Note: Why did we choose 500px? While this value might seem unusually small, it really isn’t. The centerbox
element is nested inside layoutwrapper and contains the maincontent and the rightbox elements. The
centerbox DIV is assigned a left margin of 220px, which, while not a part of the visible box, must be factored
into centerbox’s overall width – the space it occupies. When you add centerbox’s left margin value to our
declared min-width, the result is 720px – which is our actual minimum width.
#maincontent {
margin: 0 185px 0 0;
border: 1px solid #4A4A4A;
font-size: .8em;
}
Maincontent is given a right margin of 185px, which will leave a space to the right for us
to absolutely position rightbox. We assign a 1px border all around and set font-size to
.8em.
We assign no width, so as the browser window is resized, maincontent will expand to the
full width available – and contract down to the min-width setting of 500px.
Page 16 of 69
#maincontent p {
margin: 6px 0 12px 0;
padding: 0 24px;
line-height: 1.5em;
}
We assign margins for all paragraphs inside maincontent. We set 24px of left and right
padding to provide some white space inside maincontent’s borders. We set line-height to
1.5em for more comfortable reading.
Note: If you add new elements, such as unordered lists, to your maincontent area, and you want them to
align horizontally with your paragraphs, then create a new style rule and set left and right margin to 24px.
For example: #maincontent ul {margin: 0 24px;}.
.floatleftimg {
float: left;
margin: 0 14px 0 0;
}
This class is assigned to the flight attendant photo and causes it to float inside the
maincontent DIV so that text can flow around it. We set margin on the right to provide
some white space between the image and the surrounding text.
Tip: If you would prefer the image to float to the right of the column, and text to wrap left, then change the
left float property to right and set a margin on the left instead of the right side.
h1, h2, h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #C0BA98;
}
We set font-family and color for the h1, h2, and h3 elements.
Note: if you’ll need to use H4 and/or H5 elements, simply append them to this multiple selector so that it
looks like this: h1, h2, h3, h4, h5 {property: value;}.
Page 17 of 69
h1 {
font-size: 1.5em;
padding: 3px 12px;
margin: 0;
}
h2 {
font-size: 1.4em;
padding: 3px 12px;
}
h3 {
color: #333333;
padding: 0 0 0 24px;
margin: 24px 0 0 0;
}
Page 18 of 69
#rightbox {
width: 150px;
position: absolute;
top: 60px;
right: 15px;
color: #ABA476;
font-size: .75em;
}
Right box is given a width of 150px and positioned absolutely – relative to its parent
container: centerbox. We set rightbox to display 60px from centerbox’s top edge and
15px from centerbox’s right edge. We also set font color and size.
Note: If you edit rightbox’s width, make sure to also edit maincontent’s right margin proportionally. That is, if
you increase rightbox’s width by 20px, you must decrease maincontent’s right margin by 20px.
#rightbox h4 {
margin: 0;
}
We set margin to zero for all h4 elements inside rightbox.
#rightbox p {
}
We assign margins to all paragraphs inside rightbox.
Page 19 of 69
#footer {
font-size: .7em;
padding: 16px 0;
margin: 0 0 0 220px;
}
We set font-size to a small size. We set padding top and bottom. We set left margin to
align the footer’s left edge to the left edge of centerbox.
#maincontent a, #rightbox a, #sidecontent a, #footer a {

color: #993300;
}
We use a multiple selector to set the default color for all links in the maincontent,
rightbox, sidecontent, and footer boxes.
#maincontent a:visited, #rightbox a:visited, #sidecontent

a:visited, #footer a:visited {
color: #736B4D;
}
We set the visited color for all links in the maincontent, rightbox, sidecontent, and footer
boxes.
#maincontent a:hover, #rightbox a:hover, #sidecontent a:hover,

#footer a:hover {
color: #000099;
}
We set the hover color for all links in the maincontent, rightbox, sidecontent, and footer
boxes.
Page 20 of 69
#maincontent a:active, .p7ie6Fix:active, #rightbox a:active,

#sidecontent a:active, #footer a:active,
#maincontent a:focus, #rightbox a:focus, #sidecontent a:focus,
#footer a:focus {
color: #FFFFFF;
background-color: #C8805C;
}
We set the active and focus colors for all links in the maincontent, rightbox, sidecontent,
and footer boxes. The active and focus states occur when a visitor reaches a link using
his keyboard instead of his mouse. By setting white text against a dark background
color, we provide extra visual feedback to help keyboard surfers see which link is
selected.
#skiplinks {
position: absolute;
left: 0;
top: 0;
}
on the same line.
Page 21 of 69
.skips {
font-size: 0.85em;
color: #FFFFFF;
margin: 0;
}
The skips class is assigned to the paragraph or the unordered list that houses the page’s
skip links. In this layout, there are skip links at the top of the page (inside the skiplinks
box) and also in an unordered list below the sidecontent box.
We set font-size to .85em and color to white – to match the page background – and set
margin to zero.

color: #FFFFFF;
cursor: default;
}
pointer.
reader.

color: #FFFFFF;
}
#p7PMnav {
background-color: transparent;
font-size: .8em;
}
We need to turn off the background color of the root menu to allow the gradient
background assigned to the navwrapper element to show through. We set menu font
size.
Page 22 of 69
IE5 and 6 Fixes

does:

version uses a qualifier “lte” that targets all versions less than or equal to IE6 - which
spans IE5.0 through 6.99. Between the opening and closing comment markers are a
style tag pair. Whatever is contained inside the comments will only be read by MSIE5.x
and 6.x Windows browsers. All other browsers will ignore the code. The first rule sets all
DIVS to a height of 1em, allowing IE to properly navigate skiplinks within the page.
The centerbox rule contains a CSS expression. It's a special rule that uses another
proprietary Microsoft feature called "CSS Expressions", which are mini scripts that act on
specific elements. In this case, the script is acting on the centerbox DIV and sets a
minimum width of 500px. If you want to change the minimum width, change both
instances of "500" to a new value (both values must be the same).
Note: The expression, as displayed in this text document, breaks to 3 lines. In your actual web document
source code, the entire expression (everything between the opening and closing curly braces "{ }" must be
on a single line.
Page 23 of 69
Liquid: 2-column – Horizontal menu

utopia_2colhz.css
body {
background-color: #9E8E81;
color: #333333;
font-size: 100%;
margin: 0;
padding: 0;
}
#topspace {
height: 2em;
}
This DIV is the first element inside the body and is used the create the sepia brown band
across the top of the page. Height is set in em units to ensure that it expands in height if
a visitor resizes her browser’s text.
Note: This is important because the skiplinks box is absolutely positioned at the top left edge of the window.
If the topspace element’s height were fixed, then the skip links could spill out of the brown band and overlap
the page content.
#layoutwrapper {
margin: 0;
min-width: 750px;
}
box. Margin is set to zero.
We set min-width to 750px, which sets a limit on how narrow the layout can become as
the browser window is resized. A browser width less than 750px will cause horizontal
scrollbars to appear, thus preventing the layout from condensing to the point where it will
break apart – or become unreadable.
Page 24 of 69
#menuwrapper {
background-color: #525252;
background-image: url(../images/utopia_hzpbg.jpg);
background-repeat: repeat-x;
padding: 0 0 1px 188px;
border-top: 1px solid #000000;
font-size: 0.8em;
}
The menuwrapper DIV is the container for our main navigation bar. We set a dark gray
background color and an x-tiling (repeating) background image:
The image tiles along the x-axis, creating a page spanning dark gray, beveled band. We
set bottom padding to 1px to leave a little space between the bottom of the root menu
items and the gray band. We set left padding to 188px which perfectly aligns the left
edge of the first root menu item (Reservations) with the right edge of the rectangle that
connects the logo to the beveled band:
We set a 1px black border on top. Font-size, .8em, becomes the font-size for all menu
items.
Tip: If you want to change menu font size, edit the font-size in this rule.
Page 25 of 69
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
Because root level menu items are floated to make them display horizontally, we need to
clear that float in order for the menuwrapper to extend the full height of the actual root
menu items. To do this, we place a BR tag with the clearit class assigned to it, just after
the closing UL tag for our menu and just before the closing DIV tag for menuwrapper:
</ul>
<br class="clearit">
</div>
We set clear to a value of both. Height and line-height are set to zero to ensure that this
special BR has no rendered height that could affect our layout. IE Windows also needs
font-size set to 1px – to keep the BR from expanding.
#layoutTable td {
vertical-align: top;
}
We set all table cells in our layoutTable to vertically align their content top – and to have
a white background.
Page 26 of 69
#logocell {
width: 236px;
}
This table cell carries the logo and is set to the logo image’s actual width.
Note: If you edit the logo’s width, be sure to make a corresponding change to the width value in this rule.
#logocell h1 {
margin: 0;
}
We’ve wrapped the logo image inside an h1 element and set that h1 element’s margins
to zero to ensure the image is snug inside the cell.
#maincontent {
padding: 40px 24px 24px 24px;
font-size: .9em;
line-height: 1.5em;
}
The maincontent cell is assigned padding, font-size, and line-height.
p {
}
We assign margins for all paragraphs on the page.
Page 27 of 69
#sidebar {
width: 150px;
color: #9D966C;
font-size: 0.75em;
background-image: url(../images/utopia_hzVrule.gif);
}
The sidebar table cell is assigned a fixed width, padding, text color, font-size, and a y-
repeating background image that creates a neatly dashed border on the left.
h1, h2, h3, h4 {

line-height: normal;
color: #545454;
margin: 0;
}
We assign line-height, color, and margin to all h1, h2, h3, and h4 elements. Line-height
is set to normal to counteract the 1.5em line-height assigned to the maincontent cell.
1.5em is too small a setting for headings and would cause problems if your headings
wrapped to multiple lines.
h2, h3, h4 {
margin: 30px 0 0 0;
}
We set a top margin for all h2, h3, and h4 elements.
h1 {font-size: 1.6em;}
We set font-size for h1 elements.
Page 28 of 69
h4 {font-size: 1em;}
#sidebar h2, #sidebar h3, #sidebar h4 {

margin: 0;
color: #C2BC9C;
}
We set specific properties for h2, h3, and h4 elements inside the sidebar cell.
.footer-row {
font-size: 0.75em;
color: #ECE9D8;
background-color: #9E8E81 !important;
}
This class is assigned to both table cells in the table row that contains the footer. We set
font-size, padding, color, background color, and a top border.
Page 29 of 69
#maincontent a, #sidebar a {
color: #993300;
}
We set color for default links in the maincontent and sidebar cells.
#maincontent a:visited, #sidebar a:visited {

color: #736B4D;
}
We set color for visited links in the maincontent and sidebar cells.
#maincontent a:hover, #sidebar a:hover {

color: #000099;
}
We set color for hover links in the maincontent and sidebar cells.
#maincontent a:active, .p7ie6Fix:active, #sidebar a:active,

#maincontent a:focus, #sidebar a:focus {
color: #FFFFFF;
background-color: #907D6D;
}
We set the active and focus colors for all links in the maincontent and sidebar cells. The
active and focus states occur when a visitor reaches a link using his keyboard instead of
his mouse. By setting white text against a dark background color, we provide extra visual
feedback to help keyboard surfers see which link is selected.
Page 30 of 69
#footer a {
color: #FFFFFF;
}
#footer a:visited {
color: #ECE9D8;
}
#footer a:hover {
color: #4F4F4F;
}
.p7ie6Fix:active, #footer a:active, #footer a:focus {

color: #FFFFFF;
}
We set the active and focus colors for all links in the maincontent and sidebar cells.
Page 31 of 69
#skiplinks {
position: absolute;
left: 0;
top: 0;
}
on the same line.
.skips {
font-size: 0.85em;
color: #9E8E81;
}
The skips class is assigned to the paragraph that houses the page’s skip links. We set
font-size to .85em and a color to match the page background.

color: #9E8E81;
cursor: default;
}
pointer.
reader.
Page 32 of 69

color: #FFFFFF;
}
/* The single backslash \ character inside this comment

causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
*/
#p7PMnav li {width: auto;}
Our horizontal menu is using the variable width root menu item technique. This
technique requires setting the #p7PMnav li element’s width to auto. IE5 Mac does not
support this, so the comment above the rule hides the rule from that browser.
You can learn all about the variable width root menu technique by visiting the online Pop
Menu Magic User guide.
Page 33 of 69
IE5 and 6 Fixes

does:

and 6.x Windows browsers. All other browsers will ignore the code.
The first two rules, #p7PMnav a and #p7PMnav ul a are required parts of the variable
width root menu item technique (See Pop Menu Magic User Guide for complete details).
Setting #menuwrapper and #maincontent height to 1em fixes layout rendering issues.
The layoutwrapper rule contains a CSS expression. It's a special rule that uses another
specific elements. In this case, the script is acting on the layoutwrapper DIV and sets a
on a single line.
Setting #p7PMnav li to no wrap prevents IE from wrapping the root level menu items
when the browser window gets too narrow. The last rule, #p7PMnav ul li, sets wrapping
back to normal to ensure that the sub-menu items do wrap when needed.
Page 34 of 69
Liquid: 3-column – Horizontal menu

utopia_3colhz.css
body {
color: #333333;
font-size: 100%;
margin: 0;
padding: 0;
}
#topspace {
height: 2em;
}
This DIV is the first element inside the body and is used the create the sepia brown band
across the top of the page. Height is set in em units to ensure that it expands in height if
a visitor resizes her browser’s text.
Note: This is important because the skiplinks box is absolutely positioned at the top left edge of the window.
If the topspace element’s height were fixed, then the skip links could spill out of the brown band and overlap
the page content.
#layoutwrapper {
margin: 0;
min-width: 750px;
}
box. Margin is set to zero.
We set min-width to 750px, which sets a limit on how narrow the layout can become as
the browser window is resized. A browser width less than 750px will cause horizontal
scrollbars to appear, thus preventing the layout from condensing to the point where it will
break apart – or become unreadable.
Page 35 of 69
#menuwrapper {
background-color: #525252;
background-image: url(../images/utopia_hzpbg.jpg);
padding: 0 0 1px 188px;
font-size: 0.8em;
}
The menuwrapper DIV is the container for our main navigation bar. We set a dark gray
background color and an x-tiling (repeating) background image:
The image tiles along the x-axis, creating a page spanning dark gray, beveled band. We
set bottom padding to 1px to leave a little space between the bottom of the root menu
items and the gray band. We set left padding to 188px which perfectly aligns the left
edge of the first root menu item (Reservations) with the right edge of the rectangle that
connects the logo to the beveled band:
We set a 1px black border on top. Font-size, .8em, becomes the font-size for all menu
items.
Tip: If you want to change menu font size, edit the font-size in this rule.
Page 36 of 69
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
Because root level menu items are floated to make them display horizontally, we need to
clear that float in order for the menuwrapper to extend the full height of the actual root
menu items. To do this, we place a BR tag with the clearit class assigned to it, just after
the closing UL tag for our menu and just before the closing DIV tag for menuwrapper:
</ul>
<br class="clearit">
</div>
We set clear to a value of both. Height and line-height are set to zero to ensure that this
special BR has no rendered height that could affect our layout. IE Windows also needs
font-size set to 1px – to keep the BR from expanding.
#layoutTable td {
vertical-align: top;
}
We set all table cells in our layoutTable to vertically align their content top – and to have
a white background.
Page 37 of 69
#logocell {
width: 236px;
}
This table cell carries the logo and is set to the logo image’s actual width.
Note: If you edit the logo’s width, be sure to make a corresponding change to the width value in this rule.
#logocell h1 {
margin: 0;
}
We’ve wrapped the logo image inside an h1 element and set that h1 element’s margins
to zero to ensure the image is snug inside the cell.
#newsbar {
font-size: 0.75em;
margin: 0 0 0 30px;
padding: 16px;
color: #A69F75;
text-align: right;
border-right: 1px solid #D1CCAF;
border-bottom: 1px solid #D1CCAF;
}
Newsbar is the content area below the logo. It’s a DIV that is nested inside the logocell
table cell. We set font-size, a left margin, padding, color, text alignment, and a border on
the right and bottom.
#maincontent {
font-size: .9em;
line-height: 1.5em;
}
The maincontent cell is assigned padding, font-size, and line-height.
Page 38 of 69
p {
}
We assign margins for all paragraphs on the page.
#sidebar {
width: 150px;
color: #9D966C;
font-size: 0.75em;
background-image: url(../images/utopia_hzVrule.gif);
}
The sidebar table cell is assigned a fixed width, padding, text color, font-size, and a y-
repeating background image that creates a neatly dashed border on the left.
h1, h2, h3, h4 {

line-height: normal;
color: #545454;
margin: 0;
}
We assign line-height, color, and margin to all h1, h2, h3, and h4 elements. Line-height
is set to normal to counteract the 1.5em line-height assigned to the maincontent cell.
1.5em is too small a setting for headings and would cause problems if your headings
wrapped to multiple lines.
h2, h3, h4 {
margin: 30px 0 0 0;
}
We set a top margin for all h2, h3, and h4 elements.
Page 39 of 69
h4 {font-size: 1em;}
#sidebar h2, #sidebar h3, #sidebar h4 {

margin: 0;
color: #C2BC9C;
}
We set specific properties for h2, h3, and h4 elements inside the sidebar cell.
.footer-row {
font-size: 0.75em;
color: #ECE9D8;
background-color: #9E8E81 !important;
}
This class is assigned to both table cells in the table row that contains the footer. We set
font-size, padding, color, background color, and a top border.
Page 40 of 69
#maincontent a, #sidebar a, #newsbar a {

color: #993300;
}
We set color for default links in the maincontent, sidebar, and newsbar areas.
#maincontent a:visited, #sidebar a:visited, #newsbar a:visited {

color: #736B4D;
}
We set color for visited links in the maincontent, sidebar, and newsbar areas.
#maincontent a:hover, #sidebar a:hover, #newsbar a:hover {

color: #000099;
}
We set color for hover links in the maincontent, sidebar, and newsbar areas.
#maincontent a:active, #maincontent a:focus,.p7ie6Fix:active,

#sidebar a:active, #sidebar a:focus,
#newsbar a:active, #newsbar a:focus {
color: #FFFFFF;
}
We set the active and focus colors for all links in the maincontent, sidebar, and newsbar
areas. The active and focus states occur when a visitor reaches a link using his
keyboard instead of his mouse. By setting white text against a dark background color,
we provide extra visual feedback to help keyboard surfers see which link is selected.
Page 41 of 69
#footer a {
color: #FFFFFF;
}
#footer a:visited {
color: #ECE9D8;
}
#footer a:hover {
color: #4F4F4F;
}
.p7ie6Fix:active, #footer a:active, #footer a:focus {

color: #FFFFFF;
}
We set the active and focus colors for all links in the maincontent and sidebar cells.
Page 42 of 69
#skiplinks {
position: absolute;
left: 0;
top: 0;
}
on the same line.
.skips {
font-size: 0.85em;
color: #9E8E81;
}
The skips class is assigned to the paragraph that houses the page’s skip links. We set
font-size to .85em and a color to match the page background.

color: #9E8E81;
cursor: default;
}
pointer.
reader.
Page 43 of 69

color: #FFFFFF;
}
/* The single backslash \ character inside this comment

causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
*/
#p7PMnav li {width: auto;}
Our horizontal menu is using the variable width root menu item technique. This
technique requires setting the #p7PMnav li element’s width to auto. IE5 Mac does not
support this, so the comment above the rule hides the rule from that browser.
You can learn all about the variable width root menu technique by visiting the online Pop
Menu Magic User guide.
Page 44 of 69
IE5 and 6 Fixes

does:

and 6.x Windows browsers. All other browsers will ignore the code.
The first two rules, #p7PMnav a and #p7PMnav ul a are required parts of the variable
width root menu item technique (See Pop Menu Magic User Guide for complete details).
Setting #menuwrapper and #maincontent height to 1em fixes layout rendering issues.
The layoutwrapper rule contains a CSS expression. It's a special rule that uses another
specific elements. In this case, the script is acting on the layoutwrapper DIV and sets a
on a single line.
Setting #p7PMnav li to no wrap prevents IE from wrapping the root level menu items
when the browser window gets too narrow. The last rule, #p7PMnav ul li, sets wrapping
back to normal to ensure that the sub-menu items do wrap when needed.
Page 45 of 69
Pop Menu Magic Utopia Style Sheet – Vertical Menu

p7pmv18.css
#p7PMnav {
margin: 0;
padding:0;
background-color: #DDDAC7;
}
The top-level or “root” menu. Left margin, right margin, left padding, and right padding
must always remain set to zero. We set a background color for the root menu.
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
}
Menu list items. This rule styles all list items. Margin and padding must remain set to
zero and list-style-type, which turns off bullets, must remain set to none.
#p7PMnav ul {
margin: 0;
padding: 0;
z-index: 10000;
border-top: 1px solid #C0BA98;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 6px solid #C0BA98;
background-color: #DAD7C2;
}
This rule styles the sub-menus. Margin and padding are set to zero and should not be
changed. Z-index must remain set to 10000. Background color and border colors can be
changed to suit.
Page 46 of 69
#p7PMnav a {
display: block;
line-height:1;
color: #333333;
}
This is the top-level (root) menu link style. You should not edit the first three properties.
The top and bottom padding properties can be edited to make the link “box” taller or
shorter. Left and right padding can be carefully adjusted to suit. Color is matched to the
menu style but can be edited.
#p7PMnav ul a {
padding: 4px 12px;
}
We change the left and right padding values for the sub-menus.
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {

background-color: #C0BA98;
color: #FFFFFF;
letter-spacing: 0.01px;
}
This rule styles the hover, active, and focus link states for the top-level (root) menu
items. The letter-spacing property is used to fix a bug in IE5 Mac and should not be
edited.
#p7PMnav .p7PMmark {
font-weight: bold;
}
This rule styles only the link(s) that correspond to the currently loaded page – a sort of
“you are here” marker.
Page 47 of 69
#p7PMnav .p7PMtrg{
background-image: url(img/p7PM_dark_east.gif);
background-position: right center;
}
This rule styles the trigger links – those links which, when moused over, cause a sub-
menu to drop down or fly out and also the “on” state links – trigger links that are currently
showing their sub-menus. The background image assigned with this rule is a black right-
pointing arrow.
#p7PMnav .p7PMon {
background-color: #C0BA98;
color: #FFFFFF;
}
This rule styles the “on” state. The “on” state is assigned to trigger links while their
related sub-menus are being shown.
#p7PMnav .p7PMhide {
left: -9000px;
border: 0;
}
This rule is used by the PMM system to show your sub-menus. Do not edit it in any way.
#p7PMnav .p7PMshow {
left: auto;
z-index: 20000 !important;
}
This rule is used by the PMM system to hide your sub-menus. Do not edit it in any way.
Page 48 of 69
#p7PMnav {
width: 100%;
}
This rule sets the width for your top-level (root) menu. The Ennergi style sheets override
this width so if you need to adjust the width, do so in the relevant Ennergi style sheet.
#p7PMnav ul {
width: 12.3em;
}
This rule sets the width for all sub-menus. If you prefer a fixed width for your sub-menus,
use a pixel value.
Note: The odd number is used because of bugs in Dreamweaver Design View. If you make the sub-menus
wider, Dreamweaver uses the IE Windows box model and your floated navbar will drop below your main
content. This is only an issue in Dreamweaver Design View. All browsers will display correctly.
#pmmcrumb {
font-weight: bold;
margin-bottom: 16px;
color: #333333;
}
#pmmcrumb a, #pmmcrumb a:visited {
color: #5A69A5;
}
#pmmcrumb a:hover, #pmmcrumb a:active, #pmmcrumb a:focus {
color: #333333;
}
The above 3 rules relate to the optional PMM Breadcrumb Trail add-on. If you do not use
the Breadcrumb Trail, these rules have no affect on your page.
Page 49 of 69
Pop Menu Magic Utopia Style Sheet – Horizontal Menu

p7pmh18.css
#p7PMnav {
margin: 0;
padding:0;
}
The top-level or “root” menu. Left margin, right margin, left padding, and right padding
must always remain set to zero.
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
}
Menu list items. This rule styles all list items. Margin and padding must remain set to
zero and list-style-type, which turns off bullets, must remain set to none.
#p7PMnav ul {
margin: 0;
padding: 0;
position: absolute;
left: -9000px;
z-index: 10000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
background-image: url(../images/utopia_subbbg.jpg);
background-color: #6F6F6F;
}
This rule styles the sub-menus. The first five declarations (margin to z-index) should not
be changed. Background color, image, and border colors can be changed to suit.
Page 50 of 69
#p7PMnav ul ul {
border: 1px solid #000000;
}
This rule describes the second level sub-menus. We’re adding a border all around –
including the top.
#p7PMnav a {
display: block;
line-height:1;
border-left: 1px solid #505050;
padding: 4px 10px;
color: #333333;
background-image: url(../images/utopia_bbg.jpg);
}
This is the top-level (root) menu link style. You should not edit the first four properties.
The top and bottom padding properties can be edited to make the link “box” taller or
shorter. Left and right padding can be carefully adjusted to suit. Color and background
image are matched to the menu style but can be edited.
#p7PMnav ul a {
background-image: none;
color: #D0CCB3;
border-left: 0;
}
This rule describes the link items in the sub-menus. We turn off the background image to
allow the dark gray gradient to show through. We change the color value to work with
the darker gray background and we turn off the left border.
Page 51 of 69
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {

background-image: url(../images/utopia_subbbg.jpg);
color: #D0CCB3;
letter-spacing: 0.01px;
}
This rule styles the hover, active, and focus link states for the top-level (root) menu
items. The letter-spacing property is used to fix a bug in IE5 Mac and should not be
edited.
#p7PMnav ul a:hover, #p7PMnav ul a:active, #p7PMnav ul a:focus {

background-image: none;
background-color: #CAC5A8;
color: #000000;
}
This rule styles the hover, active, and focus link states for the sub-menu items. We turn
off the background image, replace it with a background color, and change the text color.
#p7PMnav .p7PMmark {
font-weight: bold;
}
This rule styles only the link(s) that correspond to the currently loaded page – a sort of
“you are here” marker.
#p7PMnav .p7PMon {
color: #D0CCB3;
}
This rule styles the “on” state. The “on” state is assigned to trigger links while their
related sub-menus are being shown.
Page 52 of 69
#p7PMnav ul .p7PMon {
background-color: #CAC5A8;
color: #333333;
}
This rule styles the “on” state for the sub-menu items.
#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7Pmon {

background-image: url(img/p7PM_dark_east.gif);
background-position: right center;
}
This rule styles the trigger links for the sub-menus – those links which, when moused
over, cause a sub-menu to drop down or fly out and also the “on” state links – trigger
links that are currently showing their sub-menus. The background image assigned with
this rule is a black right-pointing arrow.
#p7PMnav .p7PMhide {
left: -9000px;
}
This rule is used by the PMM system to show your sub-menus. Do not edit it in any way.
#p7PMnav .p7PMshow {
left: auto;
z-index: 20000 !important;
}
This rule is used by the PMM system to hide your sub-menus. Do not edit it in any way.
Page 53 of 69
#p7PMnav li {
float: left;
width: 104px;
}
This rule sets the width for your top-level (root) menu items. Do not change the float
property. Edit the width judiciously as this determines the width of each top-level (root)
menu item.
Note: The Utopia Page Pack pages use the PMM Variable Width Root Menu technique from the online
PMM User Guide and this rule is overwritten in the Page Pack style sheet. Do not edit this rule in the
p7pmh18.css style sheet.
#p7PMnav ul li {
Float: none;
}
We’re turning off the float for sub-menu list items.
#p7PMnav ul, #p7PMnav ul li {

width: 13em;
}
We set the width for the sub-menus.
#pmmcrumb {
font-weight: bold;
margin-bottom: 16px;
color: #333333;
}
#pmmcrumb a, #pmmcrumb a:visited {
color: #5A69A5;
}
#pmmcrumb a:hover, #pmmcrumb a:active, #pmmcrumb a:focus {
color: #333333;
}
The above 3 rules relate to the optional PMM Breadcrumb Trail add-on. If you do not use
the Breadcrumb Trail, these rules have no affect on your page.
Page 54 of 69
Image Guide
Modifying the Utopia PNG

Moving counterclockwise around the PNG file, the elements are:
1. a Fixed-Width Background shape

2. a Logo consisting of:
text on a path
a ring
a specially prepared image inside the ring
an image name/title
3. a rectangle that connects the logo and navbar
4. a Navbar consisting of:
the base-a gradient filled rectangle with a heavy stroke
a gradient filled, navbar topper with label
two lines, light and dark, that create an engraved effect between the base
rectangle and the navbar topper
5. a Photo with:
a dashed border
a label
Figure 1: The Utopia PNG
Page 55 of 69
To change the color of the Fixed-Width background shape

-Click on the shape to select it.
-Click in the Fill Color box on the Property inspector to open a Swatches pop-up.
-Use the built in color picker to select a new color swatch.
Figure 2: Picking a new color
Use the same method to change the color of the ring/navbar connector rectangle.
Customizing the Logo

Text on a path
To stay consistent with the period style of the design, we chose a beautiful, easily
scaled, Art Deco font by Charles Gibbons, called Aphasia. The font is published by
Bitstream. You can buy it at www.myfonts.com/fonts/bitstream/aphasia/. Other fonts that
would work well are Newport Classic SG, Blakeley. You’ll also find some suitable Nick
Curtis fonts at www.moorstation.org/typoasis/designers/curtis/index.htm.
Figure 3: Aphasia
The Script font we used is Ed Benguiat’s Edwardian Script. Edwardian Script is installed
by many Microsoft programs. If you don’t have it available, and don’t want to buy it,
many terrific freeware alternatives are available at http://www.dafont.com/en/. Search
the Script section of the site.
Page 56 of 69
The text in the PNG file is a Bitmap. To replace it with your own:
-Select the text it by clicking on it, and then open the Layers panel.
-Hide the text by clicking on the eye icon next to its thumbnail
-Select the vector ellipse tool and drag out a circle.
-Set the size of the circle by typing the number 183 in both the W and H boxes in the
Property inspector.
-Select a font and type the words you want to use.
-Move the text to the top of the circle.
-Press Shift and select both the text and the circle.
-Choose Text > Attach to Path.
To adjust the placement of the text on the path, enter a positive number into the Path
Offset box in the Property inspector.
Figure 4: Path offset box
Page 57 of 69
The Ring
To change the color of the ring,
-Use the built in color picker to select a new color swatch
If you would like the ring thicker or thinner, adjust the stroke width in the Property
inspector.
Figure 5: Adjusting the Stroke width
The image inside the ring
First you’ll clone the ring, and then you’ll paste a photo inside the clone. To finish, you’ll
apply a soft fade to the edges of the photo.
-Hide the original photo by clicking on the eye icon next to its thumbnail in the Layers
panel.
-Click on the ring to select it and choose Edit > Clone
-Remove the stroke from the ring by clicking on the down arrow of the Stroke Category
selector in the Property inspector and choosing None
-Place the photo you’ve chosen on top of the ring clone
-Choose Edit > Cut to cut the image to the system clipboard
-With the ring clone selected, choose Edit > Paste Inside.
To reposition the image inside the ring clone,
-Click on the image thumbnail in the Layers panel to bring up the blue move handle
-Drag on the move handle to reposition the photo.
Figure 6: Repositioning the image inside the ring
Page 58 of 69
To fade the edges of the photo,
-Click on the photo mask group to select it

-Choose Commands > Creative > Fade Image.
-Select the circular fade (the first button in the second row of the Fade Image dialog
box).
To finish, position the photo mask group evenly over the original ring. To move it below
the ring,
-In the Layers panel, click on the thumbnail of the mask group and drag it below the
thumbnail of the ring.
Page 59 of 69
Modifying the gradients of the Navbar Topper, and the Root

menu y-tile background
You can edit the current gradient fills by clicking any Fill Color box, and then using the
Edit Gradient pop-up window. To open the Edit Gradient pop-up window:
-Select the Navbar Topper or the Root menu y-tile background.

-Click the Fill Color box in the Property inspector or Tools panel to open a Swatches
pop-up.
The Edit Gradient pop-up window opens with the current gradient in the color ramp. To
change the colors,
-Click one of the two color swatches

-Choose a color from the Swatches pop-up window.
-Click on the remaining color swatch and choose a color from the Swatches pop-up
window.
Figure 7: The Gradient editor
You may also want to change the opacity of one or both of the colors. To set or change
the transparency of a color:
-Click the opacity swatch (one of the two swatches above the color ramp).
-Drag the slider to the percentage of transparency desired, or enter a numeric value from
0 to 100.
-Press Enter or click outside the Edit Gradient pop-up window to accept the changes and
close the Gradient editor.
To adjust the transition between colors in the fill, drag the color swatches left or right.
Page 60 of 69
Transforming and distorting the gradient fills
You can move, rotate, skew, and change the width of an object’s gradient fill.
Selecting an object with a gradient fill causes a set of handles to appear on or near the
object. You can drag these handles to adjust the object’s fill. To move the fill within an
object, drag the round handle. To rotate the fill, pass your pointer over the line
connecting the handles. Drag when the pointer changes to a rotate symbol. To adjust
the fill width and skew the gradient, drag the square handle.
Figure 8: The rotate symbol
To change stroke colors

The current stroke color appears in the Stroke Color box in the Tools panel and
the Property inspector. You can change the stroke color by clicking in the Fill
Color boxes in either location to open a Swatches pop-up. Use the built in color
picker to select a new swatch.
Page 61 of 69
The Engrave lines

The simplest way to create an engraved effect is to offset dark and light paths. That’s
exactly how the effect was added to the line separating the Navbar Topper from the Root
menu y-tile background. To customize the color of the engrave lines you’ll first need to
ungroup them.
-In the Layers panel, click on the Engrave line group thumbnail and choose Modify >
Ungroup
-Change the upper, dark line to the same color you used for the Fixed width background
shape and strokes.
Figure 8: Selecting the Engrave line group in the Layers panel
Page 62 of 69
The Photo
You can replace the flight attendant photo with a photo of your own by pasting it inside
the existing one, or by hiding the flight attendant photo and replacing it with a photo of
the same dimensions (180px by 180px).
To paste a new photo inside the existing one:
-Place the new image on top of the flight attendant photo, and then cut it to the system
clipboard (Edit > Cut).
-Select the flight attendant image and choose Edit > Paste Inside.
Note that the effects applied to the flight attendant image are automatically applied to the
new image. To remove the effects, uncheck them in the Edit and Arrange effects box in
the Property inspector.
Figure 9: The Effects edit and arrange box
The Dashed Border

Customize the color of the dashed border by selecting the Dashed border thumbnail in
the Layers panel, and then clicking in the Fill Color boxes in either location to open a
Swatches pop-up. Use the built in color picker to select a new swatch.
The Photo Label

Customize the color of the label background by clicking in the Fill Color boxes in either
location to open a Swatches pop-up. Use the built in color picker to select a new swatch.
To change the text, hide the existing text bitmap by clicking on the eye icon next to its
thumbnail in the Layers panel, and then type a new label.
That it! You’ve finished customizing the Utopia PNG file. You’ll use many of the same
techniques to customize the Utopia_horizontal.png
Page 63 of 69
Modifying the Utopia_horizontal.png

Moving counterclockwise around the PNG file, the elements are:
1. a header background consisting of two rectangles and a highlight

2. a Logo consisting of:
text on a path
a ring
a specially prepared image inside the ring
an image name/title
3. a rectangle that connects the logo with the header background
4. a photo of a flight attendant
5. a dashed vertical rule
6. the x-tile root-level menu background consisting of a rectangle and
highlight
7. y-tile menu background, submenus and root level "on" state consisting of
a rectangle and highlight
Customizing the Header Background and Highlight

To change the color of the upper and lower header background rectangles,
-Click on the shapes to select them.

-Use the built in color picker to select new color swatches.
Use the same method to change the color of the highlight.
Page 64 of 69
Customizing the Logo

The text on a path
To stay consistent with the period style of the design, we choose a beautiful, easily
scaled, Art Deco font by Charles Gibbons, called Aphasia. The font is published by
Bitstream and can be purchased at www.myfonts.com/fonts/bitstream/aphasia/. Other
fonts that would work well are Newport Classic SG, Blakeley. You’ll also find some
suitable Nick Curtis fonts at www.moorstation.org/typoasis/designers/curtis/index.htm.
The Script font we used is Ed Benguiat’s Edwardian Script. Edwardian Script is installed
by many Microsoft programs. If you don’t have it available, and don’t want to buy it,
many terrific freeware alternatives are available at http://www.dafont.com/en/. Search
the Script section of the site.
Figure 10: Edwardian Script

The text in the PNG file is a Bitmap. To replace it with your own:
-Select the text it by clicking on it, and then open the Layers panel.
-Hide the text by clicking on the eye icon next to its thumbnail
-Select the vector ellipse tool and drag out a circle.
-Set the size of the circle by typing the number 183 in both the W and H boxes in the
Property inspector.
-Select a font and type the words you want to use.
-Move the text to the top of the circle.
-Press Shift and select both the text and the circle.
-Choose Text > Attach to Path.
To reposition the text on the path, enter a negative number into the Path Offset box in
the Property inspector.
Figure 11: Negative path offset
Page 65 of 69
The Ring
To change the color of the ring,
-Use the built in color picker to select a new color swatch
If you would like the ring thicker or thinner, adjust the stroke width in the Property
inspector.
The image inside the ring

First you’ll clone the ring, and then you’ll paste a photo inside the clone. To finish, you’ll
apply a soft fade to the edges of the photo.
-Hide the original photo by clicking on the eye icon next to its thumbnail in the Layers
panel.
-Click on the ring to select it and choose Edit > Clone
-Remove the stroke from the ring by clicking on the down arrow of the Stroke Category
selector in the Property inspector and choosing None
-Place the photo you’ve chosen on top of the ring clone
-Choose Edit > Cut to cut the image to the system clipboard
-With the ring clone selected, choose Edit > Paste Inside.
To reposition the image inside the ring clone,
-Click on the image thumbnail in the Layers panel to bring up the blue move handle
-Drag on the move handle to reposition the photo.
Page 66 of 69
To fade the edges of the photo,
-Click on the photo mask group to select it

-Choose Commands > Creative > Fade Image.
-Select the circular fade (the first button in the second row of the Fade Image dialog
box).
Figure 11: In the Fade Image dialog box
To finish, position the photo mask group evenly over the original ring. To move it below
the ring,
-In the Layers panel, click on the thumbnail of the mask group and drag it below the
thumbnail of the ring.
The Connector Rectangle

To change the color of the connector rectangle,
-Click on the shapes to select them.

Page 67 of 69
The Photo
You can replace the flight attendant photo with a photo of your own by pasting it inside
the existing photo, or by hiding the existing photo and replacing it with a photo of the
same dimensions (150px by 148px).
To paste a new photo inside the flight attendant photo:
-Place the new image on top of the flight attendant photo, and then cut it to the system
clipboard (Edit > Cut).
-Select the flight attendant image and choose Edit > Paste Inside.
Note that the effects that applied to the flight attendant image are applied to the new
image. To remove the color effects, Levels and Hue/Saturation, uncheck them in the Edit
and Arrange effects box in the Property inspector. To change the color of the border,
double click on Outer Bevel to open its edit box. Click in the Color Fill box of the editor to
open a Swatches pop-up.
The Dashed Vertical Rule

Change the color by selecting the Dashed Vertical Rule group in the Layers panel, and
then changing the stroke color in the Property inspector.
The X-tile Root-level Menu Background & Highlight

Change the colors by,
-Clicking on the shapes to select them.
Y-tile Menu Background, Submenus and Root-level "On" State

Change the colors by,
-Clicking on the shapes to select them.
You’re finished!
Page 68 of 69
Support
Please visit the main support page at Project Seven to view all support options.
www.projectseven.com/support/
Page 69 of 69

Utopia: CSS and Image User Guide

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Utopia: CSS and Image User Guide

Uploaded by

Copyright:

Available Formats

Utopia

A Pop Menu Magic CSS PagePack™ by PVII

CSS and Image User Guide

Style and Image guides:

Fixed: 2-column – Vertical menu

Box model width calculation

#sidecontent h4 {margin: 0;}

#maincontent a, #sidecontent a, #footer a {

#maincontent a:visited, #sidecontent a:visited, #footer a:visited

#maincontent a:hover, #sidecontent a:hover, #footer a:hover {

#maincontent a:active, .p7ie6Fix:active, #sidecontent a:active,

.skips a, .skips a:visited, .skips a:hover {

.skips a:active, .skips a:focus {

IE5 and 6 Fixes

Liquid: 3-column – Vertical menu

#maincontent a, #rightbox a, #sidecontent a, #footer a {

#maincontent a:visited, #rightbox a:visited, #sidecontent

#maincontent a:hover, #rightbox a:hover, #sidecontent a:hover,

#maincontent a:active, .p7ie6Fix:active, #rightbox a:active,

.skips a, .skips a:visited, .skips a:hover {

.skips a:active, .skips a:focus {

IE5 and 6 Fixes

Liquid: 2-column – Horizontal menu

h1, h2, h3, h4 {

#sidebar h2, #sidebar h3, #sidebar h4 {

#maincontent a:visited, #sidebar a:visited {

#maincontent a:hover, #sidebar a:hover {

#maincontent a:active, .p7ie6Fix:active, #sidebar a:active,

.p7ie6Fix:active, #footer a:active, #footer a:focus {

.skips a, .skips a:visited, .skips a:hover {

.skips a:active, .skips a:focus {

/* The single backslash \ character inside this comment

IE5 and 6 Fixes

Liquid: 3-column – Horizontal menu

h1, h2, h3, h4 {

#sidebar h2, #sidebar h3, #sidebar h4 {

#maincontent a, #sidebar a, #newsbar a {

#maincontent a:visited, #sidebar a:visited, #newsbar a:visited {

#maincontent a:hover, #sidebar a:hover, #newsbar a:hover {

#maincontent a:active, #maincontent a:focus,.p7ie6Fix:active,

.p7ie6Fix:active, #footer a:active, #footer a:focus {

.skips a, .skips a:visited, .skips a:hover {

.skips a:active, .skips a:focus {

/* The single backslash \ character inside this comment

IE5 and 6 Fixes

Pop Menu Magic Utopia Style Sheet – Vertical Menu

#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {

Pop Menu Magic Utopia Style Sheet – Horizontal Menu

#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {

#p7PMnav ul a:hover, #p7PMnav ul a:active, #p7PMnav ul a:focus {

#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7Pmon {

#p7PMnav ul, #p7PMnav ul li {

Modifying the Utopia PNG

1. a Fixed-Width Background shape

Figure 1: The Utopia PNG

To change the color of the Fixed-Width background shape

Figure 2: Picking a new color

Customizing the Logo

Figure 4: Path offset box

Figure 5: Adjusting the Stroke width

The image inside the ring

To reposition the image inside the ring clone,

Figure 6: Repositioning the image inside the ring