Wordpress Coding Help

meftw

Registered Member
Joined
Jun 16, 2009
Messages
71
Reaction score
14
Hey Everyone,

I've been having some major issues with my theme. For some reason I have these weird borders around all my images and I can't figure out how to make them disappear. I've visited the Warrior Forum and a few CSS forums but not much help there...if there is they charge WAY too much for what I'm asking for.

Here's an example of the weird border and wasted space:
screencapturekg.png


borderandspace.jpg


I'm also trying to customize the template so that there's more space for my content and less wasted space for the date and comment count.

If anyone knows how to fix these problems please let me know. Here's the code to the style.css file:

Code:
/*  
Theme Name: Typebased
Theme URI: http://www.woothemes.com/
Description: Typebased by WooThemes
Version: 2.3.1
Author: WooThemes
Author URI: http://www.woothemes.com/
*/

html, body {
    font-family: arial;
    font-size: 12px;
    border: 0;
    color: #404040;
    padding-bottom: 30px;
}

body {
    background: #334F60;
}

body, img, p, h1, h2, h3, h4, h5, ul, ol, li, form, blockquote {
    margin: 0;
    padding: 0;
}

p {
    line-height: 18px;
}

p, h1, h2, h3, h4, h5, ul, ol, blockquote p {
    padding: 10px 0;
}

ul, ol {
    list-style: none;
}

small {
    font-size: 11px;
}

code {
    background: #FFFFC1;
}

a {
    color: #CE1433;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a img {
    border: none;
}

/* Align (used for images) */

.aligncenter {
    margin: 5px auto 5px auto;
    display: block;
}

.alignleft {
    margin: 14px 15px 10px 0;
    float: left;
}

.alignright {
    margin: 14px 0px 10px 15px;
    float: right;
}

/* Wrap */

.wrap {
    width: 100%;
}

.left-col {
    float: left;
}

.right-col {
    float: right;
}

/* Container */

#container {
    width: 940px;
    margin: 0 auto;
    background: url(images/top.gif) no-repeat 0 143px;
}

/* Header */

#header {
    width: 100%;
    height: 108px;
}

#header h1 {
    padding: 30px 0 0 20px;
}

/* Main Menu */

#menu {
    width: 100%;
    height: 35px;
    margin-bottom: 4px;
}

#menu ul {
    position: relative;
    width: 764px;
    height: 35px;
    margin-left: 160px;
    padding: 0;
    background: url(images/menu_bg.gif) repeat-x 0 bottom;
}

#menu ul li {
    float: left;
    line-height: 30px;
    display: inline;
    font-weight: bold;
    text-transform: uppercase;
    font-family: "Lucida Sans", Arial, sans-serif;
}

#menu ul li a {
    display: block;
    position: relative;
    margin-top: 5px;
    padding: 0 27px 0 0;
    color: #C0CDCF;
    border-left: #2B404D 1px solid;
}

#menu ul li a:hover {
    color: #fff;
    cursor: pointer;
}

#menu ul li a span {
    display: inline-block;
    height: 30px;
    padding: 0 0 0 27px;
}

/* Main Menu - Current Page Item */

#menu ul li.current_page_item {
    line-height: 35px;
}

#menu ul li.current_page_item a {
    background: url(images/menu_button.gif) no-repeat right top;
    margin-top: 0;
    color: #1A272E;
    border: 0;
}

#menu ul li.current_page_item a:hover {
    color: #1A272E;
}

#menu ul li.current_page_item a span {
    background: url(images/menu_button.gif) no-repeat left top;
    height: 35px;
}

/* Main Menu - extra */

#menu ul li.first a {
    border: 0;
}

#menu ul li.current_page_item a {
    position: relative;
}

