Roundcube Community Forum

 

Default Skin with Text under Icons on Mail Page

Started by jeffshead, July 26, 2010, 02:53:55 PM

Previous topic - Next topic

jeffshead



komsomolec

Thank you very much for this tweak, but after applying it the buttons "More.." and "Mark" don't work :( Any suggestions? Do you have the same issue?

jeffshead

#3

jeffshead

#4

komsomolec

Dear jeffshead! I think it would be nice if you post the whole skin with modified files here. Thanks a lot!

jeffshead

Quote from: komsomolec;29304Dear jeffshead! I think it would be nice if you post the whole skin with modified files here. Thanks a lot!

I added them to the previous post.

komsomolec


ABerglund

Any chance that someone will post the same skin file package for 0.4-stable?
Arne Berglund
SysAdmin, Internet Services
Lane Education Service District
Eugene, OR, USA

jeffshead

Quote from: ABerglund;29308Any chance that someone will post the same skin file package for 0.4-stable?

Have you compared the lines of code in the different versions? It's probably identical.

Did you try editing your own templates as described in my post?


stkcode

OK...well thought I'd post the code here in case anyone wants to do it the way I was talking about.

This only requires 4 lines of code...adding one line to 3 files and changing one line in another file.

This is for Roundcube 0.4 stable.



Open .\skins\default\templates\mail.html and go to around line 128.

Find:

<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button messagemenu" title="messageactions" onclick="rcmail_ui.show_popup('messagemenu');return false" content=" " />


Add after:

<div style="float:left; clear:left; margin:-5px 0 0 0; font-size:10px; color:#666;">Check   Create    Reply   Reply All  Forward  Delete    Spam   Mark     More...</div>




Open .\skins\default\templates\message.html and go to around line 29.

Find:

roundcube
:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mboxlist" />


Add after:

<div style="float:left; clear:left; margin:-5px 0 0 46px; font-size:10px; color:#666;">Create    Reply   Reply All  Forward  Delete    Spam   More...</div>




Open .\skins\default\templates\compose.html and go to around line 31.

Find:

<roundcube:button name="messageoptions" id="composemenulink" type="link" class="button messagemenu" title="messageoptions" onclick="rcmail_ui.show_popup('composemenu', true);return false" content=" " />


Add after:

<div style="float:left; clear:left; margin:-5px 0 0 52px; font-size:10px; color:#666;">Send     Spell     Attach  Signature  Save     More...</div>




Open .\skins\default\mail.css and go to around line 30.

Find:

margin
-right10px;


Replace with:

margin
-right18px;



I've tested the above in FF 3.2.8, IE 8 and Opera 10.61 and all appears to be correct minus the spacing between the Spam and Mark button.  A better way to do this would be to eliminate the all the   all together an put each text in it's own element.

stkcode

#12
Last changes to the code I posted in post #12.

I really didn't like the text being virtually on top of the images...so I added some breathing room.

This will add a space between the image buttons and the text.

Since the message toolbar position is absolute...we need to move it up some to allow more room for the text below the buttons.

Open .\skins\default\mail.css and go to around line 7.

Find:

top: 47px;


Replace with:

top: 40px;



Ok, now we have the extra space to add the gap between the images and the text.

Find around line 32 (this presumes you have done the changes I listed in post #12):

margin-right: 18px;


Add after:

margin-bottom: 4px;


All done...now you should have a space between the images and the text...no more "crammed" text.

jeffshead

Leave it to Microsoft...

The text and buttons are not in alignment with IE9.:mad:

Back to the "drawing board".