homepage Welcome to WebmasterWorld Guest from 54.145.183.190
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
adding left sidebar to wp theme
zeroseo



 
Msg#: 4425412 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4425412 posted 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved