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
Styling Input Buttons [solved]
- MikeTroop74
- Forum Members
- Posts: 65
- Joined: Thu Oct 14, 2010 6:58 pm
Styling Input Buttons [solved]
Last edited by MikeTroop74 on Tue Nov 16, 2010 11:26 am, edited 1 time in total.
Re: Styling Input Buttons
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;
}
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;
}
- MikeTroop74
- Forum Members
- Posts: 65
- Joined: Thu Oct 14, 2010 6:58 pm
Re: Styling Input Buttons
That's awesome Doc! So this part:
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.
allows me to capture the classes without actually having to change the HTML? I don't think I would have ever figured that out.input.cms_submit {
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.
Last edited by MikeTroop74 on Tue Nov 16, 2010 10:47 am, edited 1 time in total.