Help needed to increase post column width of wordpress theme

I am using Illacrimo 1.1 theme for site avinashtech powered by wordpress.
I need to increase the column width of the post column so that i can have more space for my post.

That is, i want to merge the date colum with post column.
Can any one help?

i can provide the theme php files if required.

 

Your site takes way too long to load! I was going to have a look but it took too long to load I'll see if I can download the theme.

 

Ok, I managed to download the theme.

Your date column is actually a <p> element in the PostHead div and has a margin-left: -70px. One of its parent containers <div class="SC"> has a pdding-left: 100px which is positioning your PostContent div. So add margin-left: -70px to your PostContent div.

You may want to edit the BGC.gif image to remove the background color that appears behind your date.

 

Thanx mate for having a look at theme and providing a solution. But i am a newbie in CSS stuff. Trying to do what you told in my style.css file but no success till now.

i can post the style.CSS file here if you can help me with it. Till i get a response again , i am trying on my own to do what you told me.

 

In you style.css under the /* Post +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ section look for

.PostContent { padding: 0px 0px 5px 0px; font-size: 12px; line-height: 17px; background: url(images/PostHead.gif) repeat-x bottom; }

and replace it with
.PostContent { margin-left: -70px; padding: 0px 0px 5px 0px; font-size: 12px; line-height: 17px; background: url(images/PostHead.gif) repeat-x bottom; }

It's just the margin-left: -70px; that's been added

 

Thanks Gazu,
You almost solved my problem . I added the margin -70px as you told. Now the space for posts got wider as required.

But the date gets mismatched with title when the title is of two rows , and also below posts , the comments and the filed under category doesn,t shift to -70px margin.

 

If you look at your page source by clicking View on the menu bar of your browser and then Source in IE or Page Source in Firefox (in Firefox you can also press CTRL+U) you will see the markup for your page . Now look for the "comments" and "filed under category" sections and check what container is holding them.

Found it? They're in a div named PostDet which is out side the PostContent div so adding margin-left: -70px to the PostDet div will do the trick.

In your css replace .PostDet { padding-top: 15px;} with .PostDet { margin-left: -70px; padding-top: 15px;} it's a few lines further down from .PostContent. That should do the trick.

I'm not sure what you mean by the date gets mismatched with title when the title is of two rows. Do you mean the dotted line under the date is higher than the dotted line under the title?

 

Thanx a lot mate. It solved my problem. I just now need to edit BCG.gif to make the background blend with post. I will try to do that.


With date mismatch, yes i mean the same what u said. i.e. the dotted line under the date is higher than the dotted line under the title?

Can we correct that error?

If possible can we replace that dotted line with a solid single line (i.e. same line below the date and post title).

Also i need to shift comment box too with a left margin as you suggessted for post and other stuff.

Thanks a ton for your help.

 

where are you mate "Gazu"

 

Sorry, I didn't see your post.

The dotted line is caused by background: url(images/PostHead.gif) repeat-x bottom; in .PostHead and .PostDate. To get rid of the dotted line we'll delete those entries but background: url(images/PostHead.gif) repeat-x bottom; is also used in .PostContent for the border at the end of the post so we won't delete the image itself.

To get the line straight we need to change our approach and move the .PostHead left rather than the .PostDate. We also need to give the .PostHead some padding-left so that it doesn't overlap the date, make it 100% wide and give it a bottom border.

.PostHead { position: relative; left: -70px; width:100%; clear: left; border-bottom:solid 1px #1a3265; padding-bottom: 10px; padding-left: 70px; }

Code (markup):

Then we must take out the background: url(images/PostHead.gif) repeat-x bottom from .PostDate and change left: -70px to left: -0px

.PostDate { margin: 0px; position: absolute; top: 0px; left: 0px; text-align: center; padding: 0px 10px 6px 10px;}

Code (markup):

We don't need a bottom border in .PostDate because it's included in .PostHead.

The Comments section seems to be generated by javascript and its CSS is located somewhere else. From what I can gather, it's contained in a div named #disqus_thread so add this to the end of you css file

#disqus_thread {margin-left: -70px;}

Code (markup):

and see if it works.

 

Thanx Gazu for the prompt reply. I am in office and will try to incorporate your suggestions when i am at home and then let you know the result. Thanx again

 

I just replaced Disqus comment system with the default wordpress Comment system and hence you may be able to view the CSS for Comment section. I tried adding your last suggestion about discus_thread but it didnt worked.
Thanx again for your efforts.

EDIT :- thanx mate, my half problem is solved. Just that comment section portion problem remains.
I tried to do something on my own using your suggestions for other stuff but it wasnt good enough and i messed the comment section a bit.

take a look. thanx mate.

 

I did almost what i wanted. Thanx gazu for all the help and your efforts. i tried a bit with comments section and now it works as i wanted.

Just one last thing. Can the date be shifted to right side of post column instead of left and post title to start from left side of post column.

 

I did almost what i wanted. Thanx gazu for all the help and your efforts. i tried a bit with comments section and now it works as i wanted.

Just one last thing. Can the date be shifted to right side of post column instead of left and post title to start from left side of post column.

 

That's great

The easiest way to swap the post date and post header around is to change padding-left: 70px; in .PostHead to padding-right: 70px; That will ensure that long headers don't overlap the date. Then add margin-left: 445px to the end of .PostDate.

 

Thanx Gazu. I did what u said for swapping date and title... Initially the date was interfering with the Line under title so i played a bit with the margin top and it worked.

Thanx a lot mate. Nice to find people like you who are eager to help novice guys like me. Thanks a ton