|
||||
how to adjust this wordpress template
dear designer,
i would like to use this template, but i ned to do some adjustment on the margin part, any one can assit me http://http://img338.imageshack.us/i...700x525dl8.jpg i would like to extent the width of part A and shorten the width of part C how can i adjust it? i am not so good in coding, simple coding or changes i can do, but i need advice where to look for this adjustment Regards calvynlee
__________________
I blog my IT Engineer LIFE at iCalvyn.com Last edited by calvynlee; 17-08-2007 at 11:44 PM. |
|
||||
guys...thank a lot, i never think before looking at CSS... i tought adjust at the index or sider.php, but cant find any width to chage at all...
thank a lot. i will try to look my CSS... by the way, this is the CSS HTML Code:
/* Theme Name: Blog Oh Blog Theme URI: http://www.blogohblog.com/ Description: This theme was designed and built by Bob of <a href="http://www.blogohblog.com/">Blog Oh Blog</a>. I love to hear of my work being used :). This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution 3.0 License</a>. This means you may use it for any purpose, and make any changes you like. Just leave my Bob link under your footer. Author: Bob Author URI: http://www.blogohblog.com/ */ body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8pt;background-color:#50504f;background-image:url('images/gbck.gif');background-repeat:repeat} a:hover{text-decoration:underline;color:#666;border:none;} #box{width:970px;background:#fff;margin:20px auto;padding:10px;} #top{width:970px;background-color:#000;background-image:url('images/topbck.gif');background-repeat:repeat-x;height:51px;margin:0;padding:0} #header{float:left;width:400px;margin:0 0 0 10px;padding:0;} #header h1{text-indent:-10000px;margin:0;padding:0;} #header h1 a{display:block;background:url('images/logo.gif') no-repeat left;height:51px} #desc{color:#fdfdb0;float:right;width:400px;text-align:right;font-size:11px;margin:20px auto;padding:0 10px 0 0;} #jubow{background:#f3f2ed;height:30px;margin:10px auto;} #searchform{height:30px;line-height:30px;float:right;padding-top:5px;padding-right:5px;margin:0;} #searchform #s{font-size:8pt;width:230px;} #searchform #submit{font-size:8pt;} input#s{color:#666;border:1px solid #cbcbcb;background:#fcfcfc;} #nav{width:500px;height:30px;line-height:30px;float:left;padding:0;} ul.nav{height:30px;line-height:30px;float:left;list-style:none;font-size:12px;font-weight:700;text-transform:uppercase;margin:0;padding:0;} ul.nav li{float:left !important;list-style-type:none;margin:0;padding:0;} ul.nav li a, ul.nav li a:link, ul.nav li a:visited{border-bottom:0px none;border-left:0px none;background:#f3f2ed;color:#555;float:left;display:block;text-decoration:none;padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0} ul.nav li a:hover, ul.nav li a:active{background:#fff;color:#555;text-decoration:none;} ul.nav li.home a{border-left:2px solid #fff;text-decoration:none;} ul.nav li.current_page_item a{text-decoration:none;color:#555;background:#fff;} ul.nav li ul{float:left;margin:0;padding:0;} #bgbox{width:970px;background:url('images/cbck.gif') repeat-y;margin:0 auto;padding:0} .entry{width:510px;background:url('images/latestentry.gif') repeat-x;float:left;color:#666;text-align:justify;border:1px solid #e5e5bd;margin:5px auto;padding-left:6px; padding-right:6px; padding-top:5px; padding-bottom:10px} .entry img{border:4px #eee solid;} .entry2{width:510px;float:left;color:#666;text-align:justify;margin:5px auto;padding:5px 6px 10px;} .similiar{width:510px;float:left;color:#666;text-align:justify;border:#e5e5bd 1px solid;margin:5px auto;padding:5px 6px 10px;} #past, #divide{width:510px;float:left;text-transform:uppercase;font-weight:700;color:#666;padding:5px 6px 10px;} #sidebar{width:420px;float:right;font-size:11px;margin:5px;padding:0;} .navigation{width:510px;float:left;color:#666;padding:5px 6px 10px;} .alignright{float:right;margin-top:10px;} .alignleft{float:left;margin-top:10px;} .rsidebar{width:210px;float:right;color:#666;margin:0 auto;padding:0 10px 5px;} .rsidebar, .lsidebar img{border:none;} .lsidebar{width:160px;float:left;color:#666;margin:0 auto;padding:0 10px 5px;} #footer{width:960px;background:#6f7174;height:40px;line-height:40px;clear:both;color:#dadada;font-size:11px;margin:0;padding:0 0 0 10px;} .footer a:hover{text-decoration:none;color:#fff;border:none;} .footer p{margin:0;padding:0; line-height:40px;} .entry h2{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-weight:700;} .rsidebar h2, .lsidebar h2{font-size:13px;text-transform:uppercase;font-weight:700;border-bottom:#ccc 1px solid;border-top:#ccc 1px solid;margin:0 0 10px;padding:5px 0;} .rsidebar ul, .lsidebar ul{list-style-type:none;margin:0;padding:0;} .rsidebar ul li, .lsidebar ul li{list-style-type:none;margin:0 0 15px;padding:0;} .rsidebar ul li ul, .lsidebar ul li ul{list-style-type:square;margin:0;padding:0 0 0 5px;} .rsidebar ul li ul li, .lsidebar ul li ul li{list-style-type:none;background:url('images/b.gif') no-repeat 0 2px;border:0px none;margin-left:0; margin-right:0; margin-top:0; margin-bottom:1px; padding-left:15px; padding-right:0; padding-top:0; padding-bottom:0} .rsidebar p, .lsidebar p{padding:0 5px;} .postmeta{color:#666;border-bottom:#699 1px solid;} .boxcomments{border-top:5px solid #ddd;border-bottom:5px solid #ddd;margin-bottom:20px;width:510px;} #commentform{border-top:1px solid #eee;margin:0;padding:15px 15px 1px;} #commentform label{display:block;margin:0;} #commentform input{width:170px;margin:0 5px 10px 0;padding:1px;} #commentform textarea{width:400px;margin:0 0 10px;padding:0;} #commentform #submit{margin:0 0 20px;} #commentform p{margin:5px 0;} ol.commentlist{margin:0 0 1px;padding:0;} ol.commentlist :hover{background:url('images/latestbck.gif') repeat-x;} ol.commentlist li{border-top:1px solid #eee;display:block;list-style:none;margin:0;padding:15px 15px 1px;} ol.commentlist li :hover{background:none;} ol.commentlist li.commenthead{display:block;list-style:none;margin:0;padding:5px 15px;} ol.commentlist li.commenthead h2{margin:0;} ol.tblist{border-top:1px solid #fff;list-style:none;margin:0 0 1px;padding:15px;} ol.tblist li{display:block;background:url('images/c.gif') no-repeat 0 2px;padding-left:15px;list-style-type:none; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px} .footer a:link, .footer a:active, .footer a:visited{text-decoration:none;color:#f1e5aa;border:none;} a:link, a:active, a:visited, .postmeta a:hover{text-decoration:none;color:#666;border:none;border-bottom:#F90 dashed 1px;} .postmeta a:link, .postmeta a:active, .postmeta a:visited{text-decoration:underline;color:#660;border:none;} .postinfo img{border:none;} img.wp-smiley{border:0px none;padding:0} h1, h2, h3{font-size:14px;font-weight:700;color:#666;padding:0 10px 0 0;} #sidebar img, .lsidebar img{border:0px none;} input#url, input#author, input#email, textarea{color:#666;width:40%;border:1px solid #cbcbcb;margin-bottom:0.6em;background:#fcfcfc;margin-top:2px;padding:3px;} .entry h2 a:link, .entry h2 a:active, .entry h2 a:visited, #header h1 a:link, #header h1 a:active, #header h1 a:visited, #sidebar a:link, #sidebar a:active, #sidebar a:visited{text-decoration:none;color:#666;border:none;} #content{width:535px;float:left;line-height:140%;margin:5px auto;padding:0;}
__________________
I blog my IT Engineer LIFE at iCalvyn.com |
|
||||
thank mystic, i will look into those section...
freelancer, this is the index code HTML Code:
<?php get_header(); ?> <div id="content"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="entry"> <div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <small><abbr title="<?php the_time('Y-m-d\TH:i:sO'); ?>"><?php unset($previousday); printf(__('%1$s – %2$s'), the_date('', '', '', false), get_the_time()) ?></abbr> | by <?php the_author() ?></small> <?php the_content('<br />Read the rest of this entry »'); ?> <div class="postinfo"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <img src="<?php bloginfo('template_directory'); ?>/images/cm.gif" alt="comment" /> | Posted in » <?php the_category(', ') ?> <?php edit_post_link('| Edit', '', ' | '); ?> </div> </div> </div> <?php endwhile; ?> <div class="navigation"> <div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div> <div class="alignright"><?php previous_posts_link('Next Entries »') ?></div> </div> <?php else : ?> <h2>Not Found</h2> <p>Sorry, but you are looking for something that isn't here.</p> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
__________________
I blog my IT Engineer LIFE at iCalvyn.com |
|
||||
bro mystic got the A part correct... i'm not so sure on the sidebar one coz it didn't show in your index page coding but i think mystic got it right also...
to double check on the class name for sidebar, take a look inside the "get_sidebar()" function coding and look for the class name there. It should start with something like <div id="sidebar"> or <div id="rsidebar">. |
|
||||
hey...
i folo what mystic direction, i change the ..rsidebar width to 160px (decrease 50px) same as lsidebar. #sidebar width to 370px(previous 420px) the look currently at LittlePenang look like the content did not expend, and i change the the #content width:585px (increase 50px) still the same thing... DID I STILL MISS OUT ANYTHING??? freelancer, FYI, this is the sidebar code HTML Code:
<div id="sidebar"> <?php include (TEMPLATEPATH . '/lsidebar.php'); ?> <?php include (TEMPLATEPATH . '/rsidebar.php'); ?> </div> HTML Code:
<div class="lsidebar"> <ul> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?> <?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?> <li><h2>Archives</h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?> <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?> <?php wp_list_bookmarks(); ?> <li><h2>Meta</h2> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li> <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li> <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li> <?php wp_meta(); ?> </ul> </li> <?php } ?> <?php endif; ?> </ul> </div> HTML Code:
<div class="rsidebar"> <ul> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?> <li><h2>Recent Comments</h2> <?php global $wpdb; $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url, SUBSTRING(comment_content,1,30) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 10"; $comments = $wpdb->get_results($sql); $output = $pre_HTML; $output .= "\n<ul>"; foreach ($comments as $comment) { $output .= "\n<li>".strip_tags($comment->comment_author) .":" . "<a href=\"" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "\" title=\"on " . $comment->post_title . "\">" . strip_tags($comment->com_excerpt) ."</a></li>"; } $output .= "\n</ul>"; $output .= $post_HTML; echo $output;?> </li> <li><h2>Recent Post</h2> <ul> <?php $myposts = get_posts('numberposts=10&offset=1'); foreach($myposts as $post) : ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; ?> </ul> </li> <?php endif; ?> </ul> </div>
__________________
I blog my IT Engineer LIFE at iCalvyn.com |
|
||||
Quote:
for the content section try to increase .entry class width.. Quote:
beforehand... as usual.. do backup first okie.... |
|
||||
Looking at it now, it's pretty messed up.
Calvyn, perhaps you can do the debugging/modification at your own PC (using xamplite), and get a 'refreshment CSS course' here: |
|
||||
ffreelancer, i manage to change the .entry and the content are nice...
now the problem is the vertical line btw 2 sidebar did not move and also the vertical bar btw the content and center sidebar also did not move. wer to move it?
__________________
I blog my IT Engineer LIFE at iCalvyn.com |
|
||||
Quote:
, i couldn't see properly . ![]() however, i suspect it might be a background image but couldn't confirm this one also.. if it is ok with you, maybe you could zip up and email all the files in your wp theme folder for me to test it at my local pc. You can pm me for my email... Last edited by iamfreelancer; 21-08-2007 at 09:34 PM. |














