Creating a layout master file

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
2/29/2008 9:44:50 AM
james_littler
Gravatar
Total Posts 2
View Posts

Creating a layout master file

Hi, i have a template into which i'm trying to impliment cms.  I have no idea where to start or what i need to do.  I have a good knowledge of (x)html and css but i've not used a cms system like this before.

 

If someone could take a look through my code and advise me on how to make this into a layout master file I'd be really greatful.

 

Here's my css:

 

* {
padding: 0;
margin: 0;
}

html, body {
height: 100%;
}

/*Container*/
#container {
position: relative;
height: 95%;
min-height: 600px;
width: 80%;
min-width: 800px;
background-color: #DDD;
border-left: 5px solid #2C4B9D;
border-right: 5px solid #2C4B9D;
margin: 10px auto 10px auto;
}

* html #container {
height: 100%;
}

/*Rounded Corners*/
#tl {
position: absolute;
top: -5px;
left: -5px;
z-index: 5;
}
#tr {
position: absolute;
top: -5px;
right: -5px;
z-index: 5;
}
#bl {
position: absolute;
bottom: -5px;
left: -5px;
z-index: 3;
}
#br {
position: absolute;
bottom: -5px;
right: -5px;
z-index: 3;
}

/*Header*/
#header {
position: relative;
height: 101px;
top: 0px;
z-index: 2;
border-top: 5px solid #2C4B9D;
border-bottom: 5px solid #2C4B9D;
}

#headerLeft {
position:absolute;
width: 90px;
height: 101px;
z-index: 3;
}

#headerCentre {
position:absolute;
top: 0px;
left: 90px;
right: 697px;
height: 101px;
background: #ffffff;
z-index: 3;
}

#headerRight {
position:absolute;
top: 0px;
right: 0px;
width: 697px;
height: 101px;
background-image: url ('Images/Page/Corner_TopRight.png');
z-index: 3;
}

/*Navigation*/
#nav {
position: relative;
height: 48px;
background-color: #2C4B9D;
z-index: 2;
}

#navLeft {
position: absolute;
top: 0px;
left: 0px;
width: 7px;
height: 43px;
background: url('Images/Nav/NavLeft.png');
z-index: 3;
}

#navCentre {
position: absolute;
top: 0px;
left: 7px;
right: 7px;
height: 43px;
background: url('Images/Nav/NavCentre.png') repeat-x;
z-index: 3;
}

#navRight {
position: absolute;
top: 0px;
right: 0px;
width: 7px;
height: 43px;
background: url('Images/Nav/NavRight.png');
z-index: 3;
}
/*Navigation Menus*/
#navCentre ul {
list-style: none;
padding: 0px 12px 0px 12px;
}
#navCentre ul li {
position: relative;
background: url('Images/Nav/Seperator.png') no-repeat top right;
float: left;
left: -15px;
top: 0px;
padding: 10px 15px 10px 15px;
height: 43px;
}

#navCentre li a {
text-decoration:none;
}

#navCentre ul li:hover ul {
display: block;
}

#navCentre li ul {
position: absolute;
display: none;
background-image: none;
top: 43px;
left: 0px;
width: 100%;
z-index: 5;
}

#navCentre li li {
height: 20px;
width: 100%;
background: #2C4B9D;
padding: 5px 38px 5px 15px;
}

#navCentre li li a {
text-decoration: none;
background-image: none;
}

#navCentre li li:hover {
background: #819adc;
}

/*Content*/
#content {
position: absolute;
min-width: 800px;
bottom: 18px;
left: 0px;
right: 0px;
top: 160px;
background-color: #DDD;
overflow: auto;
z-index: 3;
}

/*Footer*/
#footer {
position: relative;
width: 80%;
min-width: 800px;
clear: both;
height: 28px;
background-color: #ffffff;
text-align:center;
margin: -28px auto 0px auto;
border: 5px solid #2c4b9d;
}

#clearfooter {
display: block;
height: 28px;
}

/*Start of Text Styles*/
h1 {
font-family: Verdana, Helvetica, Arial;
font-weight: bold;
color: #2C4B9D;
font-size: 1.2em;
padding: 0 10px 0 10px;
}

h2 {
font-family: Verdana, Helvetica, Arial;
font-weight: bold;
color: #000000;
font-size: 1.2em;
padding: 0 10px 0 10px;
}

h3 {
font-family: Verdana, Helvetica, Arial;
font-weight: bold;
color: #2C4B9D;
font-size: 1em;
padding: 0 10px 0 10px;
}

h4 {
font-family: Verdana, Helvetica, Arial;
font-weight: bold;
color: #000000;
font-size: 1em;
padding: 0 10px 0 10px;
}

