Development Need help with wordpress CSS template

Hi all,

I have a friend who needs help customizing one of the default Wordpress templates (Misty Look) for his wordpress blog.

Now I have no idea how to modify it to reflect his needs and was wondering if one of the cool cats here could help?

What he asking if it's possible to make the background black, and for the " Recent Posts", "Categories" & "Admin" boxes to be in #D15FEE (Medium Orchid). If you also have any ideas as to how to update the font to something a little newer then it would an incredible help.

The code is:

/*
Theme Name: MistyLook
Theme URI: http://wpthemes.info
Description: A two column white theme with top-level page navigation and large custom header.
Version: 3.1-wpcom
Author: Sadish
Author URI: http://simpleinside.com/
Tags: custom-header, two-columns, fixed-width, rtl-language-support, white, light, right-sidebar, sticky-post, custom-menu
*/
* {
padding: 0;
margin:0;
}
p {
margin: 0.7em 0;
line-height:1.6em;
}
dl {
margin:1em 0;
}
dt
{
font-weight:bold;
}
dd
{
margin:0.5em;
padding:0;
}
.entry img
{
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border:none;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

.entry a img {
border:none;
background:none;
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

#content #content-main .entry .imagelink {
border-bottom: none;
}

#content #content-main .gallery .gallery-item a {
border-bottom: none;
}

.entry .wp-smiley, #wpstats {
background: none;
border: 0;
padding: 0;
}
.clear {
clear:both;
height:20px;
}

blockquote
{
color:#666;
margin: 1em;
padding: 0 0 10px 50px;
background: url(img/blockquote.gif) no-repeat left top;
}
fieldset
{
border:none;
}
body
{
background: #f9f9f0;
margin: 0;
font: 76%/1.6em verdana, tahoma, arial, sans-serif;
color: #333;
text-align: center;
}
a
{
text-decoration:none;
}
a:link, a:visited {
color: #265e15;
}
a:hover, a:active {
border-bottom:#963 1px solid;
}
h1, h2, h3, h4, h5, h6
{
font-family:Georgia, Verdana, Arial, Serif;
}

#container {
border: #ccc 1px solid;
background: #fff;
margin: 0 auto;
width: 780px;
position: relative;
text-align: left;
}
#navigation {
display: block;
margin: 20px auto 0;
width: 760px;
text-align: left;
font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;
letter-spacing:1px;
position: relative;
z-index: 1000;
}
#navigation .menu {
position: relative;
width: 760px;
z-index: 1000;
}
#navigation ul li {
float: left;
margin: 0 5px 0 0;
list-style-type: none;
position: relative;
}
#navigation ul li a,
#navigation li.current_page_item ul a {
border: #dedede 1px solid;
border-bottom:none;
padding: 2px 10px;
display: block;
font-weight:bold;
color:#666;
text-decoration: none;
background:#ededed;
}
#navigation ul li a:hover,
#navigation ul li a:active,
#navigation li.current_page_item a {
background: #fff;
color: #333;
border: #ccc 1px solid;
border-bottom:none;
}
#navigation ul ul {
display: none;
position: absolute;
top: 24px;
float: left;
z-index: 1000;
border-bottom: 1px solid #dedede;
width: 180px;
min-height: 24px;
}
#navigation ul ul ul {
left: 179px;
top: 0;
}
#navigation ul ul li {
min-width: 180px;
}
#navigation ul li:hover > ul {
display: block !important;
}
#navigation ul li.search {
font-size: 0.9em;
right: 0;
position: absolute;
top: 0;
}
#navigation ul li.search input#searchsubmit {
border: #999 1px solid;
font-size: 0.9em;
background: #ddd;
margin: 0 0 0 2px;
color: #265e15;
padding: 2px;
}
#header {
clear: both;
float: left;
margin: 10px 5px;
width: 450px;
}
#header h1
{
font-size:1.8em;
margin:10px 0 0 10px;
font-variant:small-caps;
letter-spacing:1px;
}
#header h1 a {