/* Main Menu - Drop-down menus */
#menu .nav li ul  { height: auto; margin-left: 0; margin-top: 0; background: #F5F5F5; position: absolute; left: -999em; width: 180px; border: 1px solid #dbdbdb; border-width:1px 1px 0; z-index:999; }
#menu .nav li ul li  { float: left; background:#F5F5F5; border-top:1px solid #fff; border-bottom:1px solid #dbdbdb; }
#menu .nav li ul li a  { float: none; margin: 0; padding: 0 0 0 20px!important; line-height: 28px; height: auto; width:160px; color:#555; font-size:0.8em; border: none; background: none; }
#menu .nav li ul li a span  { padding: 0; height: auto; background: none; }
#menu .nav li ul li a.sf-with-ul { padding:5px 10px; }
#menu .nav li ul li a:hover  { background:#e0e0e0;}
#menu .nav li ul ul  { margin: -25px 0 0 180px; }
#menu .nav li ul ul li a  {  }
#menu .nav li ul li ul li a  {  }

#menu .nav li:hover, #menu .nav li.hover  { position:static; }
#menu .nav li:hover ul ul, #menu .nav li.sfhover ul ul,
#menu .nav li:hover ul ul ul, #menu .nav li.sfhover ul ul ul,
#menu .nav li:hover ul ul ul ul, #menu .nav li.sfhover ul ul ul ul { left:-999em; }
#menu .nav li:hover ul, #menu .nav li.sfhover ul,
#menu .nav li li:hover ul, #menu .nav li li.sfhover ul,
#menu .nav li li li:hover ul, #menu .nav li li li.sfhover ul  { left:auto; }

#menu .nav .sf-sub-indicator {background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:0.9em;width:10px;height:10px;text-indent:-999em;overflow:hidden;}
#menu .nav li ul .sf-sub-indicator {background:url(images/arrow-superfish-right.png) no-repeat;}

/* Content Area - Content and Sidebar */

.background {
    background: #F5F5F5 url(images/content_bg.gif) repeat-y right top;
}

/* Content */

#content {
    width: 651px;
}

h2.arh {
    width: 460px;
    margin-left: 160px;
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 10px 15px;
    font-size: 20px;
    background: #FFF0D4;
    border-bottom: #D7D7D7 1px solid;
    border-top: #D7D7D7 1px solid;
    line-height: 25px;
}

/* Post */

.post {
    width: 100%;
    clear: both;
    padding: 10px 0;
    border-bottom: #CBCBCB 1px solid;
    background: url(images/post_element.gif) no-repeat 159px 21px;
}

.error, .page {
    border: 0;
}

/* Post Content */

.post-content {
    width: 440px;
    margin-right: 21px;
    display: inline;
}

.post-content a {
    font-weight: bold;
}

.post-content a:hover {
    text-decoration: underline;
}

/* Post Content Headings */

.post-content h2 {
    font-size: 28px;
    line-height: 30px;
}

.post-content h2 a {
    color: #404040;
}

.post-content h2 a:hover {
    text-decoration: underline;
}

.post-content h3 {
    font-size: 14px;
    padding: 5px 0;
}

/* Post Content Lists and Blockquote */

.post-content ol, .post-content ul {
    line-height: 20px;
}

.post-content ul {
    padding-left: 30px;
}

.post-content ul li {
    list-style: circle;
    padding: 3px 0;
}

.post-content ol {
    padding-left: 37px;
}

.post-content ol li {
    list-style: decimal;
    padding: 3px 0;
}

.post-content blockquote {
    border-left:2px solid #777777;
    color:#777777;
    font-style:italic;
    margin:5px auto 15px;
    padding:0px 10px;
    width:85%;
}

/* Post Content Images*/

.post-content img {
    
}

/* Post Content (read more) */

.post-content span.read_more {
    padding: 5px 0 10px 0;
    display: block;
    float: left;
    font-size: 13px;
}

.post-content a span.read_more {
    color: #1A86DF;
    text-decoration: underline ;
}

.post-content a:hover span.read_more {
    text-decoration: none;
}

/* Post Meta */

.post-meta {
    width: 140px;
    margin-left: 6px;
    text-align: right;
    display: inline;
    padding-top: 11px;
}

.post-meta a {
    color: #587384;
}

.post-meta a:hover {
    text-decoration: underline;
}

/* Post Meta Date */

