Small default theme change request: more compact

[Tayku]

Hello!

At first I don't know if this is the correct forum, since I don't have a feature request, but it is no theme pack either.

I'd like to know if there is a possibility to vary the default theme into a more compact one. You see, most displays are wider than high, but Roundcube is quite wasteful with vertical space. A whole iconbar line is given just for four icons: e-mail, address book, settings and logout. Of course, they are given with text, but that's not neccessary.

I'd like to have those four icons (and only the icons) included in the line below. That would save almost 40px vertical space. And, since I do not need the Roundcube logo (I know that it's Roundcube), this could be removed and put the four taskbar icons to the left. There is quite enough space for.

Unfortunately I am not a HTML or JavaScript programmer. I messed around a bit and tried to remove the logo and to add the taskbar instead, but I'm not able to remove the text from the taskbar icons. If someone could help me to have only icons (like the other ones: reload, new mail, etc.), this would be a start. After then there's only the point to remove the void space on top, and voilà: more space for mails.

I'll appreciate any help.

[SKaero]

I created a compact version of the RoundCube skin for one of my clients but it was based off 0.4 so it wouldn't work real well with the current version of RC. You should be able to remove the text from the buttons my removing the label attribute from the roundcube:button's (located in /skins//includes/taskbar.html) It may also help to read through the skin documentation located here: Doc_SkinML

[Tayku]

If I remove the label attribute I get a standard label text (non-localized). That's my problem ... for I don't see a difference between the icons in taskbar and the task-related ones (reload, reply etc.), but one has forced labels, one has none.

The documentation may be helpful, though. I can try it on Thursday (no time today). Thank you.

[SKaero]

Ok it looks like you actually want to add content="" to the tags, but the problem is if there isn't any content the button wont show up and adding a space or   doesn't work so you'll need to work with the css to get it to display without any text or do something like set the content to "." and change the text color to the background color.

[Tayku]

Hm, that could work. But why does it work without any label for the message toolbar icons? I'm no css experienced guy, and it looks like you set the layout for an -Tag. But there are no a-Tags, just roundcube:button (which for both icon bars).

[SKaero]

The roundcube:button code creates the tag, while I haven't looked at the code my guess is its checking the roundcube:button command and that dictates whether it has the text or not.

[Tayku]

Today I found the time to get into CSS hacking and made the proposed changes by try/error. It works, the theme is much more compact. Thanks again for all the advices. Here two pics to compare the gained space:
http://dl.dropbox.com/u/848797/screenshots/scr_20111016-183738.png
http://dl.dropbox.com/u/848797/screenshots/scr_20111016-183823.png

Now I have the four buttons (mail, address book, settings, logout) on the left side of the toolbar, but they're not matching with the other buttons. The size is smaller (25 instead of 35) and I do not have selected versions (greyed out when clicking with mouse). My question is, are these icons somewhere available in other sizes (and free to use), are there any 35px high versions of it, maybe even the greyed-out ones? Or maybe someone here is kind enough to create the icons in the same style as the other buttons? This would be great.

[SKaero]

I've attached the large (32px) mail, address book, and settings buttons with there hover & active states but I don't have the logout button, I've attached a similar icon that maybe you could use instead.
[ATTACH=CONFIG]1774[/ATTACH][ATTACH=CONFIG]1773[/ATTACH]

[Tayku]

That's fantastic! You are my hero! The logout button looks good. I can see more when I put those icons in later.

Maybe one more question, how can I make the logout button the same gray style (selected state) as the other buttons? I'm able to use programs like PaintDotNet, but I don't know the exact parameters.

[SKaero]

I'm not sure on the exact settings, I'm just guessing. I attached the updated image with the logout button with active & disabled states.
[ATTACH=CONFIG]1775[/ATTACH]

[Tayku]

Thanks again very much. This looks quite matching with the rest of the icons. I'm thinking of moving the logout button to the right edge of the screen, but that's an idea for tomorrow. The icons are fine.