text-decoration:none;
border:none;
}
#header h2
{
margin:5px 0 0 10px;
font-size:1em;
font-weight:normal;
font-family:Tahoma, Verdana, Arial, Serif;
letter-spacing:1px;
}
#feedarea {
padding:10px 10px 0 0;
float: right;
text-align: right;
}
html #feedarea {
padding-top: 10px;
}
#feedarea dl dt {
display: inline;
margin-right: 5px;
height: 45px;
}
#feedarea dl dd {
display: inline;
margin-right: 5px;
height: 45px;
background:url(img/icon_feed.gif) no-repeat left center;
padding-left:16px;
}
#headerimage {
clear: both;
background: #fff url(img/misty.jpg) no-repeat 0 0;
margin: 10px;
color: #fff;
height: 200px;
}
html #headerimage {
margin-top: 0;
}
#content {
margin: 10px 10px 10px 30px;
}
html #content {
height: 1%;
}
#content h3 {
font-size: 1.4em;
font-weight:normal;
margin: 1em 0 0;
color: #265e15;
}
#content h4 {
font-size: 1.1em;
margin: 1em 0 0 0;
}
#content h5 {
font-size: 1em;
margin: 1em 0;
}
#content-main ul
{
margin:1em;
padding:0 1em;
list-style-image:url(img/bullet.png);
}
#content-main ul.asides
{
margin:0;
padding:2em;
border-bottom:#ddd 1px dashed;
}
#content ol
{
list-style-type:decimal;
margin:2em;
padding:0 2em;
}
#content-main {
float: left;
width: 520px;
margin-right: 20px;
overflow: hidden;
}
html #section-index #content-main {
margin-right: 20px;
}
#content .post
{
padding:0 0 2em 0;
border-bottom:#ddd 1px dashed;
}
#content p img.right {
float: right;
margin:10px 0 0 10px;
}
#content p img.left {
float: left;
margin:0 10px 10px 0;
}
#content .post h2
{
font-size: 1.4em;
margin: 1em 0 0;
letter-spacing:1px;
font-weight:normal;
}
#content .entry
{
margin:1em 0;
padding-right:1em;
}

#content .sticky {
background: #f7f7f7;
padding: 0 10px 10px 10px;
}
#content .sticky .posttitle h2 {
padding-top: 10px;
}
#content .entry a:link, #content .entry a:visited
{
border-bottom:#963 1px dashed;
}
#content .entry a:hover, #content .entry a:active
{
border-bottom:#963 1px solid;
}
#content .post-info , #content .postmetadata
{
font-size:0.9em;
color:#999;
margin:0;
padding:0;
}
#content .post-info
{
background:url(img/underline1.jpg) no-repeat left bottom;
padding-bottom:12px;
}
#sidebar {
float: left;
width: 200px;
font-size:0.9em;
overflow: hidden;
}
#sidebar ul
{
list-style:none;
margin:0;
padding:0;
}
#sidebar ul ul
{
list-style:none;
margin:0.5em 0 0 1em;
}
#sidebar ul ul ul
{
margin:0 0 0 1em;
}
.sidebox ul li {
overflow: hidden;
}
li.sidebox {
padding:10px;
background: url(img/sideheadtop.gif) #ededed no-repeat left top;
margin-bottom: 10px;
}
html li.sidebox {
padding-bottom: 10px;
}
li.sidebox h2 {
font-weight: normal;
font-size: 1.6em;
text-align: left;
color: #242;
font-variant:small-caps;
}
#sidebar li.sidebox p img {
margin:0;
padding:3px;
border:#ccc 1px solid;
background:none;
}
#sidebar .tweets li {
margin: 0.7em 0;
}

#footer {
clear: both;
background: transparent;
margin: 0 auto;
width: 760px;
text-align: left;
}
html #footer {
height: 1%;
}
#footer p {
float: left;
width: 50%;
line-height: 1.2em;
}
#footer p.right {
float: right;
margin: 1em 0;
width: 50%;
text-align: right;
font-size: 0.9em;
color:#999;
}
#comments, #respond{
margin: 2em 0 10px 5px;
}
#commentform
{
margin:10px 0;
padding:10px;
background:#f9fcfc;
border-top: #ddd 1px solid;
border-bottom: #ddd 1px solid;
}
.commentnum
{
font-size:1.5em;
font-weight:bold;
margin:0 5px 0 0;
}
#container .commentlist {
margin: 0;
padding: 0;
border-top: #ddd 1px solid;
}
.commentlist li
{
list-style:none;
margin: 0;
padding: 0.5em;
border-bottom: #ddd 1px solid;

}
.commentlist li.thread-alt
{
background:#f9f9f9;
}
.commentlist li .cmtinfo
{
font-size:1em;
}
.commentlist li cite
{
font-style:normal;
font-weight:bold;
}
.commentlist li .cmtinfo em
{
float:right;
margin:0;
padding:0;
font-style:normal;
font-size:0.9em;
color:#999;
}
/* threaded-comments */
.commentlist .children li {
border-bottom: 0px;

}
#content-main .commentlist .children {
margin: 10px 0 10px 10px;
padding: 0;
border-left: 1px solid #ddd;
}

