We have a web template system that requires CSS stylesheets to be split up into different stylesheet categories. For example, one stylesheet effects the layout only, the other effects colors only, another only effects background images, and so on. It cannot be jumbled up into one stylesheet, the key is that it must be split into their respective stylesheet type.
These are the files that make up 'one' template. Notice each stylesheet has a dedicated purpose:
root
|___img (folder)
|[login to view URL]
|[login to view URL]
|[login to view URL]
|[login to view URL]
|[login to view URL]
|[login to view URL]
-----------------------------------------------------
We are using 'almost' pure CSS web pages and we are looking to put together templates for the webpage. The index file must have the anchors below. You can change the order or put tables around them, but you must have all the anchor ids there: wrapper, header, menu, left-content, main-content, right-content, sub-content, footer, logo, searchbox, and loginbox. Nothing more, nothing less. If the CSS design doesn't have a right-content area for example, then you must zero it out on the stylesheet, but you cannot remove it from the [login to view URL] file:
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="logo">
</div>
<div id="searchbox">
</div>
<div id="loginbox">
</div>
<div id="menu">
</div>
<div id="left-content">
</div>
<div id="main-content">
</div>
<div id="right-content">
</div>
<div id="sub-content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
-----------------------------------------------------
The [login to view URL] file will only have CSS values that has to do with the placement of the achors in the htm file.
** Only these properties should be assigned here
** padding,
** margins,
** top,
** left,
** right,
** bottom,
** width,
** height,
** position,
** float,
** clear,
** z-index,
** etc
Example:
#wrapper {
position: relative;
margin: auto;
width: 780px;
height: 100%;
text-align: center;
}
#header, #menu, #left-content, #main-content, #right-content, #sub-content, #footer {
text-align: left;
}
#header {
width: 100%;
height: 75px;
}
#menu {
width: 100%;
height: 75px;
}
#left-content {
float: left;
width: 160px;
}
#main-content {
float: left;
width: 454px;
}
#right-content {
float: left;
width: 160px;
}
#sub-content {
clear: both;
width: 100%;
}
#footer {
width: 100%;
height: 100px;
}
#logo {
visibility: hidden;
display: none;
}
#searchbox {
visibility: hidden;
display: none;
}
#loginbox {
visibility: hidden;
display: none;
}
-----------------------------------------------------
The [login to view URL] file will only have CSS values that has to do with the colors of the design.
** Only these properties should be assigned here
** color,
** background-color,
** border-color,
** etc
-----------------------------------------------------
The [login to view URL] file will only have CSS values that will directly relate to the menu of the design (#menu) and nothing else. It must follow this standard exactly:
<div id="menu">
<ul>
<li><a href="#"><span>Menu Item 1</span></a></li>
<li><a href="#"><span>Menu Item 2</span></a></li>
<li><a href="#"><span>Menu Item 3</span></a></li>
<li><a href="#"><span>Menu Item 4</span></a></li>
<li><a href="#"><span>Menu Item 5</span></a></li>
</ul>
</div>
** Only these properties should be assigned here
** color,
** background-color,
** border-color,
** padding,
** margins,
** fonts-family,
** font-sizes,
** font-weight,
** font-style,
** text-align,
** text-decoration,
** list-style,
** list-style-type,
** list-style-image,
** list-style-position,
** white-space,
** line-height,
** border,
** letter-spacing,
** text-transform,
** display,
** word-spacing,
** vertical-align,
** text-indent,
** background-image,
** background-repeat,
** background-attachment,
** background-position,
** etc
Example:
#menu {
background:#EFF4FA;
font: bold 10px Verdana;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu li a {
float:left;
background:url("img/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#menu li a span {
float:left;
display:block;
background:url("img/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#menu li a span {float:none;}
/* End IE5-Mac hack */
#menu li a:hover span {
color:#FFF;
}
#menu li a:hover {
background-position:0% -42px;
}
#menu li a:hover span {
background-position:100% -42px;
}
-----------------------------------------------------
The [login to view URL] file will only have CSS values that effect the formatting of the text.
** Only these properties should be assigned here
** padding,
** margins,
** fonts-family,
** font-sizes,
** font-weight,
** font-style,
** text-align,
** text-decoration,
** list-style,
** list-style-type,
** list-style-image,
** list-style-position,
** white-space,
** line-height,
** border,
** letter-spacing,
** text-transform,
** display,
** word-spacing,
** vertical-align,
** text-indent,
** etc
-----------------------------------------------------
The [login to view URL] file will only have CSS values that place images on the web page such as background images to the headers or title areas.
** Only these properties should be assigned here (images folder: img)
** background-image,
** background-repeat,
** background-attachment,
** background-position,
** etc
Example:
#header {
background-image: url( img/[login to view URL] );
background-repeat: repeat-x;
}
#left-content {
background-image: url( img/[login to view URL] );
background-repeat: repeat-y;
}
-----------------------------------------------------
The CSS stylesheets must fit within the standard html elements. If you must create extra classes to use, they must follow consistent naming convention so if you need to create extra classes in other templates, you use the same names. These are the base foundation that has to be used first:
#wrapper {
}
#header {
}
#header h1 {
}
#header h2 {
}
#header p {
}
#header a {
}
#header a:hover {
}
#left-content {
}
#main-content {
}
#right-content {
}
#sub-section {
}
#footer {
}
#footer h1 {
}
#footer h2 {
}
#footer p {
}
#footer a {
}
#footer a:hover {
}
#logo {
}
#searchbox {
}
#loginbox {
}
h1, h2, h3, h4, h5, h6 {
}
p {
}
br {
}
blockquote {
}
ul {
}
ol {
}
li {
}
a {
}
a:hover {
}
a img {
}
img {
}
form {
}
input, textarea {
}
select {
}
-----------------------------------------------------
To speed up the process, we would like to start by converting [login to view URL] templates into this specification. There are hundreds there. We would like to attain at least 5 templates a week or 20 a month. If you can handle more that would be even better. We would like a quote per template as we see that it is only fair that we pay per template and no big lump sum in advance (you can see the problem with that). We would like to move forward on this immediately. Please let me know if you have any questions. Thank you and we look forward to a long and prosperous business relationship.