WordPress › Support » Help needed : make second sidebar broad

sandeep1414
Member
Posted 2 years ago #

Hello guys,

I want to make second sidebar broad so that feedjist widgets appear full without any cutting..

My site url is http://sabkuchhere.co.cc/

below is screenshot of what i want..

http://i39.tinypic.com/2hrzrxd.png
Mercer2789
Member
Posted 2 years ago #

It's a simple css problem.
I didn't look at your css file or the source code but know whats going on.

If you want to make that second sidebar wider you need to make room for it.
The entire section that displays your content and sidebar needs to be widened to accommodate a wider sidebar. Then the main sidebar needs to be widened accordingly followed by widening the inner right side bar.

Lets assume you want it widened by 50 pixels just as an example.
If that div for the smaller sidebar on the right is set in the current css to 150 it will say width: 150px, change the 150 into 200. Next the main sidebar's div might say width: 300px, change that to 350. and finally the main div in your css file that decides your pages width usually named #content or #page (not the body) needs expanded by 50px.

Every theme's css is different so without going through it I cant tell you exactly how. If you feel like you understand what I said and want to apply it to your themes css file firs make a back up. copy past the entire css files text and save it just in case you can't make it work and want to return it to how it was previously.

Also, you might have tables in place of divs, if that is the case you would need to change the width accordingly in the tables.
sandeep1414
Member
Posted 2 years ago #

@Mercer2789 Bro plz tell me the exact solution . i am going to paste code of style.css

http://pastebin.com/fuvXQ7vb

waiting for reply....
alchymyth
The Sweeper
Posted 2 years ago #
there are three background images that need to be edited for a new width:
http://sabkuchhere.co.cc/wp-content/themes/GreenTweet/images/bgr_body.png
(edited:
http://img210.imageshack.us/img210/9237/sabkubgrbody.png )

http://sabkuchhere.co.cc/wp-content/themes/GreenTweet/images/bgr_footer.png
(edited:
http://img138.imageshack.us/img138/2060/sabkubgrfooter.png )

http://sabkuchhere.co.cc/wp-content/themes/GreenTweet/images/bgr_header.png
(edited:
http://img708.imageshack.us/img708/9920/sabkubgrheader.png )

and in style.css of your theme, find the following styles and increase the width by 50px each - the result shown below:
```
#page{
	width:1034px; /* was 984px; */
	margin:0 auto;
}
```
```
#sidebar{
	width:373px; /* was 323px; */
	float:right;
	padding:0 10px 0 0;
}
```
```
#sidebar_right{
	float:right;
	width:187px; /* was 137px; */
	padding:0 10px 0 9px;
}
```
you can edit the background images yourself and save them under the same name; or you could dowload the edited images and save them under their original names and upload them into the images folder of your theme.
sandeep1414
Member
Posted 2 years ago #

Thanks alchymyth for the solution. I am going to aplly it. but tell me will it not increase the width of site and i have to pan with scrollbar to see full site..
sandeep1414
Member
Posted 2 years ago #

is there can be way in which we can reduce the width of post column and increase width of second sidebar, so that total width remain same...
alchymyth
The Sweeper
Posted 2 years ago #
sure, edit the following styles in style.css to the values shown below:
```
#content{
	width:591px;
	float:left;
	padding:0 0 0 10px;
}

#sidebar{
	width:373px;
	float:right;
	padding:0 10px 0 0;
}

#sidebar_right{
	float:right;
	width:187px;
	padding:0 10px 0 9px;
}

.post{
	width:528px;
	margin:20px 0 30px 33px;
}
```
and then edit two background images:

http://sabkuchhere.co.cc/wp-content/themes/GreenTweet/images/bgr_body.png

http://sabkuchhere.co.cc/wp-content/themes/GreenTweet/images/bgr_header.png
sandeep1414
Member
Posted 2 years ago #

How to edit these images...

http://sabkuchhere.co.cc/wp-content/themes/GreenTweet/images/bgr_body.png

I cannot see above image ...

How to adjust pixels in this images..

can these be edited in paint brush....
alchymyth
The Sweeper
Posted 2 years ago #

I cannot see above image ...

this image is a very narrow strip (only 1px high)
paint brush won't work as these images are png format with transparent backgrounds.

here is a edited version of the bgr_body.png:
http://img260.imageshack.us/img260/9237/sabkubgrbody.png

and here is the edited bgr_header.png:
http://img217.imageshack.us/img217/9920/sabkubgrheader.png

hope it works, good luck
sandeep1414
Member
Posted 2 years ago #

@alchymyth i did all changes as u mentioned but it didn't change anything......

or will it take some time for changes to display??

check http://sabkuchhere.co.cc/
sandeep1414
Member
Posted 2 years ago #

feedjit widget is still appearing incomplete...
alchymyth
The Sweeper
Posted 2 years ago #

press the 'reload' button on your browser, or press CTRL and F5 at the same time, to reset and clear the browser cache -
your changes are visible here on my end.
sandeep1414
Member
Posted 2 years ago #

thanks for the solution but now Featured Posts section is cut from right and also the broad sidebar where search option is there has created more space on right...

also can u solve this problem...

http://wordpress.org/support/topic/384303?replies=13

especially the post mentioned below..

Guys i have only option of editing two narrow left and right sidebars in widget area.... Tell me how to insert widgets like ads to top broad sidebar......

I have explained my problem using screenshot below..

http://i39.tinypic.com/5u3io0.png
sandeep1414
Member
Posted 2 years ago #

here is screen shot of problem faced now..

http://i43.tinypic.com/acr7rl.png

alchymyth
The Sweeper
Posted 2 years ago #

here is another list of styles in style.css that need editing, mostly the width value (new values are in the styles below):

#board_items{
	width:534px;
	padding:15px 0 0 30px;
}
#board_body{
	width:100%;
}
#board_carusel{
	width:534px;
	height:120px;
	position:relative;
}
#board_carusel .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}
.board_item{
	width:534px;
	height:120px;
	overflow:hidden;
}