#content .commentsfeed
{
background:url(img/icon_feed.gif) no-repeat left center;
padding-left:16px;
}
#content .trackback
{
background:url(img/link.gif) no-repeat left center;
padding-left:20px;
}
input.textbox
{
border:#ccc 1px solid;
background:#fff url(img/shadow_top.gif) repeat-x top;
font:1em Verdana, Arial, Serif;
padding:2px;
width:150px;
}
textarea{
width: 80%;
padding:10px;
line-height:2em;
height: 20em;
border: 1px solid #ccc;
background:#fff url(img/shadow_top.gif) repeat-x top;
font:1em Verdana, Arial, Serif;
}
.textbox:focus, textarea:focus
{
background:#fff url(img/shadow_top.gif) repeat-x top;
border:#999 1px solid;
}
.post h4
{
font-size:1em;
font-weight:normal;
font-family:Verdana, Tahoma, Arial, Serif;
}
.post h4 em
{
font-style:normal;
float:right;
font-weight:normal;
}
#header, #content, #sidebar, #footer, .widget, .entry {
overflow: hidden;
}

.cmtinfo .avatar { clear: both; float: right; margin-left: 5px; }

.navigation { clear: both; }

img.centered, img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img, .wp-caption a img {
margin: 0;
padding: 0;
border: 0 none;
}

#content .wp-caption a:hover,
#content .wp-caption a:active,
#content .wp-caption a:link,
#content .wp-caption a:visited {
border: none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}

/* calendar widget */
#wp-calendar {
width: 100%;
}
#wp-calendar th {
color: #000;
font-weight: normal;
}
#wp-calendar td {
color: #999;
}
#wp-calendar #next {
text-align: right;
}

Many many thanks to anyone who can help.

 

Are there really no CSS guru's in here, I cant believe it

There is HW Labs Tripple radiator in it for you!

 

Change background: #f9f9f0; to "black" or #fff.

I don't see the Recent Posts", "Categories" & "Admin" boxes you're talking about.

And no, that's not a "default" theme.

Your buddy can also ask the developer for help, might get quicker answers that way.

 

I assume he's talking about something like this (made with the quick preview of it, which can be found here: http://playwith.wpthemes.info/)


if so, he should change the following:

Code:

body
{
background: #f9f9f0;
margin: 0;
font: 76%/1.6em verdana, tahoma, arial, sans-serif;
color: #333;
text-align: center;
}

changes to:

Code:

body
{
background: #000;
margin: 0;
font: 76%/1.6em verdana, tahoma, arial, sans-serif;
color: #333;
text-align: center;
}

and

Code:

li.sidebox {
padding:10px;
background: url(img/sideheadtop.gif) #ededed no-repeat left top;
margin-bottom:10px;
padding:10px;

cahnges to

Code:

li.sidebox {
background:url("img/sideheadtop.gif") no-repeat scroll left top #D15FEE;
margin-bottom:10px;
padding:10px;
}

as for the FONT, he can chose one, and just change it using the "font" bit in the "body" CSS

Important note, though:
You need to run a custom WP installation to do that, AFAIK, though.
i.e. blog.wordpress.com cannot customise stylesheets, so he'd have to build a completely custom theme and hos tit somewhere so that "pre-hosted" WP users can use it.

The only way out of that (as I said, not 100% sure here) is to host your own domain, and a WP installation there.

 

Hi guys,

Thank you so much for all your help, the blog is starting to look great.

 

Hope you come right.
Shout if you need help.