| adding left sidebar to wp theme
|
zeroseo
msg:4425414 | 6:32 am on Mar 6, 2012 (gmt 0) |
I am absolutely Raw on coding. I tried to add a left sidebar to a theme in WP.
/*
/******************************************
* HTML Elements
******************************************/
* {
margin:0;
padding:0;
}
body,html {
min-height:101%;
}
body {
background:/*url(images/backgrounds/bg_leadcontainer.jpg) repeat-x 0px 0px #252525*/ #eee;
color: #333;
padding: 13px 0 25px 0;
}
body, select, input, textarea {
font: 13px Arial, Verdana, Sans-Serif;
line-height:1.5em;
}
p {
margin: 15px 0;
}
hr {
display: block;
height:4px;
background:#ddd;
border:0;
}
small {
font-size: 0.9em;
padding:3px 0px;
}
/******* Hyperlinks ********************/
/* standard link behaviour */
a:link, a:active, a:visited {
color:#0068ff;
text-decoration: underline;
}
a:hover{
color:#0000FF;
text-decoration: none;
}
/* How the links in the leadstory area on the homepage look like */
#leadcontainer a {color:#fff;}
/* Title area links */
.title:link, .title:active, .title:visited {
color: #0000FF;
text-decoration: none;
}
.title:hover {
color: #0000FF;
text-decoration: underline;
}
/* HTML headline links */
h3 a:link, h3 a:active, h3 a:visited {text-decoration:none;}
h3 a:hover {text-decoration:underline;}
h4 a:link, h4 a:active, h4 a:visited {color:0000FF; text-decoration:none;}
h4 a:hover {text-decoration:underline;}
/* Links in the sidebar */
#sidelist a:link, #sidelist a:active, #sidelist a:visited {text-decoration:none;}
#sidelist a:hover {text-decoration:underline;}
#sidelist .children li a, #sidelist .children li a:visited {
padding:2px 2px 2px 0px;
border:0;
background:#eee;
color: #0000FF;
}
#sidelist .children li a:hover, #sidelist .children li a:active{color:#000;}
/* How tags appear */
#tags a {text-decoration:none;}
#tags a:hover {text-decoration:underline;}
/* Links within comments metadata (date, Author etc.) */
.commentmetadata a:link, .commentmetadata a:active, .commentmetadata a:visited {text-decoration:none;}
.commentmetadata a:hover {text-decoration:underline;}
/* Links in the footer */
#footer a {text-decoration: none;}
#footer a:hover{text-decoration: underline;}
/****** Images ****************************/
img, a:link img, a:visited img{border:1px solid #f64747; padding:1px;}
img.left,img.center,img.right,img.norm{ margin:5px 12px 5px 0; border:1px solid #f64747; padding:1px;}
img.left{ float:left; margin:0 12px 5px 0; }
img.center{ display:block; margin:0 auto 5px auto; }
img.right{ float:right; margin:0 0 5px 12px; }
#leadpic {float:left;margin: 0 20px 10px 0;padding:1px;border:1px solid #f64747;}
.home-cat-img {float:left; margin:0 6px 4px 0;}
/***** Alignments for WordPress Themes Datebase ************/
.aligncenter{ display:block; margin:0 auto 5px auto; }
.alignright{ float:right; margin:0 0 5px 12px; }
.alignleft{ float:left; margin:0 12px 5px 0; }
/******************************************
* Main Element Structure
******************************************/
#page { /* main container */
width:940px;
margin:0 auto;
font-size:1em;
background:#FFF;
padding: 10px 20px 40px 20px;
border-top:4px solid #f64747;
border-bottom:4px solid #f64747;
}
#branding {/* Where the logo is located */
width:208px;
height:90px;
padding-bottom:15px;
background:url(images/backgrounds/bg_branding.png) no-repeat;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.left {
float:left;
}
.right {
float:right;
}
#sidebar-right-wrapper {
width: 207px;
float:right
margin: 0 207px 0 0px;
border-left: 1px solid #fff;
padding:0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-left-wrapper {
width: 161px;
float:left
margin: 0 161px 0 0px;
border-right: 1px solid #fff;
padding:0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-home{
width: 480px;
float:right
}
/* The 3 columns on the homepage */
#homeleftcol{
width:30%;
border-right:1px solid #cd0505;
padding-right:20px;
text-align:justify;
float:left;
}
#homemidcol {
width:30%;
padding:0 20px 0 20px;
text-align:justify;
float:left;
}
#homerightcol{
width:30%;
border-left:1px solid #cd0505;
padding-left:20px;
text-align:justify;
float:right;
}
/******************************************
* Sidebar stuff exept hyperlinks
******************************************/
#sidelist li {list-style:none}
.bullets li {
list-style:none;
border-bottom:1px solid #FFF;
}
#sidelist .bullets li {
list-style:square;
margin-bottom:5px;
margin-left:22px;
}
#sidelist .children {background:#eee;}
#sidelist .children li {
background: #eee;
list-style: none;
margin-left:15px;
padding-left:15px;
border-bottom:1px solid #fff;
}
#sidelist .recent li{
margin-bottom:5px;
padding-left:20px;
background:url(images/icons/icon_recent.gif) no-repeat;
}
#sidelist .recent-comments li{
margin-bottom:5px;
padding-left:20px;
background:url(images/icons/icon_comments.gif) no-repeat;
}
#sidelist .more li{
margin-bottom:5px;
padding-left:20px;
background:url(images/icons/icon_categories.gif) no-repeat;
}
#sidelist .feed li{
margin-bottom:5px;
padding-left:20px;
background:url(images/icons/rss.gif) no-repeat;
}
/******************************************
* All Headlines and related stuff
******************************************/
.leadmeta, .leadmeta a {/* That´s how the Date and Author appear in the leadarticle section above the Headline */
font: 0.9em Arial, Helvetica, sans-serif;
margin-top:-4px;
color:#ddd;
text-decoration:none;
}
.cat-head {/* Background for the category teasers headline on the homepage */
margin-bottom:3px;
background-color:#ddd;
padding:3px 2px 1px 4px;
}
h1 {
color: #bd110c;
font: 1.6em arial;sans-serif;
font-weight:normal;
padding-bottom:8px;
border-bottom:4px solid #ddd;
margin: 20px 0;
}
h2 {
color: #bd110c;
font-size: 1em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
margin: 0px 10px 0px 0px;
padding: 20px 0px 0px 10px;
}
h3 {
font: 0.9em arial;sans-serif;
text-transform:uppercase;
letter-spacing:0.1em;
margin-bottom:4px;
font-weight:bold;
color:#bd110c;
}
#sidebar h2, #sidebar h3 a {
font: 0.9em arial;sans-serif;
text-transform:uppercase;
letter-spacing:0.1em;
margin-bottom:4px;
font-weight:bold;
color:#bd110c;
}
#sidebar h3, #sidebar h2 {
font-size:0.9em;
border-top:4px solid #ddd;
border-bottom:1px solid #ddd;
padding:5px 0 5px 2px;
margin:20px 0 15px 0;
color:#bd110c;
}
h3#respond {
border-top:4px solid #ddd;
margin-top:25px;
padding-top:20px
}
h3#comments {
margin-top:32px
}
h4 {
color:#444;
font-size:1.2em;
margin-bottom:6px;
}
/******************************************
* Content styles
******************************************/
/* some structural styles for the content area */
#content-wrapper {/* main content (left of sidebar) */
width:562px;
float:right
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#pagecontent { /* content area in static pages (without sidebar) */
width:820px;
float:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#homecontent-top {/* The upper area on the homepage */
width:940px;
margin-top:25px;
}
#homecontent-bottom {/* The lower area f the homepage */
width:900px;
margin-top:20px;
}
#homecontent-topleft {/* The left side of the upper area (where the leadstory area is located) */
width: 600px;
}
#homecontent-topright {/* The right upper area (where the three feature boxes appear) */
width: 300px;
}
/* The lead story on the honmepage */
#leadcontainer {
background:/*url(images/backgrounds/bg_leadcontainer.jpg) repeat-x 0px 0px #252525 */ #444;
color:#ddd;
border-top:4px solid #bd110c;
border-bottom:4px solid #bd110c;
padding:15px;
width:592px;
min-height:350px;
}
#leadcontainer:hover {
background:#333;
border-top:4px solid #bd110c;
border-bottom:4px solid #bd110c;
}
#leadcontainer .title {
font:2.2em Georgia, "Times New Roman", Times, serif;
line-height:100%;
display:block;
padding-bottom:7px;
color: #ffffff;
}
#leadheader {
display:block;
}
#leadheader a {color:#ddd;}
#homebottom {/* That´s the nice shadow below the leadcontainer */
width:625px;
height:60px;
background:url(images/backgrounds/homebottom.png);
}
.read-on a { /* This can be used to format the "continue readng..." link in the lead story */
text-decoration:none;
}
.read-on a:hover {color:#bd110c!important;}
/* Featured Articles formatting in "hometop-rightcol" */
.feature {
background: #eee;
padding:10px 10px 10px 20px;
border-top:2px solid #ccc;
border-bottom:2px solid #ccc;
}
.feature:hover {
background:#ddd;
border-top:2px solid #f64747;
border-bottom:2px solid #f64747;
}
/*.feature p { margin:0;}*/
#hometop-rightcol img {
margin-bottom:4px;
padding:1px;
border:1px solid #f64747;
}
#hometop-rightcol .feature {margin-bottom: 10px;}
#hometop-rightcol.title, #hometop-rightcol a.title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size:1.4em;
color: #0000FF;
margin:10px 0 15px 0;
}
/**********************************************************/
.description {
font-size: 1.5em;
font-weight: bold;
color:#f64747;
}
.title, a.title {
font-family: arial;sans-serif;
font-size:1.4em;
color: #0000FF;
margin:10px 0 15px 0;
}
#homemidcol .clearfloat, #homeleftcol .clearfloat, #homerightcol .clearfloat {
border-bottom:1px solid #ccc;
padding:12px 0;
}
/* Pagination formats for the achives (previous and next links) */
.navigation a {
width: 120px;
border: 1px dotted #ccc;
padding:2px 4px 2px 4px;
text-align:center;
font-size:0.9em;
text-decoration:none;
color:#0000FF;
}
.navigation a:hover {
background-color:#eee;
}
.preventries {
float:left;
}
.nextentries {
float:right;
}
/*Post Formatting*/
.entry {
padding-bottom:30px;
text-align:justify;
}
.post blockquote {
color:#ce3754;
padding:6px 14px;
margin:18px 35px;
border-top:1px solid #DDD;
border-bottom:1px solid #DDD;
}
.post ul li {
list-style:square;
margin-bottom:5px;
margin-left:42px;
}
.post ol li {
margin-bottom:5px;
margin-left:48px;
}
#tags {
padding:5px;
background-color:#eee;
border-bottom:1px solid #f64747;
border-top:1px solid #f64747;
}
.postmetadata {margin: 30px 0;}
/* Form Elements */
select {
background:#eee;
border-top:2px solid #f64747;
border-bottom:2px solid #f64747;
border-left:none;
border-right:none;
width:100%
}
#commentform input {
width: 170px;
margin: 5px 5px 1px 0;
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
border-left:none;
border-right:none;
}
#commentform textarea {
background:#eee;
width: 100%;
margin-top:5px;
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
border-left:none;
border-right:none;
}
#commentform textarea:hover, #commentform textarea:focus {background:#fff;}
/* Comments*/
.commentlist {
padding-left:30px;
}
.commentlist li {
margin: 15px 0 3px;
padding: 8px 15px 10px 15px;
background:#eee;
border-top:1px solid #f64747;
border-bottom:1px solid #f64747;
}
#commentform small {
background:#FFF;
font-weight:bold;
padding:0;
}
.commentmetadata {
display: block;
}
.commentlist small {
background:#fff;
padding:2px 5px 2px 5px;
border-top:1px solid #f64747;
border-bottom:1px solid #f64747;
}
.commentlist cite { font-weight:bold; }
/* Float Properties*/
.clear {
clear:both;
}
.clearfloat:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content:".";
}
.clearfloat {/*never delete this otherwise MSIE will kill the layout */
display:inline-block;
}
.clearfloat {/*never delete this otherwise MSIE will kill the layout */
display:block;
}
/******************************************
* Footer
******************************************/
#footer {
margin: 0 auto;
width: 900px;
font-size:0.9em;
text-align:center;
padding-top:15px;
color:#ce3754;
}
#footer a {
color:#333;
}
Can someone help with the CSS, which I think is not correct.
|
alt131
msg:4426872 | 9:01 am on Mar 9, 2012 (gmt 0) |
Hi zeroseo and welcome to WebmasterWorld :),
Remember that css styles html, so we probably need to see the relevant html. However, before you post that can you tell us what is wrong with the above css?
|
|
|
