Jump to content


White Petals


  • You cannot reply to this topic
5 replies to this topic

#1 lianeb

    Etomite Forum Fan

  • Member
  • Pip
  • 99 posts

Posted 24 November 2005 - 04:11 PM

This is a remake of the simple two-column template I used for http://nwfinearts.com

You must have the ListMenu snippet installed for this to work.

When making a new page, if you want the first paragraph's first line to be bold, toggle source (the <> button) in the editor and give the first paragraph a class of "first" - <p class="first">.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>[(site_name)] [*longtitle*]</title>
<meta name="description" content="[*description*]" />
[[GetKeywords]]
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: #F2F2F2;
margin: 0px 0px 0px 0px;
text-align: center;
vertical-align: top;
padding: 0px 0px 0px 0px;
}

body, table tr td, div {
font: 'lucida sans unicode',arial,sans-serif;
}

div#wrapper {
width: 700px;
background: #FFF;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
border: 1px solid #D5D0B2;
}

div#nav {
margin-left: 0px;
margin-top: 0px;
text-align: left;
height: 100%
padding: 0px 0px 0px 0px;
float: left;
background: #FFF;
}

div#nav p {
width: 280px;
margin-left: 10px;
font: 70% arial,sans-serif;
}

div#nav h3 {
margin-left: 10px;
font: 700 80% verdana,arial,sans-serif;
color: #C5BDA5;
}

img#mainphoto {
border-bottom: 1px solid #D5D0B2;
width: 300px;
height: 300px;
}

div#main {
width: 399px;
margin-top: 0px;
border-left: 1px solid #D5D0B2;
background: #FFF;
vertical-align: top;
text-align: left;
padding: 0px 0px 0px 0px;
float: right;
}

div#main h1 {
color: #C5BDA5;
font: 700 90% verdana,arial,geneva,sans-serif;
margin-left: 15px;
padding-top: 20px;
}

div#main p {
margin-left: 15px;
font: 70% 'lucida sans unicode',arial,verdana,geneva,helvetica,sans-serif;
}

div#pagetrail {
width: 340px;
margin-left: 15px;
border: 1px solid #D5D0B2;
font: 700 70% arial,sans-serif;
text-align: left;
padding: 2px;
}

div#pagetrail a {
text-decoration: none;
}

div#footer {
border-top: 1px solid #D5D0B2;
}

div#rightcopy {
margin-left: 15px;
margin-top: 0px;
font: xx-small arial,sans-serif;
background: #FFF;
text-align: left;
padding-bottom: 20px;
}

#rightcopy a {
text-decoration: none;
}

a:link, a:visited {
color: #000;
}

#LM_level_1 {
margin-left: 0px;
text-indent: 0px;
display: block;
width: 300px;
margin-top: 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
}

#LM_level_2 {
text-indent: 10px;
margin-left: 0px;
display: block;
padding: 0px 0px 0px 0px;
}

#LM_level_1 li  {
border-bottom: 1px solid #FFF;
background: #EAE5C9;
padding: 0px 0px 0px 0px;
text-indent: 10px;
margin-left: 0px;
width: 100%;
list-style-image: none;
list-style-type: none;
display: block;
font: 700 80% Verdana,arial,sans-serif;
color: #666;
}

#LM_level_1 li a, #LM_level_2 li a {
text-decoration: none;
}

#LM_level_1 li a:link, #LM_level_1 li a:visited {
color: #666;
}

#LM_level_1 li a:active, #LM_level_1 li a:hover {
color: #669966;
}

#LM_level_2 li {
border-bottom: 1px solid #C5BDA5;
padding: 0px 0px 0px 0px;
text-indent: 0px;
margin-left: 0px;
width: 300px;
list-style-image: none;
list-style-type: none; 
display: block;
font: 500 90% Verdana,arial,sans-serif;
background:#FFF;
text-indent: 10px;
}

#LM_level_2 li a:link, #LM_level_2 li a:visited {
color: #000;
}

#LM_level_2 li a:active, #LM_level_2 li a:hover {
color: #669966;
}

#LM_level_2 li {
color: #000;
}

p.first:first-line {
font-weight: 600;
}

</style>

</head>
<body>
<div id="wrapper">
<div id="main"><p><br />Replace this text with your text logo (no larger than 380 pixels wide)</p>
<div id="pagetrail">[[PageTrail]]</div>
<h1>[*longtitle*]</h1>
[*content*]<br /><br />
<div id="rightcopy">
<a href="http://www.bk2k.com">Designed by BK2K Web Design, Portland Oregon</a>&nbsp;|&nbsp;<a href="http://etomite.com">Powered by Etomite CMS</a>&nbsp;</div>
</div>
<div id="nav"><img id="mainphoto" src="images/white-petals.jpg" alt="white flower petals" />
[[ListMenu?id=0]]
<h3>Your heading</h3>
<p>Replace this text with your side content</p></div>
</div></body>
</html>

Screenshot:

Attached File  white_petals_screenshot.jpg   46.36K   717 downloads

Edited by lianeb, 24 November 2005 - 04:16 PM.


#2 Hans

    Likes Etomite Forums!

  • Member
  • PipPip
  • 152 posts

Posted 24 November 2005 - 06:21 PM

lianeb, on Nov 24 2005, 05:11 PM, said:

This is a remake of the simple two-column template I used for http://nwfinearts.com

Thanks very much lianeb, much appreciated! It is a wonderful site you made!
Hans

Edited by Hans, 24 November 2005 - 06:21 PM.


#3 kservik

    Etomite Forum Newbie

  • Member
  • 1 posts

Posted 25 November 2005 - 07:23 AM

Agreed, it looks very good.

#4 gtatler

    Likes Etomite Forums!

  • Member
  • PipPip
  • 338 posts

Posted 10 December 2005 - 01:48 PM

Just come accross your template - and the site. Great work.

I have tried out the template, adjusting the footer to appear under the menu.

However, the main context text right padding seems not to work. See THIS TEST PAGE to see what I mean.

Not being very well up in CSS, any help in sorting this out would be appreciated, (even if I don't finally use the template).

Edited by gtatler, 11 December 2005 - 09:00 AM.


#5 gtatler

    Likes Etomite Forums!

  • Member
  • PipPip
  • 338 posts

Posted 11 December 2005 - 11:40 AM

My problem has been sorted.

I have added into the css

div#contents { padding-right: 10px; }

and changed the [*content*] line in the template to

<div id="contents">[*content*]</div>

and the text in the main contents panel now has a nice right padding.

#6 lianeb

    Etomite Forum Fan

  • Member
  • Pip
  • 99 posts

Posted 12 December 2005 - 07:03 AM

Sorry, I didn't see this until now. I usually put the padding on the paragraphs, but a div works nicely too! :)

I'm working on another one you guys will love; I'm calling it "Magick Mountain". Stay tuned! :)





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users