Change compose button to link

249 views
Skip to first unread message

Shawn Kovalchick

unread,
Feb 4, 2011, 2:30:14 PM2/4/11
to minimali...@googlegroups.com
Would it be possible to change the Compose button to a link that will match the surrounding navigation links?

BTW, This extension is teh awesome!

fDavid

unread,
Feb 4, 2011, 3:05:02 PM2/4/11
to minimali...@googlegroups.com
Great idea! I've made an attempt in CSS, probably it would be easier with Javascript (but I don't know how to modify an extension). Add this to your Custom CSS section:

.z0 {
height: 15px !important;
padding-top: 0px !important;
padding-bottom: 6px !important;
}
.z0>.J-Zh-I {
background: transparent !important;
cursor: pointer !important;
border: 0px solid !important;
display: block !important;
width: 100% !important;
text-align: left !important;
color: #222 !important;
-webkit-border-radius: 0px !important;
float: left !important;
}
.z0:hover {
background: #E3E4E5 !important;
}

It works best with Minimalist Theme, if you use another skin you'll probably need to change the colors.

Shawn Kovalchick

unread,
Feb 17, 2011, 10:34:54 AM2/17/11
to Minimalist Gmail
Thanks, fDavid. I use the Shiny theme. Here is the updated CSS:

.z0 {
height: 15px !important;
padding-top: 0px !important;
padding-bottom: 6px !important;
}

.z0>.J-Zh-I {
background: transparent !important;
cursor: pointer !important;
border: 0px solid !important;
display: block !important;
width: 100% !important;
text-align: left !important;
color: white !important;
-webkit-border-radius: 0px !important;
float: left !important;
}

.z0:hover {
background: #4c566f !important;
}

Jurgen Conrad

unread,
Feb 25, 2011, 10:29:30 PM2/25/11
to minimali...@googlegroups.com
thanks for this - could this be done for the New Contact button? and if so, how?

thanks in advance - regards

jurgen

Lorenz

unread,
Mar 5, 2011, 12:02:48 PM3/5/11
to minimali...@googlegroups.com
It doesn't seem to remove the button pic below the link?

Mike

unread,
May 31, 2011, 2:20:43 PM5/31/11
to minimali...@googlegroups.com
Thanks fDavid and Shawn, that compose mail button had been bugging me for a while. I'm using a few more changes to make it look like the other nav links, thought I'd share them here:

.z0>.J-Zh-I {font-size: 13px !important;}    /* Sets the font size to the same as rest of nav */

.z0>.J-Zh-I {text-transform: capitalize;}    /* Capitalizes the label to match other nav links (Sent Mail and All Mail) */

.z0:hover {background: #636e82 !important;}    /* Same hover colour as other nav links in Shiny theme */


The differences in font size and background colour might just be due to specific settings I'm using. Full CSS below. I've added the "new contact" elements so it does the same to that button, as requested by jurgen.


.z0 , .MX {
height: 15px !important;
padding-top: 0px !important;
padding-bottom: 6px !important;
}

.z0>.J-Zh-I, .MX>.J-J5-Ji {
background: transparent !important;
cursor: pointer !important;
font-size: 13px !important;
text-transform: capitalize;
border: 0px solid !important;
display: block !important;
width: 100% !important;
text-align: left !important;
color: white !important;
-webkit-border-radius: 0px !important;
float: left !important;
}

.z0:hover, .MX:hover {
background: #636e82 !important;
}

Mike

unread,
May 31, 2011, 2:22:56 PM5/31/11
to minimali...@googlegroups.com
Add css rules for .MX and .MX>.J-J5-Ji to change the new contact button in the same way as the compose mail button. See my reply below for the CSS.

jurgen

unread,
Jun 30, 2011, 6:49:02 PM6/30/11
to minimali...@googlegroups.com
hi Mike - thank you very much for the CSS; it works like a dream
Reply all
Reply to author
Forward
0 new messages