Page 1 of 1

Styling Input Buttons [solved]

Posted: Sat Nov 13, 2010 11:03 pm
by MikeTroop74
I'm sure this is an easy one for the "Doctor".
I really like the look of the form buttons used for the NCleanGrey Admin theme.
I've had a poke around at some of the code but must admit I'm a little stumped.
This is what I have in my site CSS now:

input, select
{
 font-family: Tahoma, Arial, Helvetica, Sans-Serif;
 font-style: normal;
 font-weight: bold;
 }

input[type="button"],
input[type="submit"] {
background:url("themes/NCleanGrey/images/layout/nav.png") repeat-x scroll left -50px transparent;
color:#FFFFFF;
cursor:pointer;
padding:3px 4px 4px;
}

The second part I took from one of the CSS sheets for the NCleanGrey theme. The problem is I'm not really getting the same effect as the Admin theme. The input, select part was already part of my theme CSS. Can anyone take a look at this and tell me if maybe there is a simpler or more correct way to do this? Obviously I'm doing something wrong and I think it has to do with the specific input tag in my HTML.

Here is a link to one of my forms:  http://www.troop74.net/index.php?page=news_sub2

Re: Styling Input Buttons

Posted: Sun Nov 14, 2010 2:45 am
by Dr.CSS
If you look at the page source you will see what it is you can target, that submit button has 2 classes on it, cms_submit and fbsubmit, which are actually better to use than [type="submit"] as ie is stupid, your path to the image is missing admin/ and get rid of the "  " in the (  ) call, NOTE: the border:none...

input[type="button"],
input.cms_submit {
border:none;
background:url(admin/themes/NCleanGrey/images/layout/nav.png) repeat-x scroll left -50px transparent;
color:#FFFFFF;
cursor:pointer;
padding:3px 4px 4px;
}

Re: Styling Input Buttons

Posted: Sun Nov 14, 2010 8:10 am
by MikeTroop74
That's awesome Doc! So this part:
input.cms_submit {
allows me to capture the classes without actually having to change the HTML? I don't think I would have ever figured that out.

This is what I ended up with

/* begin Button */

input[type="submit"],
input[type="button"]
input.cms_submit {
list-style:none outside none;
margin:0;
outline:medium none;
background:url(images/nav.png) repeat-x scroll left -50px transparent;
color:#FFFFFF;
cursor:pointer;
padding:3px 4px 4px;
}

input[type="submit"]:hover,
input[type="button"]:hover
input.cms_submit {
background:url(images/nav.png) repeat-x scroll left 0 transparent;
cursor:pointer;
}

/* end Button */


I happened upon this link http://www.quirksmode.org/dom/inputfile.html  Seems the 'file selection' buttons are not that easy.