#sidebar_about{
	width:344px;
	overflow:hidden;
	padding:0 0 17px 15px;
	background:#fff;
}

#sidebar_ads{
	background:#fff;
	padding:15px 0 0 9px;
	width:353px;
	overflow:hidden;
}

#sidebar_ads div{
	float:left;
	padding:0 25px 10px 15px;
}

#sidebar_search{
	width:100%;
	overflow:hidden;
	width:353px;
	padding:0 0 0 9px;
}
#sidebar_search_val{
	float:left;
	background:#fff;
	border:1px solid #e5e5e5;
	width:283px;
	font-size:13px;
	font-family:Verdana, Geneva, sans-serif;
	color:#000;
	padding:8px 9px 9px 9px;
}

hope this brings most things back into balance.

i am sure you learned so much about editing css styles by now, that you will be able to make smaller adjustments yourself.

i'll have a look at your other tread later today.

edit:
style to fix the dropped comment count, new width value below:

.post-top h2{
	font-size:29px;
	color:#000;
	font-weight:normal;
	font-style:italic;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0 0 6px 0;
	float:left;
	width:465px;
}

sandeep1414
Member
Posted 2 years ago #

Thanks alchymyth plz also take look at other thread...
sandeep1414
Member
Posted 2 years ago #

Bro this is one last problem...

here is the screenshot of this...

http://i43.tinypic.com/dlrdj4.png
alchymyth
The Sweeper
Posted 2 years ago #
try to increase the width here, like below:
```
.board_item{
	width:540px;
	height:120px;
	overflow:hidden;
}
```
just be aware that it can always happen, that some small detail in the blog might no be as you want it to be, dependant an the titles and excerpts of the posts.

i leave it to you to fix any further details in the css files.
sandeep1414
Member
Posted 2 years ago #

ok thanks...
sandeep1414
Member
Posted 2 years ago #

Bro there is some margin problem in pages other than home page like about, sitemap and sms updates pages..

below is screenshots.. of problems

http://i44.tinypic.com/dg7a6f.png

http://i42.tinypic.com/35cg47p.png
alchymyth
The Sweeper
Posted 2 years ago #
- for the about page, change the width in this style to the value below:
```
.post-page{
	width:528px;
	margin:20px 0 30px 33px;
}
```
- banner:

you probably entered the code for the banner into index.php; repeat the same thing for single.php and page.php.

- top background image:
edited version:
http://img64.imageshack.us/img64/5489/sabkubgrheadersub.png

hope this is all,
just come back if you find more, good luck.
sandeep1414
Member
Posted 2 years ago #

Bro below is the screen shot of few problem faced...

http://i40.tinypic.com/ws1zrn.png

Plz tell me how you edit the backgound images so that i can do myself in future, so i will not have to disturb you.. Do u edit them in photoshop... please tell the procedure...

Also i want to insert the tabber of recent posts, popular posts and archive below 300*250 ad block...
like this http://i41.tinypic.com/311nn0m.png
sandeep1414
Member
Posted 2 years ago #

Bro how u change and set the exact pixels in editing background image???
alchymyth
The Sweeper
Posted 2 years ago #
photoshop is ok.
just make sure to save the image as a transparent .png file.
you will probably find online tutorials how to use photoshop.

the edit was to move the grey dividing line to the left, by exact 50px.

however, you can also use the image file linked to in my last reply.

the 'share box' : new width in the style below:
```
.post_digtwit{
	width:486px;
	margin:20px 0 0 0;
	background:#fafafa;
	border:1px solid #dedede;
	padding:10px 20px 20px 20px;
}
```
the line above the comments: new width in the style below:
```
#comment_container{
	width:528px;
	margin:20px 0 30px 33px;
}
```
Also i want to insert the tabber of recent posts, popular posts and archive below 300*250 ad block...

search the forum and the codex how to make a section of the sidebar dynamic.
you will need to edit sidebar.php and functions.php of your theme.

if you have started doing this and run into problems, start a new thread in this forum and ask for help.
sandeep1414
Member
Posted 2 years ago #

Ok bro thanks. for this problem i will start new thread...

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] Help needed : make second sidebar broad (25 posts)

Topic Closed

About this Topic

Tags

Code is Poetry