Legacy Category Images Size

[Ozzy47]

I did some more playing around with the templates, specifically this time the category image, as I feel it is to small.

First I opened the DragonByte Tech: vBArcade Templates/dbtech_vbarcade_headinclude and after this bit of code:

img.arcade_icon
{
    border: 1px solid black;
    max-width: 40px;
    vertical-align: bottom;
}

I added the following code below that one:

img.category_icon
{
    border: 1px solid black;
    width: 200px;
    height: 100px;
    vertical-align: bottom;
}]

Then in DragonByte Tech: vBArcade Templates/dbtech_vbarcade_home_panels I found this bit of code:

class="arcade_icon"

And changed it to this:

class="category_icon"

In addition I also changed the game panel size to better fit the entire screen.
I did this by opening the DragonByte Tech: vBArcade Templates/dbtech_vbarcade_headinclude and finding the following bit of code:

div.arcade_game_panel
{
    width: 250px;
    margin: 0 5px 10px 0;
    display: inline-block;
    vertical-align: top;
}

And replaced it with this bit of code:

div.arcade_game_panel
{
    width: 281px;
    margin: 0 5px 10px 0;
    display: inline-block;
    vertical-align: top;
}

Basically changed the width from 250px to 281px

 

[Darkwaltz4]

thats great too bad i dont know what resolution everyone's site will be, but good you could fix it yourself. that stuff isnt final though.

 

[Ozzy47]

Yeah I guess once it is final, I could always write a tutorial on how to change chit like that.

 

[Ozzy47]

@Darkwaltz4 I actually found a better way to change the game panel size to better fit the entire screen, this method takes into account for screen resolution.

I did this by opening the DragonByte Tech: vBArcade Templates/dbtech_vbarcade_headinclude and finding the following bit of code:

div.arcade_game_panel
{
    width: 250px;
    margin: 0 5px 10px 0;
    display: inline-block;
    vertical-align: top;
}

And replaced it with this bit of code:

div.arcade_game_panel
{
    width: 19%;
    margin: 0 5px 10px 0;
    display: inline-block;
    vertical-align: top;
}

End result is this:

Basically changed the 250px to 19% taking into account for the margin

I think it fills out the screen nicely that way

 

[Freekoid]

Interesting, I don't know if it looks too uniformed now.. :\

 

[Ozzy47]

Freekoid You mean it looks to uniform, or not enough?

 

[Darkwaltz4]

you are forcing the number of them to show at a time to 5.
you happen to be looking at a screen size where that looks nice.
anything wider or narrower will look bad. sorry.

 

[Freekoid]

Ya, im on a laptop, so anything with a monitor larger may lose this transition.

 

[Ozzy47]

I am on a 24" monitor and it looks fine, maybe it is something like DW said, I did not test this on a fixed skin, so it may look bad on there, but I have only see 5 displayed in a row.

 

[Darkwaltz4]

to reiterate, as i cannot cover whether a site is using a fixed or fluid width, nor what the resolutions of the screens their users will be using, i cannot build that into the default theme, and leave it up to the end using admins to modify this to their liking, if the current model is undesirable.