Welcome to WebmasterWorld Guest from 54.160.187.160

Forum Moderators: not2easy

Message Too Old, No Replies

adding left sidebar to wp theme

     
6:32 am on Mar 6, 2012 (gmt 0)

New User

joined:Mar 6, 2012
posts: 1
votes: 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.
9:01 am on Mar 9, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 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?