.post-meta h3 {
    padding: 3px 0;
    margin-bottom: 23px;
}

.post-meta h3 span.day {
    display: block;
    float: right;
    line-height: 28px;
    font-size: 35px;
    border-right: #CBCBCB 1px solid;
    padding-right: 5px;
    color: #8D8D8D;
}

.post-meta h3 span.month, .post-meta h3 span.year {
    color: #666666;
    width: 40px;
}

.post-meta h3 span.month {
    display: block;
    float: right;
    font-size: 16px;
    line-height: 14px;
    padding-left: 4px;
    text-align: center;
    text-transform: uppercase;
}

.post-meta h3 span.year {
    font-size: 14px;
    display: block;
}

/* Post Meta Author and Comments */

.post-meta h4 {
    font-size: 12px;
    padding: 3px 21px 3px 0;
    color: #666666;
}

.post-meta h4.author {
    background: url(images/icon_author.gif) no-repeat right 2px;
    font-style: italic;
}

.post-meta h4.comments {
    background: url(images/icon_comment.gif) no-repeat right 4px;
}

.post-meta h4.comments a {
    color: #666666;
}

/* More Entries */

.more_posts {
    width: 400px;
    clear: both;
    margin-left: 190px;
    padding: 5px 0 6px 0;
}

.more_posts h2 {
    font-size: 20px;
}

.more_posts h2 a {
    color: #404040;
}

.more_posts h2 a:hover {
    color: #1A86DF;
}

/* Comments (single.php and comments.php) */

h3#comments, h3.lc {
    font-size: 18px;
    border-bottom: #D7D7D7 2px solid;
}

h3.lc {
    padding-top: 20px;
}

.comments_wrap {
    margin: 20px 0 0px 0px;
    clear: both;
    padding-bottom: 5px;
    border-bottom: #D7D7D7 1px dotted;
}

.comments_wrap img {
    background: none;
    padding: 1px;
}

.comments_wrap .left {
    width: 46px;
    padding-top: 2px;
    float: left;
}

.comments_wrap .left img {
    border: #D7D7D7 1px solid;    
    padding: 1px !important;
}

.comments_wrap .right {
    margin-left: 55px;
}

.comments_wrap .right h4 {
    font-size: 11px !important;
    text-transform: none;
    padding: 0;
    font-weight: normal;
}

.comments_wrap .right h4 b {
    font-size: 12px !important;
}

.comments_wrap .right h4 a {
    text-decoration: none;
}

.comments_wrap .right h4 a:hover {
    text-decoration: underline;
}

/* Comments (form) */

#content form {
    margin: 20px 0 30px 10px;
}

#content form label {
    display: block;
    margin: 10px 0;
    font-size: 12px;
}

#content form label input {
    padding: 3px;
    width: 180px;
    font-size: 12px;
}

#content textarea {
    margin-bottom: 10px;
    display: block;
    padding: 3px;
    font-size: 12px;
}

#content form input {
    margin-top: 5px;
}

.lc_logged {
    padding: 0;
    margin-top: -10px;
}

/* Sidebar */

#sidebar {
    width: 289px;
}

#sidebar h2 {
    font-size: 13px;
    color: #4A8393;
}

/* Sidebar Search */

#search {
    width: 100%;
    height: 57px;
    background: url(images/search_block_bg.gif) no-repeat 0 0;
    height: 50px;
}

#search form {
    padding: 14px 0 0 14px;
}

#search form div {
    width: 259px;
    height: 28px;
    background: url(images/search_field.gif) no-repeat 0 0;
    position: relative;
}

#search form input.search_box {
    width: 175px;
    border: 0;
    position: absolute;
    left: 5px;
    top: 5px;
    padding-top: 2px;
    background: transparent;
    font-size: 11px;
    font-weight: bold;
    outline: none;
}

#search form input.submit {
    position: absolute;
    right: 0;
}

/* Sidebar Block */

#sidebar .block {
    padding: 14px 4px 14px 14px;
    background: url(images/sidebar_block_top.gif) repeat-x 0 0;
}

