Margin / Padding problems :(

[The_Head]

:confused:

Hi guys , Im try to decrease a gap at the bottom of my forumhome categories.

Here's a screen of what im trying to do :

http://img829.imageshack.us/img829/8636/unfixed.jpg

Here's a photoshoped image of how im trying to get it to look :

http://img9.imageshack.us/img9/5933/fixedni.jpg

Ive tried adjusting several margins & padding but none seem to work this way. Any help would be greatly appreciated.

The Head :)

[CroNiX]

A link to your forum exhibiting the problem would help more than a picture so we can dissect the css.

[The_Head]

Its in my sig , sorry. The url is www.tf1s.com. Its a private forum so hopefully u can see what you need to without signing up :)

[CroNiX]

Is it possibly your browser? Looks like how you want it, I think, in latest firefox?

[The_Head]

Hence the screenshots. I don't want it looking like that anymore ( as it is now ) , ive re sized the icon images ( see first screen ) Now i need to shrink the gap that has been left.

[CroNiX]

It looks like if you just resize that ONE image that isn't as tall as the rest of them it would look normal.

[The_Head]

Well thats the point , im trying to make them smaller now , not larger. The smaller image is how they will look , the large image is how it looks at the moment. So im trying to close the bottom margin so the gap at the top & bottom are equal.

[CroNiX]

the css style for class ".foruminfo"
has a min-height of 48px so that they are all the same height.
You can make that smaller. It is preventing it from shrinking if your image is smaller than "normal" for that spot.

[The_Head]

Ok , can you explain that in English. Ive posted this here because i need help. If i knew what you were meaning i wouldn't need help :)

I thought you would be able to just adjust the padding or margin to suit. What & where do i find what needs to be edited.

Thx.

[CroNiX]

I don't have a simple answer. vb made things very hard to change. What I have done is export all of my css from the database to files and add all of my manual changes to additional.css.

I'm sorry its not a simple answer.

AFAIK there isn't really a simple way to just change this parameter like there used to be in vb 3.x, which makes it very difficult for most people to customize anything in vb. vb has become a coders software as opposed to consumer software and the average person would not be able to really use the product. Way to complicated for most people who just want to run a website.

[The_Head]

Im amazed and find that hard to believe to be honest. Im not saying your not correct but it seems like a simple edit in the StyleVars or something.

Considering how customizable VB is , this seems like a very small edit. So if i wanted to do it your way , where do i find these files : the css style for class ".foruminfo"

Thx

[CroNiX]

Thats the problem, not all of the vars are IN stylevars (yet), therefor not changeable without manual editing.

The only way I know how to change ALL style attributes is to:
1) in admincp, options, style and language settings: change "store stylesheets as files" to YES.

Assuming that directory it mentions is writable, it will dump all of the css into files which are located in:
/clientscript/vbulletin_css/style00001l

(look at all of the thousands of style definitions in those files...not ALL of those are accessible via their built in stylevars manager)

Its just easiest to add something like this to additional.css (which will be empty to start):
.foruminfo {min-height:40px !important}
rather than messing with their css files which will get overwritten with upgrades.

change the height to whatever works.

If someone has a simpler explanation I would love to hear it as well.

[The_Head]

Thx CroNiX , that seemed to work with making the margins bigger , but not smaller. Thx for trying anyway :) I think were in the ball park.

Thx.

[CroNiX]

try doing the same thing to the parent container, which is ".forumrow". It also has a min-height set.

Are you using firefox with the firebug extension? You can edit this stuff in real time within your browser to try tweaks. It also makes it a million times faster to find the style rules because it will show them as you mouseover your screen.

[The_Head]

How do i find the parent container, which is ".forumrow" ?

Thx CroN :)

[CroNiX]

Its hard to explain unless you know html.

In general:
<div id="parent">
<div id="child1">This is child one because it is contained WITHIN parent</div>
</div><!-- This is end of parent element -->

In this case it looks like:

<div class="forumrow table">
<div class="foruminfo td"> .... </div>
</div>

so, div.forumrow is the parent of div.foruminfo

I hope that helps.

(firebug also makes this very easy to find without looking at the raw html)

[The_Head]

I know a little HTML , but where do i find these files your editing ? Through FTP , Admin Panel ? I really don't know what file your editing there :(

Thx.

[CroNiX]

I am using firebug and looking at the raw html output that your forum is producing. I am then finding the style rules (also with firebug) associated with those html elements so you can alter them in your custom.css file. I'm not editing any files. Your browser probably also has a "view page source" or similar so you can view the raw output if you don't want to use firebug, but then you will have to manually find what you are looking for in that huge page of code. Firebug highlights the html code and css code when you mouse over your page making it VERY easy and fast to find what you are looking for. Not to mention you can manipulate your webpage DIRECTLY in real time from within firebug to try different tweaks instead of trying something, saving it, refreshing browser to see if it worked...no? Wash and repeat until you do... This eliminates all of that. Once you tweak it live in the browser, you just copy the rules that worked to your additional.css file.

But, if your interested, the thing that is actually generating that html in vbulletin are the templates. They are located in admincp -> Styles and Templates -> Style Manager

From there you can
1) "search in templates"
or
2a) Click on Style Manager
2b) On right hand side, for your style (default style if you haven't added any others), in the dropdown on the right, select "edit templates". Now it will list all templates and you find the one you want and edit it the way you want. I'd be very careful in there and be sure to "save in template history" so you can undo it if you need to. However, all style information is contained in the stylesheets...but the templates will tell you the element id's and classnames which are referenced in the css.

You having fun yet? :D

Make your life easier. Watch this. http://getfirebug.com/video/Intro2FB.htm then get it http://getfirebug.com

[The_Head]

Yeah ive done this before using Firebug but never really found anything that changed the values im looking for. Im gonna just leave it for now. I thought it would be a case of changing 1 or 2 values.

Thx for all your support & trying to resolve the issue :)

Maybe someone will create a mod lol :)

Thx again CroNiX