Submit Button Face Color

Nuke Cadet Joined: Jul 12, 2003 Posts: 9

Can somone point me to the correct location to change the color of the default submit button face? The problem is that my default font is grey (same color as the button), so it shows up as a blank button on the admin page, login, search, or anyother page where a button is used to submit data.

Just FYI I have tried looking in the style.css and forums.css, so either I missed it or I am looking in the wrong place.

Example can be seen at http://www.royaldragoons.com/modules.php?name=Downloads, look at the search button.

Any help appreciated.

Major Joined: Jan 15, 2003 Posts: 1269 Location: USA

Try these two in style.css

input.mainoption{background-color: #Insert color value here;font-weight:bold}

input.liteoption{background-color: #insert color value here;font-weight:normal}

Nuke Cadet Joined: Jul 12, 2003 Posts: 9

Tried:

Code:

input.button {
background-color : #000000;
color : #A0A0A0;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

input.mainoption {
background-color : #000000;
color : #A0A0A0;
font-weight : bold;
}

input.liteoption {
background-color : #000000;
color: #A0A0A0;
font-weight : normal;
}

It has the desired effect on the Forums but does not affect anything in the main site (the button remains grey).

Major Joined: Jan 15, 2003 Posts: 1269 Location: USA

Ok I'll take a closer look tomorrow, and see if I can find where it needs to be changed.

Can you pm me or post the css for your theme please so I can play with it a bit?

Nuke Cadet Joined: Jul 12, 2003 Posts: 9

Code:

FONT {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
TD    {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
BODY {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
P    {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}
DIV    {FONT-FAMILY: Verdana,Helvetica; FONT-SIZE: 10px}

.bodyline {
background-color: #000000;
}
.forumline {
background-color: #000000;
}
.forumline2 { background-color: #000000; border: 2px #363636 solid; }
body {
background-color: #000000;
color: #EEEEEE;
scrollbar-face-color: #363636;
scrollbar-highlight-color: #363636;
scrollbar-shadow-color: #363636;
scrollbar-3dlight-color: #888888;
scrollbar-arrow-color: #888888;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #101010;
}

a:link, a:active, a:visited { color : #EEEEEE; }
a:hover    { text-decoration: underline; color : #AAAAAA; }
.title    {BACKGROUND: none; COLOR: #CCCCCC; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.content {BACKGROUND: none; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}
.block-title {BACKGROUND: none; COLOR: #CCCCCC; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}
.storytitle {BACKGROUND: none; COLOR: #CCCCCC; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.storycat {BACKGROUND: none; COLOR: #BCBCBC; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.boxtitle {BACKGROUND: none; COLOR: #BCBCBC; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.boxcontent {BACKGROUND: none; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}
.option {BACKGROUND: none; FONT-SIZE: 10px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.tiny    {BACKGROUND: none; FONT-SIZE: 10px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.small    {BACKGROUND: none; FONT-SIZE: 9px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
hr { height: 0px; border: solid #666666 0px; border-top-width: 1px;}
input, textarea, select {
color : #CDCDCD;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
border-color : #A0A0A0;
}

input.post, textarea.post {
background-color : #000000;
}

select {
background-color : #333333;
}

input { text-indent : 2px; }

input.button {
background-color : #000000;
color : #A0A0A0;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

input.mainoption {
background-color : #000000;
color : #A0A0A0;
font-weight : bold;
}

input.liteoption {
background-color : #000000;
font-color: #000000;
font-weight : normal;
}

/* Quote & Code blocks */
.code {
font-family: 'Courier New', Courier, sans-serif; font-size: 11px; color: #BCBCBC;
background-color: #161616; border: #BCBCBC; border-style: solid; border-width: 1px;
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #BCBCBC; line-height: 125%;
background-color: #161616; border: #BCBCBC; border-style: solid; border-width: 1px;
}
td.rowl { background-color: #000000; border: #3a3a3a 1px solid }
td.row1 { background-color: #000000; border: #3a3a3a 1px solid }
td.row2 { background-color: #000000; border: #3a3a3a 1px solid }
td.row3 { background-color: #000000; border: #3a3a3a 1px solid }
td.row3Right { background-color: #000000;
border-bottom: #3a3a3a 0px solid; border-left: #3a3a3a 1px solid; border-right: #3a3a3a 0px solid; border-top: #3a3a3a 1px solid
}

th {
color: #888888; font-size: 11px; font-weight : bold;
background-color: #333333; height: 25px;
}

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
background-color:#000000; border: #3a3a3a; border-style: solid; height: 28px;
}

td.cat, td.catHead, td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead, th.thSides, th.thTop, th.thLeft, th.thRight, th.thBottom, th.thCornerL, th.thCornerR {
font-weight: bold; border: #3a3a3a; border-style: solid; height: 28px; }
td.row3Right, td.spaceRow {
background-color: #000000; border: #3a3a3a; border-style: solid; }

th.thHead, td.catHead { border-width: 0px 0px 0px 0px; }
th.thSides, td.catSides, td.spaceRow { border-width: 0px 0px 0px 0px; }
th.thRight, td.catRight, td.row3Right { border-width: 0px 0px 0px 0px; }
th.thLeft, td.catLeft    { border-width: 0px 0px 0px 0px; }
th.thBottom, td.catBottom { border-width: 0px 0px 0px 0px; }
th.thTop { border-width: 0px 0px 0px 0px; }
th.thCornerL { border-width: 0px 0px 0px 0px; }
th.thCornerR { border-width: 0px 0px 0px 0px; }
.maintitle, h1, h2 {
font-weight: bold; font-size: 22px; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; line-height : 120%; color : #EEEEEE;
}

.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen, .genmed, .gensmall { color : #CCCCCC; }
a.gen, a.genmed, a.gensmall { color: #AAAAAA; text-decoration: none; }
a.gen:hover, a.genmed:hover, a.gensmall:hover { color: #EEEEEE; text-decoration: underline; }

.mainmenu { text-decoration: none; font-size : 11px; color : #DCDCDC }
a.mainmenu { color : #EEEEEE; }
a.mainmenu:active { color : #EEEEEE; }
a.mainmenu:visited { color : #EEEEEE; }
a.mainmenu:hover{ text-decoration: underline; color : #AAAAAA; }

.cattitle    { font-weight: bold; font-size: 10px ; letter-spacing: 1px; color : #BCBCBC}
a.cattitle    { text-decoration: none; color : #BCBCBC; }
a.cattitle:hover{ text-decoration: underline; }
.forumlink    { font-weight: bold; font-size: 12px; color : #AAAAAA; }
a.forumlink { text-decoration: none; color : #AAAAAA; }
a.forumlink:hover{ text-decoration: underline; color : #EEEEEE; }

.nav    { font-weight: bold; font-size: 11px; color : #CCCCCC;}
a.nav    { text-decoration: none; color : #AAAAAA; }
a.nav:hover { text-decoration: underline; }

.topictitle { font-weight: bold; font-size: 11px; color : #CCCCCC; }
a.topictitle:link { text-decoration: none; color : #AAAAAA; }
a.topictitle:visited { text-decoration: none; color : #999999; }
a.topictitle:hover { text-decoration: underline; color : #EEEEEE; }

.name { font-size : 11px; color : #DEDEDE;}

.postdetails { font-size : 10px; color : #CCCCCC; }

.postbody { font-size : 12px; line-height: 150%; }
a.postlink:link { text-decoration: none; color : #AAAAAA; }
a.postlink:visited { text-decoration: none; color : #999999; }
a.postlink:hover { text-decoration: underline; color : #EEEEEE; }

.signature { font-size : 11px; color : #333333; }

Posted: Wed Sep 03, 2003 5:28 am

Quote:

It has the desired effect on the Forums but does not affect anything in the main site (the button remains grey).

You have two CSS files. One is for the forums and one for the rest of the site. Sounds like you changed forums.css instead of style.css.

Nuke Cadet Joined: Jul 12, 2003 Posts: 9

Yes changes in the forums.css seem to work normally, but changes in the style.css seem to have no effect on the button or the font on the button.

Currently everything works in the forums but you still can't read the buttons in the main site.

Major Joined: Jan 15, 2003 Posts: 1269 Location: USA

Check in overall_header.tpl some things are hardcoded in there.

Nuke Cadet Joined: Jul 12, 2003 Posts: 9

Checked the overall header and didn't see anything...

Changes to the font color or background in:

Code:

input.button {
background-color : #000000;
color : #A0A0A0;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

input.mainoption {
background-color : #000000;
color : #A0A0A0;
font-weight : bold;
}

input.liteoption {
background-color : #000000;
color: #A0A0A0;
font-weight : normal;
}

Does not appear to affect anything anywhere in the entire site, changing font colors in other areas of the file does work correctly, it just seems nothing changes the submit buttons.

Posted: Wed Sep 03, 2003 11:05 pm

IACOJ wrote:

Check in overall_header.tpl some things are hardcoded in there.

Absolutely true!

Look, I mess around with themes a lot. Don't ask why. That's just what I like to do. It's probably some sort of psychologic defect or something --- taking on the ultimate jigsaw puzzles of the Nuke world on a daily basis, for fun --- but, I'm here to tell you that there are a lot of different ways to make themes, unlike modules, blocks and all that rot, and it involves 1000's of lines of code.

If you're a good sleuth, I think you will find embedded CSS code in one or more of your files that is overriding your external CSS files. The dead giveaway is when you change your external CSS file[s] and nothing happens. I have no idea why some bonehead authors do this, but they do.

If you read the comments 'they' leave in the files, it has something to do with being able to tweak the look 'n' feel of your forums from the admin control panel. Then, when you get it right, you're supposed to cut 'n' paste the code to an external CSS file to save bandwidth. Personally, I think this is bull. At best, it's a holdover from themes designed for stand-alone phpBB installations.

There is a LOT of copying of other ppl's work in the Nuke theme world. Maybe the plagurist just misses it. I dunno, but as IACOJ correctly stated, everytime I help somebody with this kind of problem, it's because of embedded CSS code, when everything is said and done.

So, check it out. If you really want to make it right, you're going to have to check every file on your site for embedded code. Only you can decide if it's worth the effort for a 'button face.'

Nuke Cadet Joined: Jul 12, 2003 Posts: 9

Thanks for the info, I will take a look and let you know if I find anything.

Nuke Cadet Joined: Jul 12, 2003 Posts: 9

Found it

Code:

input, textarea, select {
background-color : #000000;
color : #CCCCCC;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
border-color : #A0A0A0;
}

background color sets the button background, color sets the text on the button and in the input boxes.

Posted: Thu Sep 04, 2003 5:49 pm

dsimmons wrote:

Found it

Code:

input, textarea, select {
background-color : #000000;
color : #CCCCCC;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
border-color : #A0A0A0;
}

background color sets the button background, color sets the text on the button and in the input boxes.

Correct! I do mine a little differently in forums.css by running 'select' seperate from the rest so it doesn't mess with the left side blocks when ppl are in the forums area. I don't use a background-color in 'select' in the forums.

If you get the bug for CSS coding, I suggest you use TopStyle Pro.

http://www.bradsoft.com/topstyle/index.asp

That's what I use. It makes CSS a lot less frustrating... Wink

Nuke Cadet Joined: Jul 12, 2003 Posts: 9

Thanks for the help all. it looks much better now.

BTW I just used Visual Studio for the css, it popped up as default.