My question is what is the best approach to take in this scenerio...

I'm converting a static content site:

http://psm.illinois.edu to Drupal

I've downloaded the zen subtheme and I'm wondering what my next step should be. For instance, I have certain .css files. Do I OVERRIDE the the layout.css or html-elements.css included w/ zen or do I just bring those existing styles over into my theme folder and then put them in the .info file? What's the best approach to take here.. I'm completely new to theming...

Thanks,
Phil

Comments

jshamley’s picture

override the zen css files

President/Web Developer - Shamley Incorporated

philliptackett’s picture

My static site:

http://psm.illinois.edu has 2 .css (well 3 if you count the print.css). One css is called default.css and it contains the following:

body {
margin:0px;
padding:0px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-style:normal;
color:#333333;
text-decoration:none;
line-height:18px;
background-image: url(../images/greyblue_bkgrd.jpg);
background-position: center;
background-repeat: repeat-y;
background-color: #eff4f7;
}

h1 {
left: -2000px;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
bottom: -2000px;
position: relative;
}

h2 {
margin: 0px;
padding: 0px;
font-size: 18px;
color: #ed831a;
line-height: 22px;
font-weight: normal;
}

h3 {
margin: 0px;
padding: 10px 0px 0px;
font-size: 15px;
color: #333333;
}

a {
color:#ed831a;
text-decoration:none;
margin: 0px;
padding: 0px;
}

a:link {
color:#ed831a;
text-decoration:underline;
margin: 0px;
padding: 0px;
}

a:visited {
color:#ed831a;
text-decoration:underline;
margin: 0px;
padding: 0px;
}

a:hover,a:active {
color:#1c53ef;
text-decoration:underline;
margin: 0px;
padding: 0px;
}

img {
border: 0;
margin: 0px;
padding: 0px;
}
#container #content table tr #body_left #promo {
left: 0px;
top: 0px;
}

/* structure */

#container {
padding:0px;
width:958px;
letter-spacing: 0px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 19px;
padding-bottom: 0px;
padding-left: 19px;
position: relative;
}

#content {
width:958px;
border:1px solid #becec4;
text-align:left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#content_index {
width:956px;
margin:0px;
text-align:left;
padding: 0px;
border-top: 1px solid #becec4;
border-right: 1px solid #becec4;
border-bottom: 1px #becec4;
border-left: 1px solid #becec4;
}
#content_bottom {
margin: 0px;
padding: 0px;
height: 220px;
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 0px;
width: 958px;
background-image: url(../images/bot_bckgrd.jpg);
}

#indeximg {
display:none;
}

#uilogo {
position: absolute;
top: 25px;
right: 25px;
text-decoration: none;
}

#index_nav {
width:495px;
height:21px;
padding:7px 0px 0px 5px;
text-align:left;
font-size: 12px;
position: absolute;
left: 5px;
margin: 0px;
top: 0px;
}

#index_nav_new {
width:0px;
height:0px;
padding:7px 0px 0px 5px;
text-align:top;
font-size: 12px;
position: relative;
left: 0px;
margin: 0px;
top: 0px;
}

#announce{
position: absolute;
top: 30px;
left: 17px;
background-image: url(../images/_announcebrdr.png);
width: 295px;
margin-top: 15px;
min-height: 163px;
z-index: 2;
overflow: hidden;
background-repeat: no-repeat;
}

#main_one {
position: absolute;
left: 345px;
top: 50px;
}
#main_two {
position: absolute;
left: 390px;
top: 85px;
width: 200px;
}
#main_three {
position: absolute;
left: 460px;
top: 125px;
}
#main_four {
position: absolute;
left: 540px;
top: 165px;
}

#nav {
width:880px;
height:21px;
padding:9px 0px 0px 78px;
background:url(../images/bg_nav.gif) top no-repeat;
text-align:left;
margin: 0px;
}

#nav_links {
height:30px;
padding:0px 0px 6px 0px;
text-align:left;
}

#global_nav {
width:960px;
height:29px;
padding:0px 0px 0px 0px;
background:no-repeat;
border-bottom:1px solid #becec4;
text-align:left;
}

#header_index {
width:960px;
height:64px;
margin:0px 0px 0px 14px;
background:no-repeat left;
text-align:left;
padding: 10px 0px 0px;
}

#header {
width:958px;
padding:0px 0px 0px 0px;
text-align:left;
}

#body_left {
width:292px;
height:350px;
padding:0px 0px 0px 0px;
text-align:left;
position: relative;
background-color: #e6e7e7;
}
#psmlogo{
height: 55px;
width: 96px;
bottom: 65px;
position: absolute;
left: 108px;
margin: 0px;
padding: 0px;
z-index: 1000;
}

#body_right {
padding:50px 50px 20px 40px;
text-align:left;
}

#body_right_btm {
padding:0px 24px 12px 0px;
text-align:right;
}

#body_full {
padding:25px;
text-align:left;
}
#body_full li {
color: #000000;
list-style-type: square;
padding-left: 0px;
margin: 0px 0px 0px 25px;
}

#psminfo {
position: absolute;
left: 275px;
top: 100px;
visibility: hidden;
}

#footer {
width:958px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
#buttons{
margin: 0px;
float: right;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#buttons img{
margin-right: 0px;
margin-left: 1px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
#iprint {
display:none;
}

/* type styles */

.header {
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-style:normal;
line-height:22px;
font-weight:normal;
color:#ed831a;
text-decoration: none;
}

