Styling Input Buttons [solved]

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
MikeTroop74
Forum Members
Forum Members
Posts: 65
Joined: Thu Oct 14, 2010 6:58 pm

Styling Input Buttons [solved]

Post 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
Last edited by MikeTroop74 on Tue Nov 16, 2010 11:26 am, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Styling Input Buttons

Post 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;
}
User avatar
MikeTroop74
Forum Members
Forum Members
Posts: 65
Joined: Thu Oct 14, 2010 6:58 pm

Re: Styling Input Buttons

Post 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.
Last edited by MikeTroop74 on Tue Nov 16, 2010 10:47 am, edited 1 time in total.
Post Reply

Return to “Layout and Design (CSS & HTML)”