(compensating for larger folder icons...)

All style (template, theme and imageset) related questions for the new release; advice, feedback here please.
Post Reply
cutaia
Registered User
Posts: 45
Joined: Wed Mar 30, 2005 4:08 am
Location: Aurora, CO
Contact:

(compensating for larger folder icons...)

Post by 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:

Image

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:

Image

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?

Image

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
Registered User
Posts: 4
Joined: Thu Oct 26, 2006 6:34 am
Location: France
Contact:

Re: (compensating for larger folder icons...)

Post by danny-dev »

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

Image

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;
    }
    
Last edited by danny-dev on Mon Sep 10, 2007 8:26 am, edited 1 time in total.
Powered by Linux
cutaia
Registered User
Posts: 45
Joined: Wed Mar 30, 2005 4:08 am
Location: Aurora, CO
Contact:

Re: (compensating for larger folder icons...)

Post by 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
Registered User
Posts: 4
Joined: Thu Oct 26, 2006 6:34 am
Location: France
Contact:

Re: (compensating for larger folder icons...)

Post by danny-dev »

cutaia wrote:Any ideas why?
Because IE is very poor navigator, you can try firefox, opera or another....
See my first post for the fix ;)
Powered by Linux
cutaia
Registered User
Posts: 45
Joined: Wed Mar 30, 2005 4:08 am
Location: Aurora, CO
Contact:

Re: (compensating for larger folder icons...)

Post by cutaia »

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

I appreciate the help!
Post Reply