#sidebar .block a {
    color: #3F6069;
}

#sidebar .block a:hover {
    color: #131A1C;
}

#sidebar .block ul {
    width: 100%;
    padding: 1px 0 8px 0;
}

/* Sidebar Inside Block */

#sidebar_in .block ul li {
    font-weight: bold;
    border-bottom: #BDCCD1 1px solid;
    line-height: 20px;
    padding: 4px 0 4px 21px;
    background: url(images/circle.gif) no-repeat 5px 11px;
    margin-right: 10px;
}

#sidebar_in .block ul li ul li {
    border: 0;
}

/* Sidebar Special List */

#sidebar .categories ul, #sidebar .blogroll ul, #sidebar .widget_categories ul, #sidebar .widget_links ul {
    background: url(images/sidebar_ul_lines.gif) no-repeat 0 0;
    margin-top: 3px;
}

#sidebar .categories ul li, #sidebar .blogroll ul li, #sidebar .widget_categories ul li, #sidebar .widget_links ul li {
    width: 104px;
    float: left;
    margin-right: 10px;
    display: inline;
}

#sidebar .categories ul li, #sidebar .widget_categories ul li {
    background: url(images/icon_folder.gif) no-repeat 0 6px;
}

#sidebar .blogroll ul li, #sidebar .widget_links ul li {
    background: url(images/circle.gif) no-repeat 5px 11px;
    font-size: 11px;
}

/* Sidebar Flickr */

#sidebar .flickr h2 span {
    color: #0061D8;
}

#sidebar .flickr h2 span span {
    color: #FF1183;
}

#sidebar .flickr .wrap {
    padding-top: 5px;
    margin-left: -10px;
    position: relative;
}

#sidebar .flickr li {
    float: left;
    margin-left: 10px;
    display: inline;
    margin-bottom: 10px;
}

#sidebar .flickr img {
    float: left;
    margin-left: 5px;
    display: inline;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    background: #fff;
    border: #BFCACE 1px solid;
}

/* Sidebar Adverts */

#sidebar .adverts {
    width: 285px;
    padding: 15px 0 10px 4px;
    background: url(images/sidebar_block_top.gif) repeat-x 0 0;
}

#sidebar .adverts ul {
    padding: 0;
}

#sidebar .adverts ul li {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    display: inline;
}

#sidebar .adverts img {
    display: block;
}

/* Widget (calendar) */

#wp-calendar {
    width: 95%;
    padding: 0 0 0px 0;
    margin-bottom: 15px;
}

#wp-calendar caption {
    padding: 10px;
}

#wp-calendar th, #wp-calendar td {
    padding: 5px;
    text-align: center;
    background: #C0DBE2;
}

#wp-calendar td {
    background: transparent;
}

#wp-calendar td, table#wp-calendar th {
    padding: 3px 0;
}

#wp-calendar a {
    text-decoration: underline;
}

#wp-calendar a:hover {
    text-decoration: none;
}

/* Widget (tag cloud) */

#tag_cloud {
    padding-bottom: 20px;
}

#tag_cloud h2 {
    margin-bottom: 5px;
}

/* Footer */

#footer {
    width: 940px;
    margin: 0 auto;
    background: url(images/footer_bg.gif);
    padding-top: 18px;
    margin-top: -1px;
    position: relative;
}

#footer a {
    color: #B2D1E4;
}

#footer a:hover {
    color: #318DE1;
}

#footer h2 {
    color: #6D7E87;
}

/* Footer Popular Articles */

#footer .popular {
    padding-bottom: 30px;
}

#footer .left-col .wrap {
    width: 646px;
}

#footer .left-col h2 {
    width: 115px;
    display: block;
    float: left;
    line-height: 24px;
    text-align: right;
    padding: 10px 35px 10px 10px;
    font-size: 20px;
    background: url(images/footer_element.gif) no-repeat right 18px;
    display: inline;
}

#footer .left-col ul {
    width: 441px;
    display: block;
    float: left;
    padding: 5px 0 15px 30px;
}

