Author Topic: Default Skin with Text under Icons on Mail Page  (Read 10490 times)

Offline jeffshead

  • Full Member
  • ***
  • Posts: 71
Default Skin with Text under Icons on Mail Page
« on: July 26, 2010, 02:53:55 PM »
« Last Edit: July 26, 2010, 04:59:51 PM by jeffshead »

Offline dvdsmith

  • Newbie
  • *
  • Posts: 7
Text under Icons on compose page
« Reply #1 on: August 02, 2010, 03:52:26 PM »

Offline komsomolec

  • Newbie
  • *
  • Posts: 3
Default Skin with Text under Icons on Mail Page
« Reply #2 on: August 11, 2010, 05:17:20 AM »
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?

Offline jeffshead

  • Full Member
  • ***
  • Posts: 71
Default Skin with Text under Icons on Mail Page
« Reply #3 on: August 11, 2010, 09:23:33 AM »
« Last Edit: August 11, 2010, 10:11:26 AM by jeffshead »

Offline jeffshead

  • Full Member
  • ***
  • Posts: 71
Default Skin with Text under Icons on Mail Page
« Reply #4 on: August 11, 2010, 09:24:10 AM »
« Last Edit: August 11, 2010, 09:40:00 AM by jeffshead »

Offline komsomolec

  • Newbie
  • *
  • Posts: 3
Default Skin with Text under Icons on Mail Page
« Reply #5 on: August 11, 2010, 09:31:31 AM »
Dear jeffshead! I think it would be nice if you post the whole skin with modified files here. Thanks a lot!

Offline jeffshead

  • Full Member
  • ***
  • Posts: 71
Default Skin with Text under Icons on Mail Page
« Reply #6 on: August 11, 2010, 09:40:37 AM »
Quote from: komsomolec;29304
Dear 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.

Offline komsomolec

  • Newbie
  • *
  • Posts: 3
Default Skin with Text under Icons on Mail Page
« Reply #7 on: August 11, 2010, 09:50:04 AM »
oh, sorry me, i have not made it out)

Offline ABerglund

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 673
Default Skin with Text under Icons on Mail Page
« Reply #8 on: August 11, 2010, 11:18:17 AM »
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

Offline jeffshead

  • Full Member
  • ***
  • Posts: 71
Default Skin with Text under Icons on Mail Page
« Reply #9 on: August 11, 2010, 12:04:12 PM »
Quote from: ABerglund;29308
Any 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?

Offline stkcode

  • Jr. Member
  • **
  • Posts: 13
Default Skin with Text under Icons on Mail Page
« Reply #10 on: September 08, 2010, 01:45:30 AM »

Offline stkcode

  • Jr. Member
  • **
  • Posts: 13
Default Skin with Text under Icons on Mail Page
« Reply #11 on: September 08, 2010, 03:01:26 AM »
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.

Offline stkcode

  • Jr. Member
  • **
  • Posts: 13
Last Change
« Reply #12 on: September 08, 2010, 04:49:55 PM »
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:
Code: [Select]

top: 47px;


Replace with:
Code: [Select]

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):
Code: [Select]

margin-right: 18px;


Add after:
Code: [Select]

margin-bottom: 4px;


All done...now you should have a space between the images and the text...no more "crammed" text.
« Last Edit: September 08, 2010, 06:23:15 PM by stkcode »

Offline jeffshead

  • Full Member
  • ***
  • Posts: 71
Default Skin with Text under Icons on Mail Page
« Reply #13 on: April 30, 2011, 03:04:24 PM »
Leave it to Microsoft...

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

Back to the "drawing board".