(compensating for larger folder icons...)

[cutaia]

I asked this question on the regular phpbb.com board, but it just occurred to me, that this may be the better place to ask (Seeing as all the brilliant minds are over here. ).

I'm trying to start styling a template, but I ran into a problem when I changed the size of the folder icons. I made them larger, which has left me with the following:



As you can see, I have two problems:

1) The left margin of the text is showing up over the right side of the image. I've tried adjusting the left-padding on the text, or adding in margins, but when I do that, this is what happens:



The information to the right of the forum descriptions gets shifted to the right as well. Then the last column (Last Post) ends up at the bottom left. I need to either figure out a way to do this without adjusting the padding...or figure out what I can do to offset that (e.g. decreasing the overall width of the main column?)

2) The second problem is that the rows aren't tall enough to properly fit the new larger images. How would I go about increasing the size of these row heights?



I'm finding that changing styles isn't quite as easy as before, so I was hoping someone could point me in the right direction as to how to properly tweak the css.

Thanks in advance!

edit: Also...which css line changes the font color for in-post text.

[danny-dev]

this is a example for folders width 108x108; (original 27x27)



It is necessary to add the difference to the values, in the event 108 - 27 = 81
open content.css :

1. Code: Select all

         ul.topiclist dt {
   /*       width: 50%;*/
            width: 45%; 
         }

2. Code: Select all

         li.header dl.icon dt {
   /*       padding-right: 44px;*/
            padding-right: 125px;
         }

3. Code: Select all

    dl.icon {
   /*min-height: 35px;*/
   min-height: 116px;
   } 

4. Code: Select all

         dl.icon dt {
   /*       padding-left: 45px;*/
            padding-left: 124px;               /* Space for folder icon */
         }

   Code: Select all

   dd.lastpost {
   /*	width: 25%;*/
   	width: 20%;
   }

   and in tweaks.css
   find :

   Code: Select all

   dl.icon {
   	min-height: 35px;
   	height: auto !important;
   	height: 35px;
   }
   

   replace with :

   Code: Select all

   * html li.header dl.icon {
   	height: 1%;
   }
   * html dl.icon {
   	min-height: 116px;
   	height: auto !important;
   	height: 116px;
   }
   

[cutaia]

You're so awesome it's ridiculous.

The padding is working perfectly now. The height, however, only works in Firefox. I did the stuff in tweaks.css and everything, but it's still not working in IE6 for me. Any ideas why?

[danny-dev]

Any ideas why?

Because IE is very poor navigator, you can try firefox, opera or another....
See my first post for the fix

[cutaia]

Awesome...I'll have to get home before I can test it in IE6, but it certainly looks sound.

I appreciate the help!