Recent Topics

1 Apr 29, 2008 06:26    

My b2evolution Version: 2.x

You have all been such a huge help in the past, so I come to you again humbly begging for your assistance. I have looked everywhere and tweeked every paramiter I am brave enough to touch, but I still cant figure out how to make the middle column (where the post text appears) to be wider. I am using Evopress and when my posts come up there is a lot of extra gray space on each side. I want the gray area shrunk and the body of my post to be wider. I think the white middle column is an image called kubrickbgwide but I am not sure. I have tried to make that image wider but flat out don't know how. Any help is appreciated. I have messed with this problem off and on for about 3 weeks now, so that tells you how little I know of programming.

to view my site: http://www.ifurbish.com/b2evolution/blogs/blog1.php/2008/04/24/kids-room-lamp-with-flower-bug-theme#more29

Thank You,
Carmen

3 Apr 29, 2008 16:00

it's not hard to increase the usable area however the view will be messed up due to the bg image's widths.. giving remote instructions is also a solution but better if you insist using evopress theme, i can modify it for you some time.. compress your evopress folder, upload and give me a link if you dont have private files inside (a copyrighted img you dont want to share may be : P).. cheers..

4 Apr 29, 2008 16:16

Piece of cake. I widened my evopress immediately due to the same thing: too much white space wasted on single post pages. My unmodified version of evopress/style.css from v2.4.1 says this about the "wide column" part:

.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}

Here's a little lesson in CSS for ya: "margin" goes outside the box, "padding" goes inside the box. The 4 numbers for margin and padding are "top right bottom left". The "width" bit is forcing the width of (here it comes) the box. You can see the box by cheating if you want to.

.widecolumn {
margin: 5px 0 0 150px;
border: 1px solid red;
padding: 10px 0 20px 0;
width: 450px;
}


I put the margin above the border above the padding because to me it looks more logical, but it's actually the same thing.

So anyway now you can play with stuff. If you change the "width" to 500 your box won't be centered anymore because that 150px left margin means there will be that many pixels on the left of the box. So to get 500 wide AND keep it looking centered you would have to take half of the increased width away from the 150, meaning change it to 125. Like so:

.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 125px;
width: 500px;
}

But hey guess what: that box is in a bigger box so you actually don't need a width parameter at all. Anyway that's the basics of it so here's what I have in my style sheet. You can experiment with a few different things and see what makes sense, then when you're done you'll have what you want AND know how it happened.

.widecolumn {
margin: 5px 58px;
padding: 10px 0 20px 0;
line-height: 1.6em;
}


Yeah I know: I only have 2 numbers in my margin thing. So in that case it means "top and bottom, then left and right". So for my style sheet I have 58px on the left and right of the widecolumn box. Make sense?

Oh and each time you edit your style sheet and upload it you will have to do a hard refresh on the page to get it to take effect. CTRL + F5 will do that for you, and to make sure you got it going on just add a border and reload the page expecting to see a red box around your single post.

Hope it helps!

5 Apr 30, 2008 03:21

EdB,
Thank you very much. What a helpful reply! I appreciate you taking that much time to help someone you don't even know. I am headed to try to fix my site and will let you know how it goes. Thanks for doing such a great job explaining it all to me. (makes it a lot less scary when you know what your changing)

Carmen

7 Apr 30, 2008 05:25

iFurbish wrote:

Okay I did this

.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 58px;

but now it overlaps the white box behind it. How do I make that white box bigger? See....

http://www.ifurbish.com/b2evolution/blogs/blog1.php/2008/03/20/decorative-flower-vases#more26

thanks for ignoring my offer : P..
that white box is your background image 'kubrickbgwide.jpg' you can stretch it with css, but better and easier: once you have obtained the width you wanted for your page, only open and widen that image with an image editor

8 Apr 30, 2008 06:57

Thank you I will try that. And yes thank you as well for your first post, it was a thoughtfull offer and I am sure you mean well. I am just not interested in switching skins and am afraid that if I let someone else fix my files they would put some secret code in them to activate a death star and blow up the galaxy... taking my site with it. LoL I am sure you are a fine upstanding citizen with not even a parking ticket to your name, but the though just scares the poop out of me since I wouldn't know if the files were good or evil. So now I am off to resize that image with gimp!

crossing my fingers ...
Carmen

9 Apr 30, 2008 07:13

iFurbish wrote:

it was a thoughtful offer and I am sure you mean well. I am just not interested in switching skins and am afraid that if I let someone else fix my files they would put some secret code in them to activate a death star and blow up the galaxy...
Carmen

ouch that hurt a little ;) nvm, i know that you did not mean anything personal..
a general recommendation; in addition to all those advanced image tools, i would recommend [url=http://www.irfanview.com]Irfan view[/url] for basic quick jobs.. a small but yet effective tool (about 450 kb or sth : P) (i am not affiliated in anyway of course (: and it was open source when i checked last)

10 Apr 30, 2008 16:19

I don't think it's the image making it look too wide. What it is doing is lining up with the extra-wide image in the header. Lemme play for a second or ten and see what is doable there...

BTW if you add in the "border: 1px solid red" you'll see where the margins and paddings are doing their thing but yeah it ain't nothin' to tweak it this way or that so hang tight...

11 Apr 30, 2008 16:32

Okay this was too easy. Look at your margin line. 4 numbers, so it means "top right bottom left". Since you have "5px 0 0 58px" that means you have 58 pixels on the left and zero pixels on the right. And where is the text going too far? On the right!

So either add margin to the right or simply use two numbers.

margin: 5px 58px; will get your text centered inside the image.

Stretching the image would be required if you want the edges to line up with the image on top, but that won't be enough because of how the boxes that hold those images are defined. For doing that stuff start googling "learn css" and all sorts of groovy stuff will be revealed to you.

12 Apr 30, 2008 16:42

iFurbish wrote:

... I am just not interested in switching skins and am afraid that if I let someone else fix my files they would put some secret code in them to activate a death star and blow up the galaxy... taking my site with it. LoL I am sure you are a fine upstanding citizen with not even a parking ticket to your name, but the though just scares the poop out of me since I wouldn't know if the files were good or evil. ...

Well crap on a cross. Dig this: editing files means you just changed your skin, and if you don't know what you're doing with your style sheet then how do you know I'm not telling you to add malicious code?

13 Apr 30, 2008 18:37

I guess I like to think that with so many people able to see the suggested changes posted on the thread ... someone would tell me if it was bad code? Heck I don't know. I appreciate the help from everyone! Guess I am a bit naive and cautious. But that certain doesn't mean I am not grateful for all of the help. I will try stretching the image. I want to fit a few adsense boxes with the text but everytime I try it has to shove all of my text over because there is not enough room to put them where I want them.

Thank You again!
Carmen


Form is loading...