Closed

Create CSS Templates

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)

|[url removed, login to view]

|[url removed, login to view]

|[url removed, login to view]

|[url removed, login to view]

|[url removed, login to view]

|[url removed, login to view]

-----------------------------------------------------

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 [url removed, login to view] 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 [url removed, login to view] 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 [url removed, login to view] 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 [url removed, login to view] 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 [url removed, login to view] 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 [url removed, login to view] 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/[url removed, login to view] );

background-repeat: repeat-x;

}

#left-content {

background-image: url( img/[url removed, login to view] );

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 [url removed, login to view] 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.

Skills: Website Design

See more: web templates images, web templates create, web templates business, web specification template, website vertical menu design, website create text logo, website templates menu, website menu design templates, website layout using css, website header design templates, website footer design templates, website decoration, website border templates, web pages templates css, web pages templates html, webpage problem, webpage design templates, web page create html, web footer templates, web design templates business, web design padding, web design names list, web design layout templates, web design css templates, web design blockquote

About the Employer:
( 1 review ) Clearwater, United States

Project ID: #223645

25 freelancers are bidding on average $2024 for this job

designersone

Respected Sir, Please allow us the honour to place a time and cost estimation for this project. We are not very sure about the total number of templates to be converted. So, we have placed a time and cost estima More

$1500 USD in 40 days
(1 Review)
3.2
EBeam

Please check PM

$1500 USD in 30 days
(1 Review)
2.4
sumom

Dear Sir/?madam, I am working in the web development field for the past 4 years. I visited the website http://www.freecsstemplates.org. There are so many templates having different sytlesheets. I saw your descripti More

$2000 USD in 10 days
(0 Reviews)
0.0
jnanix

Hi. We are very interested in working on this project with you. We have developed websites and can deliver a timely, quality product which will match the W3C standards using following standards : 1] Build all my templ More

$3000 USD in 25 days
(0 Reviews)
0.0
sarojmalik

Hi Sir, Sir we are experts in XHTML/CSS Please check the PM for more information about us and to have a look on our work portfolio. Thanks&Regards

$2000 USD in 30 days
(0 Reviews)
0.0
sgetl6j

I am well conversant with the assignment / Project you want to get done. I am well qualified and experienced to handle small, medium, and mega Projects / Assignments (please refer to my Profile). I am reliable and avai More

$2500 USD in 30 days
(0 Reviews)
0.0
infowaylive

view project message board for more information.

$1500 USD in 2 days
(0 Reviews)
0.0
faysalkabir

i have practical experience in this type of works. so i can do this.

$2700 USD in 75 days
(0 Reviews)
0.0
kashifBashir76

Please do try us we will please you with our years of exprience.

$2200 USD in 30 days
(0 Reviews)
0.0
mamtatech1

We are the fastest growing Software Solution Provider in India . We have expertise in Software Development and other Allied Services. We have a strong and experienced team of Software Professionals in Web Design & Dev More

$1500 USD in 15 days
(0 Reviews)
0.0
hapaxlegomenon

FreeLancer from Italy ready to start this job for you.

$1500 USD in 30 days
(0 Reviews)
0.0
tylerwillingham

I should be able to do 1 template a week. Price is negotiable but should come out to something around $18 an hour which is what I currently work for. Mt turnaround is very quick!

$3000 USD in 5 days
(0 Reviews)
0.0
eprog

Hi, Lets start the project. Please check PMB thanks

$1500 USD in 30 days
(0 Reviews)
0.0
QualityService

We can do this project within time; please see PMB for more details.

$3000 USD in 30 days
(0 Reviews)
4.6
BDIIT

Pls see the PMB..

$1500 USD in 30 days
(0 Reviews)
0.0
Ar4a

I could try this one out. edited: I am ready to do this! I can make interactive color layout and cool and of course CLEAN web design.. Im not some kind of robot who automathical answers on bids.. so? Please choose More

$3000 USD in 15 days
(0 Reviews)
0.0
netpocalypse

Please see PMB

$1800 USD in 0 days
(0 Reviews)
0.0
HtmlCoder

let's do it,thanks

$1500 USD in 30 days
(0 Reviews)
0.0
geflpjssj

I am well qualified and experienced to handle small, medium, and mega Projects / Assignments (please refer to my Profile). I am reliable,well experienced and available to start your Project / Assignment from 25th of th More

$1900 USD in 25 days
(0 Reviews)
0.0
c0l0rad0

We are an American based group of developers located on the Gulf Coast of Mississippi employing a staff of 36 programmers. We have offices in Texas, Florida and Pakistan. We have the expertise to accomplish what you wa More

$3000 USD in 45 days
(0 Reviews)
0.0