.body {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:normal;
line-height:14px;
font-weight:normal;
color:#333333;
text-decoration:none;
}

.main{
color: #333333;
}

.main a, .main a:link{
color: #333333;
text-decoration: none;
letter-spacing: 0px;
font-weight: normal;
}
.main a:hover, main a:visited {
color:#ed831a;
text-decoration:none;
}

.body a, .body a:link, .body a:visited {
color:#ed831a;
text-decoration:underline;
}

.body a:hover {
color:#1c53ef;
text-decoration:underline;
}

.nav {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:normal;
line-height:14px;
font-weight:normal;
color:#333333;
text-decoration:none;
}

.nav a, .nav a:visited {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:normal;
line-height:14px;
font-weight:normal;
color:#333333;
text-decoration:none;
}

.nav a:hover {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:normal;
line-height:14px;
font-weight:normal;
color:#ed831a;
text-decoration:none;
}

.legal {
font-family:Verdana, Geneva, sans-serif;
font-size:9.5px;
font-style:normal;
line-height:14px;
font-weight:normal;
color:#797979;
text-decoration:none;
text-align: left;
padding-top: 6px;
padding-bottom: 5px;
}

.legal a, .legal a:visited {
color:#797979;
text-decoration:none;
}

.legal a:hover {
color:#797979;
text-decoration:underline;
}

.blue {
font-weight: bold;
color: #0b3df8;
}

.italic {
font-style: italic;
}
.maincenter {
color: #1b528d;
}

.maincenter a, .maincenter a:visited, .maincenter a:active {
text-decoration:none;
color: #1b528d;
font-weight: bold;
font-size: 16px;
}

.maincenter a:hover {
text-decoration:none;
color: #ed831a;
}

.psm a, psm a:link, psm a:visited, psm a:hover, psm a:active {
text-decoration: none;
color: #FFFFFF;
}

.uilogo a, .uilogo a:link, .uilogoa:visited, .uilogo a:hover, .uilogo a:active {
color: #3f7bb9;
text-decoration: none;
}
.buttons a, .buttons a:link, .buttons a:visited, .buttons a:hover, .buttons a:active {
color: #ffffff;
text-decoration: none;
padding-right: 1px;
}
.imgmaplink {
position: relative;
left: -3000px;
}

The other is called search-nav.css and it contains the following:

@charset "UTF-8";
/* CSS Document */

body /* NEEDED FOR IE 6 - search bar won't fill 100% of page-width without this */ {
margin:0;
}

div#search_nav {
top: 0;
left: 0;
z-index: 100;
background: #fff;
padding: 0;
border-bottom: 1px solid #9d9d9d;
width: 958px; /* insert width here */
min-width: 675px;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 2.6em;
color: #333;
overflow: visible;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

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

div#search_nav a:hover {
text-decoration: underline;
}

div#search_nav img {
border: 0;
}

ul#search_nav_LEFT {
float: right;
margin: 0;
width: 100px;
height: 30px;
list-style: none;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
text-align: right;
}

ul#search_nav_RIGHT {
float: left;
margin: 0;
padding: 0;
width: 530px;
}

ul#search_nav_RIGHT li {
padding: 2px 0 30px 0;
margin: 0 20px 0 0;
display: inline;
}

ul#search_nav_RIGHT li a {
padding: 0 0 0 25px;
color: #333;
}

ul#search_nav_RIGHT li.mail /* mail icon */ {
background-image: url(../images/mail.gif);
background-repeat: no-repeat;
background-position: left top;
}
ul#search_nav_RIGHT li.compass a {
padding: 0;
}

/* SEARCH FUNCTION: STARTS HERE */
ul#search_nav_RIGHT li.search {
position: absolute;
top: 0; /* search icon */
padding: 0 0 0 22px;
width: 468px;
height: 30px;
background-image: url(../images/search.gif);
background-repeat: no-repeat;
background-position: left top;
}

li.search .searchbox {
margin: 5px 0 0 0;
padding: 3px 0 3px 5px;
border: 1px solid #bbb;
width: 100px;
font-size: 1em;
text-transform: none;
color: #444;
}

li.search form ul#radio li {
margin: 0;
padding: 0 3px;
font-size: 1em;
text-transform: none;
color: #444;
}

li.search form ul#radio {
margin: 0;
padding: 0;
display: inline;
}

li.search form input#go {
color: #666;
text-transform: uppercase;
font-weight: bold;
font-size: 1em;
border: 1px solid #bbb;
height: 18px;
padding: 0 3px;
margin: 0 0 0 4px;
cursor: pointer;
background-image: url(../images/submit.gif);
background-repeat: no-repeat;
background-position: right top;
}

.searchnav_hide {
position: absolute;
top: -2000em;
left: -2000em;
text-indent: -2000em;
}

How should I go about 'translating' these styles into the zen theme? Given that I have layout.css, html-elements.css, and psm.css should I go and pick the css from the current site and override what's in these zen css's?

Thanks,
Phil

netw3rker’s picture

For the most part the CSS you posted here isnt using zen classes and tags.

the zen starterkit sub-theme renders all of the drupal elements into tags and classes that are in a format that works with the zen framework. you'll need to convert your elements over to the appropriate matching classes as best you can.

you should probably create your own css file for this and leave the existing css files provided by zen alone. you can do this by adding a new css sheet to your theme (maybe call it psm.css) and add an entry to it in your theme.info file.

Hope this helps!
-Chris