#footer .left-col ul li {
    line-height: 20px;
    font-size: 16px;
    padding: 6px 0 9px 0;
    font-weight: bold;
    background: url(images/footer_line.gif) repeat-x left bottom;
}

/* Footer Subscribe */

#footer #subscribe {
    width: 241px;
    padding: 0 30px 0 18px;
    color: #B2D1E4;
}

#footer #subscribe a {
    font-weight: bold;
    text-decoration: underline;
}

#footer #subscribe h2 {
    font-size: 16px;
}

#footer #subscribe p {
    padding: 8px 0 8px 42px;
}

#footer #subscribe p.rss {
    background: url(images/icon_rss.gif) no-repeat 0 11px;
}

/* Copyright */

#copyright {
    width: 100%;
    clear: both;
    background: #1A272E url(images/bottom.gif) no-repeat left bottom;
    border-top: #2B404D 1px solid;
    font-size: 11px;
    color: #677881;
    padding: 5px 0;
}

#copyright .left-col {
    padding-left: 15px;
}

#copyright .right-col {
    padding-right: 15px;
}

#copyright .right-col img {
    vertical-align: middle;
}

/* Fix */

.wrap:after,
.block ul:after {
    content: "."; 
    display: block;
     height: 0;
    clear: both; 
    visibility: hidden;
}

/* Misc */

.fix{
    clear: both;
    height: 1px;
    margin: -1px 0 0;
    overflow: hidden
}
.fl{
    float: left
}
.fr{
    float: right
}
.ac{
    text-align: center
}
.ar{
    text-align: right
}
img.centered{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright{
    padding: 4px;
    margin: 3px 0 2px 10px;
    display: inline;
}

img.alignleft{
    padding: 4px;
    margin: 3px 10px 2px 0;
    display: inline;
}

.alignleft{
    float: left;
}

.alignright{
    float: right;
}

/* Threaded comments */

ol.commentlist {
    margin:0;
    padding:0;
}

ol.commentlist li{
    list-style-type:none;
}

ol.commentlist li ul.children {
    padding-left:20px;
}
ol.commentlist li ul.children li{
    border-top:1px dotted #D7D7D7;    
    border-bottom:none;
    padding-top:15px;
}

/* Gravity forms */

.gfield { margin-bottom: 10px; }
.gform_wrapper .top_label .gfield_label { display:block;float:left; padding-right:20px; width: 100px; margin: 5px 0px 4px !important; }
.gform_wrapper input.button { padding: 5px 10px 6px !important; }
.gform_wrapper input { padding: 7px 3px !important; }
.gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea { width: 400px !important; padding: 7px 3px !important; }
.gform_wrapper .entry img, .gform_wrapper img.thumbnail { padding: 0px !important; border: 0px !important; }
ul.top_label .clear-multi { clear: none !important; }
.gform_wrapper .gfield_checkbox li, .gform_wrapper .gfield_radio li { display: inline !important; }
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio { margin-left: 120px !important; }
img.ui-datepicker-trigger { border: 0px; padding: 0px; }
 
Regarding image border, the only thing I found was

Code:
#sidebar .flickr img {
    float: left;
    margin-left: 5px;
    display: inline;
    margin-bottom: 5px;
    display: block;
    padding: 4px;
    background: #fff;
    border: #BFCACE 1px solid;

Change the 1px to 0px

That probably won't fix the entire blog, I suspect there's another sytle sheet.

You can try adding:

Code:
img {
    border: none;
}

add it under

Code:
a img {
    border: none;
}

Can't really tell what your other problem is.

Post the url of your site and I can be more exact.

Good lluck!
 
@foxriver... good advice.

@meftw... make CERTAIN to save a copy of the style sheet B4 you start editing, then if something does wrong, you can easily go back. I basically do my editing locally with text pad, do my changes, then copy/paste to wp-admin. If it's good.. I"m gold, if not, just go back to textpad, do a CTRL Z, and I'm back to square one.
 
hey guys i definitely appreciate the input. i was having too many headaches with that theme so i decided to scrap it. i'll definitely use what you shared in the future.
 
Back
Top