Thread: 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

there's no way except... doing css.

check the css, which <div> for the A, B and C part.

maybe you can paste the theme stylesheet.css here.

ya... you need the width and position is set in the CSS.. you need to find the div id of that 3 col and change it...

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;}

can you paste the index page code also.... Need to look for the css name that your index page column use...

Code:

.rsidebar{width:210px;float:right;color:#666;margin:0 auto;padding:0 10px 5px;}

That's the size of right side bar.

Code:

.lsidebar{width:160px;float:left;color:#666;margin:0 auto;padding:0 10px 5px;}

This the size of left side bar.

But you need to change this first.

Code:

#sidebar{width:420px;float:right;font-size:11px;margin:5px;padding:0;}

This one is for the 'A part'

Code:

#content{width:535px;float:left;line-height:140%;margin:5px auto;padding:0;}

Change the value of the width.
Beware of the padding px size. And the width of .class inside it.

**IMPORTANT : Please save backup css. If broken.. replace bak the original one.
Life and learn babeh..

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 &raquo;'); ?>


				<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 &raquo; <?php the_category(', ') ?> <?php edit_post_link('| Edit', '', ' | '); ?> </div>

			</div>
				</div>
		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></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(); ?>

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>

and the lsidebar

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>

and the rsidebar

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>

Originally Posted by calvynlee

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???

by looking at the sidebar both left and right... its exactly as bro mystic said.. if you have set the width correctly then it should be fine..

for the content section try to increase .entry class width..

.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}

and

.entry2{width:510px;float:left;color:#666;text-align:justify;margin:5px auto;padding:5px 6px 10px;}

try to increase the red color widths as highligthed above in your css file and see whether it work or not....

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?

Originally Posted by calvynlee

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 taken a look on it for half an hour now but still couldn't locate where the heck the vert line come from...this one is very tricky to spot... or maybe after few beers , 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...

imfreelancer ...
YES! you're correct.

it's a background image located here
as the code mention it too..

#bgbox{width:970px;background:url('images/cbck.gif') repeat-y;margin:0 auto;padding:0}

need to redesign the image, replace the original one. Then should be ok.

Originally Posted by mysticmind

imfreelancer ...
YES! you're correct.

it's a background image located here
as the code mention it too..


need to redesign the image, replace the original one. Then should be ok.

Gee... i taken a look on that image file before and didn't notice anything wrong with that cbk.gif file... d@mm.... its the beer fault... hahah...

i think i have to apply "Don't Drink and Coding" lioa....