If you are trying to put bigger topics folders (compared to default prosilver ones), here are a few CSS fixes which will make you avoid text overlapping and having the icons partly hidden.
Reminder : To modify the board's CSS beyond the simplified colors and pics management, you have to pass by
Display > Colors > CSS Stylesheet (tab), then you'll have a text field where you can add CSS code which will override the board's already defined properties. CSS allows you to push the board's appearance personalization even further. There are several sites where you can learn CSS, such as
Newbies Paradise, where its tutorials are adapted to newbies.
Text overlapping fix
Prosilver's folders dimensions are normally 35*35. But when we put folders that have bigger dimensions, the text overlaps the pic, and since I can't find the field to modify this setting in Forumotion's admin panel, we'll go for a CSS fix.
As example, your icons are 40*40 big. So, we'll add a small 10-20px padding-left in order to push the texts to the right :
.topics li.row dl.icon, .pmlist li.row dl.icon
{
padding-left: 20px;
}
Take note that I gave it for both the topic list and the PM list since they use the same folders and so, have the same text overlapping issue.
Then set the number of pixel in order to have just enough space between the icon and texts..
Remove the message icons column's left border
By applying the padding-left above, we get a border which overlaps our folder. This is the left border of the message icons column for which the icons are placed just above the folders, just like in original phpBB3 forums. To remove this unwanted border, we'll use this code :
.topics li.row dl.icon dd.dterm
{
border-left: none;
}
Tada, no more border !
Set the row height
The width is now correct, but the height is still to be set. We'll take the same example as above, with a 40*40 folder instead of a 35*35 one.
So, we'll redefine the code which have been defined to set the height.
Original code :
ul.topics li.row dl.icon, ul.pmlist dl.icon
{
min-height: 35px;
height: auto !important;
height: 35px;
}
New code :
ul.topics li.row dl.icon, ul.pmlist dl.icon
{
min-height: 40px;
height: auto !important;
height: 40px;
}
But there is still a problem : Internet Explorer 6 doesn't handle min-height, and the fix which has been first made by phpBB.com Development Team doesn't work anymore.
I propose you a new fix that I discovered while doing some tests in my pro_ubuntu style I made for the original phpBB3, and that works fine under IE6. For you, I adapt it for Forumotion :
* html ul.topics li.row dl.icon dd, * html ul.pmlist li.row dl.icon dd
{
height: 40px;
overflow: visible;
}
The
* html is a CSS hack which make CSS code being interpreted only by Internet Explorer 6 and previous versions, and so, this allows to put CSS code specifically for IE6 without having it interpreted by IE7+, Firefox, Opera and other modern browsers.
Final result
Here is the final code that you should have now in your "CSS Stylesheet" field :
.topics li.row dl.icon, .pmlist li.row dl.icon
{
padding-left: 20px;
}
.topics li.row dl.icon dd.dterm
{
border-left: none;
}
ul.topics li.row dl.icon, ul.pmlist dl.icon
{
min-height: 40px;
height: auto !important;
height: 40px;
}
* html ul.topics li.row dl.icon dd, * html ul.pmlist li.row dl.icon dd
{
height: 40px;
overflow: visible;
}
And the result on my testboard :
http://youwontfindme.editboard.com/forum.htm
(I can eventually make screenshots, so I can continue to show you the result even if I'm testing other styles on the forum).