h5 {
font-family: Verdana, Helvetica, Arial;
font-weight: bold;
color: #2C4B9D;
font-size: 0.8em;
padding: 0 10px 0 10px;
}

h6 {
font-family: Verdana, Helvetica, Arial;
font-weight: bold;
color: #000000;
font-size: 0.8em;
padding: 0 10px 0 10px;
}

p {
font-family: Verdana, Helvetica, Arial;
color: #000000;
font-size: 0.8em;
padding: 0 10px 0 10px;
}

a {
font-family: Verdana, Helvetica, Arial;
color: #2C4B9D;
font-size: 0.8em;
text-decoration: none;
}

#navCentre li a:link {
font-family: Verdana, Helvetica, Arial;
color: #ffffff;
font-size: 0.8em;
text-decoration: none;
}

#navCentre li a:active {
font-family: Verdana, Helvetica, Arial;
color: #ffffff;
font-size: 0.8em;
text-decoration: none;
}

#navCentre li a:visited {
font-family: Verdana, Helvetica, Arial;
color: #ffffff;
font-size: 0.8em;
text-decoration: none;
}

#navCentre li a:hover {
font-family: Verdana, Helvetica, Arial;
background-color: #819adc;
color: #ffffff;
font-size: 0.8em;
text-decoration: none;
}

#navCentre li li a:link, #navCentre li li a:active, #navCentre li li a:visited, #navCentre li li a:hover {
font-family: Verdana, Helvetica, Arial;
color: #ffffff;
font-size: 0.8em;
text-decoration: none;
}


 

And here's my html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>White Sails</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="StyleSheet1.css" />
</head>

<body>

<!--Start of Container-->
<div id="container">

 


 


<!--Start of Header-->
<div id="header">

<div id="headerLeft">
<img src="Images/Page/HeaderLeft.png" alt="Header_Left" />
<!--Start of Top Left Rounded Corner-->
<img src="Images/Page/Corner_TopLeft.png" id="tl" />
<!--End of Top Left Rounded Corner-->
</div>

<div id="headerCentre">
</div>

<div id="headerRight">
<img src="Images/Page/HeaderRight.png" alt="Header Right" />
<!--Start of Top Right Rounded Corner-->
<img src="Images/Page/Corner_TopRight.png" id="tr" />
<!--End of Top Right Rounded Corner-->
</div>

</div>
<!--End of Header-->

<!--Start of Nav-->
<div id="nav">

<div id="navLeft">
</div>

<div id="navCentre">
<ul>
<li><a href="www.ats-heritage.co.uk">Home</a>
<ul>
<li>
<a href="www.ats-heritage.co.uk">Home</a>
</li>
</ul>
</li>
</ul>
</div>

<div id="navRight">
</div>

</div>
<!--End of Nav-->

<!--Start of Content-->
<div id="content">
<h1>White Sails</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
</div>
<!--End of Content-->

<!--Start of Clear Footer-->
<div id="clearfooter">
</div>
<!--End of Clear Footer-->

</div>
<!--End of Container-->

<!--Start of Footer-->
<div id="footer">
<!--Start of Bottom Rounded Corners-->
<img src="Images/Page/Corner_BottomLeft.png" id="bl" />
<img src="Images/Page/Corner_BottomRight.png" id="br" />
<!--End of Bottom Rounded Corners-->
</div>
<!--End of Footer-->

</body>
</html>

 

i have a live version of the template at this url www.ats-heritage.co.uk/testing/WhiteSails

 

Once again any help would be greatly appreciated

 

Cheers

James

 

2/29/2008 10:28:49 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Creating a layout master file

See the skining documentation here.

Best bet is to copy a skin that already has a layout as close as possible to your desired layout.

Then start integrating your css into the skin css files and your html into the layout.master

Its a trial and error process.

Hope it helps,

Joe

2/29/2008 10:34:53 AM
james_littler
Gravatar
Total Posts 2
View Posts

Re: Creating a layout master file

There doesnt seem to be anything with a similar srtucture, that i can find anyway.

Do i need to break down my css file and then import them into style.css or can i keep it complete and just name it style.css?

2/29/2008 10:44:14 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: Creating a layout master file

The markup other than what you put in the layout.master is generated by the cms so the layout.master is the only place where you can use custom arbitrary css class names. So for most things you need to use the existing css class names.

So the process is start with a copy of an existing skin and edit styles for existing class names. View the source of the page in the browser as needed to find the markup you are trying to style and find what class names you can use.

Its not going to work by just including some arbitrary css file with arbitrary class names and selectors.

Hope it helps,

Joe

 

You must sign in to post in the forums. This thread is closed to new posts.