homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
change color in registration form problem
kolera




msg:4276053
 6:34 pm on Mar 3, 2011 (gmt 0)

Hello!
I have a problem with the registration forms on my homepage, the field is white and when you try to write its also white so you cant see the text while your writing. you can see an exampel of what i mean on the actual page on www.koleradesign.com if you for exampel go to the part that says registration in the menu to the left. i use joomla 1.6 and my template is entreprenuer-tg. i havent what im aware changed the text color in the css and dont know where to do this.

And the css right now is:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,6,blockquote,
pre,a,abbr,acronym,address,big,cite,code,del,dfn,font,img,ins,kbd,q,s,
samp,small,strike,sub,sup,tt,var,center,dl,dt,dd,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td {background:
transparent;border: 0;font-style: inherit;font-weight: inherit;margin: 0;padding: 0;outline: 0;vertical-align: baseline;} table {border-collapse: collapse;border-spacing: 0;}


/* Main Layout */
html {height: 100%;}
body { font:normal 13px/1.5em Arial, Helvetica, Sans-Serif; color:#555; }
body.contentpane { background:#fff;}
.background {position: absolute;width: 100%; background:#d0d5d6 url(../images/bak.jpg) no-repeat center top fixed;}
h1,h2,h3,h4,h5,h6 {margin:0; padding:10px 0; font-weight:bold; color:#134E8B;font-family:Arial, Helvetica, sans-serif;}
.componentheading { font-style:italic;font-size:25px; margin:0; padding:0 0 10px 0; color:#1a528c;}
h1 { font-size: 20px;}
h2 { font-size: 18px;}
h3 { font-size: 16px;}
h4 { font-size: 14px;}
a:link, a:visited { text-decoration: none; color: blue;}
a:hover { text-decoration: underline; color: red;}
ul {margin:0 0 0 15px;}
p {margin-top: 0;margin-bottom: 10px;}
blockquote { background:#eee; border:3px solid #ccc; margin:5px; padding:5px; font-size:18px; font-family:Arial, Helvetica, sans-serif; font-style:italic}
element.style { height:auto;}
hr { width:100%; clear:both; border:none; height:2px; background:#eee; margin:0; padding:0;}
.clr {clear: both;}

/* Header */
#header { position:relative; height:70px; width:960px; margin:0 auto;}
#header-w {position:relative;}
.top {color:#fff;width:450px;overflow:hidden; padding:20px 0 0 0; margin:0 0 0 500px;z-index:1;}
.top a {color:#fff; text-decoration:underline}
.logo { position:absolute; top:0px; left:40px; top: 1px; color:#fff;}
.tguser { position:absolute; right:10px; top: 20px; color:#555;}
#slide { background:#d0d5d6 url(../images/screen.jpg) no-repeat center top; height:154px; color:#5a9fec;}
.textx {position:absolute;padding:27px 0 0 375px;width:430px;height:60px;width: 330px; line-height: 1.3em;}
/* Navigation */
#screen {background: none;height:40px; background:url(../images/mainmenu.png) 0 0 repeat-x; font-family:Tahoma, sans-serif; text-transform: uppercase; margin: 0 0 10px 0;}
#nav {}
#navl {}
#navr {background: none;height:40px; background:url(../images/mainmenu.png) 0 0 repeat-x; font-family:Tahoma, sans-serif; text-transform: uppercase; margin: 0 0 10px 0;}
#nav {z-index:10; position:relative;}
#nav ul {margin:0; padding:0; float:left;}
#nav ul li {list-style:none;float:left;height:40px;position:relative; padding:0; margin:0; border-right:1px solid #414243;}
#nav ul li a { display:block;padding:0 15px 0 15px; margin:0; line-height:40px; color:#fff; text-decoration:none;font-size:15px; font-weight:bold;}
#nav ul li.active {}
#nav ul li.active a {color:#fff; background:url(../images/nav-a.jpg) 0 0 repeat-x}
#nav ul li:hover {}
#nav ul li a:hover{ text-decoration:none; font-weight:bold; color: #4585e6;}
#nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
#nav ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}
#nav ul li:hover ul li a {text-shadow:none;}
#nav ul li:hover ul li { background:none;}
#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#484848;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:11px;font-weight:normal;text-shadow:none;}
#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {margin:0; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:11px;text-shadow:none;}
#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}

/* Sidebar */
#leftbar-w {width:210px; min-height:200px; float:left; margin:0;}
#rightbar-w {width:210px; min-height:200px; float:right; margin:0;}
#sidebar {padding:0}
#sidebar .module {padding:6px; margin:0;}
#sidebar .module-title {font-size:16px;font-weight:100;margin:0;height:31px; line-height:31px; color: #fff; text-shadow:1px 1px #000; padding:0 0 0 22px; font-family:Tahoma, sans-serif;}
#leftbar-w .module-title {background: url(../images/sidebar.png) no-repeat center top; }
#rightbar-w .module-title {background: url(../images/sidebar.png) no-repeat center top;}
#sidebar .module-body {margin:0; padding:9px; border-bottom:1px solid #f1f1f1; background:#fff url(../images/sideback.png) repeat-x center top; color:#555;}
#sidebar .module-body a{color:blue;}
#sidebar .module-body p{padding:0; margin:0;}
#sidebar ul li { margin:0 5px; padding:0;}
#sidebar .module ul.menu{margin:5px 0 0 0; padding:0;list-style:none; padding:0; list-style-type:none;}
#sidebar .module ul.menu li{ list-style:none; list-style-type:none;margin:0; padding:0; border-bottom:1px dotted #6e99c2;}
#sidebar .module ul.menu li a {display:block;margin:0; padding:3px 0 3px 15px;font-weight:bold;line-height:20px;background: url(../images/dark.gif) 0% 50% no-repeat; text-decoration:none; color:#555; font-size:13px;}
#sidebar .module ul.menu li a:hover { color:#134E8B; text-decoration:none;}
#sidebar .module ul.menu li.active a{color:#6e99c2;}
#sidebar .module ul.menu li ul {border-top:1px solid #e4e4e4; margin:0;}
#sidebar .module ul.menu li ul li {background:none; border:none; margin: 0 0 0 15px; }
#sidebar .module ul.menu li ul li a{ border: 0; color:#999; background: url(../images/arrow2.png) 0% 50% no-repeat;}
#sidebar .module ul.menu li ul li a:hover{ border: 0; color:#134E8B; background: url(../images/arrow2.png) 0% 50% no-repeat; }
#sidebar .module ul.menu li.active ul li a{color: #6e99c2;}
#sidebar .module ul.menu li ul li.active a, #sidebar .module ul.menu li.active ul li a:hover{color:#134E8B;}

/* Content */
#main { margin:20px auto 0 auto;position: relative;}
#main-content { clear:both;margin:0 auto; padding:5px 5px 0 5px; background:#fff}

#maincol {position: relative;}
#wrapper { margin:0 auto; width:960px; padding:0;position: relative;}
.top1 {background:url(../images/main-top.png) 0 0 no-repeat;clear:both;}
.top2 {background: url(../images/main-top.png) 100% 100% no-repeat; }
.top3 { background: #fff; height: 6px;margin:0 6px;}
.bot1 {background:url(../images/main-bot.png) 0 0 no-repeat;clear:both;}
.bot2 {background: url(../images/main-bot.png) 100% 100% no-repeat; }
.bot3 { background: #fff; height: 6px;margin:0 6px;}
#comp_60 { width:528px; float:right; position:relative; padding:0; margin:0; min-height:300px;}
#comp_80 { width:740px; float:right; position:relative; padding:0; margin:0; min-height:300px;}
#comp_100 { width:950px; position:relative; padding:0;margin:0 auto; min-height:300px; }
#comp-i {padding:5px 10px 0 10px; }
#comp { float:left; }

/* Content styles */
ul.archive li { list-style:none; padding:0 0 0 10px;}
.archive .article-count {color:#999;}
.blog-featured {}
.items-leading {position: relative; clear:both; margin:0 0 20px 0; padding:10px;}
.items-row {position: relative;clear:both;}
.item-page { position:relative}
h2.item-page-title { padding:0 70px 5px 0;}
.item-page-title, .item-page-title a {text-decoration:none; color:#5a9fec;}
.item-page-title a:hover {}
.buttonheading { position:absolute; top:5px; right:0;}
.buttonheading .edit {float:right;margin:0 5px;}
.buttonheading .print { float:right; margin:0 5px;}
.buttonheading .email {float:right;margin:0 5px;}
.iteminfo {font-size: 12px;overflow:hidden;margin-bottom:5px;display:block;margin-top:-10px;width: 100%; color:#999;}
.iteminfo a {color:#999;} .iteminfo a:hover {color:#333;}
.iteminfo .category {}
.iteminfo .sub-category { padding:0 0 0 5px}
.iteminfo .create {}
.iteminfo .modified {}
.iteminfo .published {}
.iteminfo .createdby {font-weight:bold; display:block}
.items-more {clear:both;} h3.items-more { font-size:14px; padding:0; margin:0;}
.items-more ol { margin:0 0 0 30px; padding:0}
th.list-title, th.list-author,th.list-hits,th.list-date { background:#3F332E url(../images/h3.png) 0 0 repeat-x; padding:2px; border-right:1px solid #fff; color:#fff;}
th.list-title a, th.list-author a,th.list-hits a,th.list-date a { color:#fff; font-weight:bold}
td.list-title, td.list-author, td.list-hits, td.list-date { border-bottom:1px dotted #ccc;}
td.list-title { width:50%;}
td.list-author { width:15%; text-align:center;}
td.list-hits { width:5%;text-align:center;}
td.list-date { width:15%;text-align:center;}
.cols-1 {width:100%; clear:both;}
.cols-2 .column-1{width:49%;float:left}
.cols-2 .column-2{width:49%;float:right;}
.cols-3 .column-1{width:32%;float:left}
.cols-3 .column-2{width:32%;margin-left:1%;float:left;}
.cols-3 .column-3{width:32%;float:right;}
.cols-4 .column-1{width:23%;float:left}
.cols-4 .column-2{width:23%;margin-left:1%;float:left;}
.cols-4 .column-3{width:23%;margin-left:1%;float:left}
.cols-4 .column-4{width:23%;margin-left:0;float:right}
.column-1, .column-2, .column-3, .column-4 { position:relative;margin:0 0 20px 0}


/* Contact styles */
th.item-num, th.item-title,th.item-position,th.item-phone,th.item-suburb,th.item-state { background:#3F332E url(../images/h3.png) 0 0 repeat-x; padding:2px; border-right:1px solid #fff; color:#fff;}
th.item-num a, th.item-title a,th.item-position a,th.item-phone a,th.item-suburb a,th.item-state a {color:#fff}
td.item-num {width:5%; text-align:center;}
td.item-title {width:25%; text-align:center;}
td.item-position {width:15%;text-align:center;}
td.item-phone {width:15%;text-align:center;}
td.item-suburb {width:15%;text-align:center;}
td.item-state {width:15%;text-align:center;}
.contact label { width:100px;font-weight:bold; float:left}
.contact input { float:left;}
.contact .jicons-icons { float:left; padding:5px 10px 10px 0;}
.contact h3 { font-size:14px;}

.spacer .module {float: left;}
.spacer.w99 .module {width: 100%;}
.spacer.w49 .module {width: 50%;}
.spacer.w33 .module {width: 33.3%;}
.spacer.w24 .module {width: 24.5%;}

.readmore { margin:0; line-height:16px; font-variant:small-caps}

ul.pagenav { display:block;} ul.pagenav li { list-style:none;}
.pagenav-prev { float:left;}
.pagenav-next { float:right}
.pagination { clear:both;}
span.pagination { background:none;}
.pagination span, .pagination a, ul.pagenav li a {padding: 1px 8px; background: #fff; color: #555; font-weight: bold; font-size: 90%;}
.pagination a, ul.pagenav li a { font-weight: bold; text-decoration:underline}
.button, .validate { padding: 1px 8px; border: 1px solid #999999; background: #555; color: #FFF; font-weight: bold; font-size: 90%;}
.button:hover,.validate:hover,.pagination a:hover,ul.pagenav li a:hover {background:#0a3562;color:#fff;}
.inputbox, input, textarea, select {background:none repeat scroll 0 0 transparent ; border:1px solid #555; color:#fff;}
.breadcrumbs { padding:0 0 0 10px;}

/* Modules 1 */
#mods1 {overflow: hidden;padding:0; margin:0 auto;clear:both;}
#mods1 .module { padding:0; margin:0; }
#mods1 .inner { padding:10px; }
#mods1 .module-title {margin:0;padding:0 0 10px 0;}
#mods1 h3 {display: block;padding-left: 10px;padding-top: 3px;height: 20px;font-size: 18px;}
#mods1 .module-body {padding:0; margin:0;}
#mods1 ul {margin:0 10px; padding:0;}
#mods1 ul li {list-style:inside;}
#mods1-i { clear:both;}
/* Modules 2 */
#mods2 {overflow: hidden;padding:0; margin:0 auto;clear:both;width:960px; }
#mods2 .module { margin:0;padding:0;}
#mods2 .inner { padding:10px;}
#mods2 .module-title {margin:5px 0;padding:0;display: block;height: 22px;font-size: 20px;font-weight:100; color:#333; text-shadow:1px 1px #fff;}
#mods2 .module-body {padding:0; margin:0;}
#mods2 a {color:#419af8;}#mods2 a:hover {}
#mods2 ul {margin:0; padding:0;}
#mods2 ul li {list-style:inside;margin:0; padding:0;}
/* Modules 3 */
#mods3 {overflow: hidden;padding:0; margin:0 auto; clear:both; width:960px; color:#dfdfdf; background:#1a528c url(../images/mods3.png) 0 0 repeat-x;}
#mods3 .module { margin:0;padding:0;}
#mods3 .inner { padding:5px 10px 0 10px;}
#mods3 .module-title {margin:0 0 5px 0;padding:0;display: block;height: 22px;font-size: 20px;font-weight:normal; color:#fff; text-shadow:1px 1px #000;}
#mods3 .module-body {padding:0; margin:0;}
#mods3 a { color:#419af8;}#mods3 a:hover { color:#fff;}
#mods3 ul {margin:0; padding:0;}
#mods3 ul li {list-style:inside; border-bottom:1px dotted #043466; list-style:none;}
#mods3 ul li:hover {}
#mods3 ul li a {font-weight:100; display:block; padding:0 0 0 15px; background:url(../images/arrow.png) 0 50% no-repeat}

/* Footer */
#footer .top1 {background:url(../images/mods3-top.png) 0 0 no-repeat;clear:both;}
#footer .top2 {background: url(../images/mods3-top.png) 100% 100% no-repeat; }
#footer .top3 { background: #0b58a9; height: 6px;margin:0 6px;}
#footer .bot1 {background:url(../images/mods3-bot.png) 0 0 no-repeat;clear:both;}
#footer .bot2 {background: url(../images/mods3-bot.png) 100% 100% no-repeat; }
#footer .bot3 { background: #1a528c; height: 6px;margin:0 6px;}
#footer { clear:both; margin:10px 0 0 0; padding:0;}
.footer-pad { width:960px; margin:0 auto; padding: 0;}
#bottom {width:960px; margin:0 auto; padding:5px 0 0 0;}
.copy { margin:0; padding:0 0 0 10px;font-size:12px; float:left;color:#ccc}
.copy a {font-size:12px; color:#ccc}
.design {margin:0; padding:0 10px 0 0; font-size:9px; color:#000; text-align:right; float:right}
.design a { text-decoration:none; font-size:9px;color:#000; font-weight:bold;}

/* System Messages */
#system-message { margin: 0; padding: 0;}
#system-message dt { font-weight: bold; }
#system-message dd { margin: 0; font-weight: bold; text-indent: 30px; }
#system-message dd ul { color: #0055BB; margin: 0; list-style: none; padding: 10px; border-top: 3px solid #84A7DB; border-bottom: 3px solid #84A7DB;}
/* System Standard Messages */
#system-message dt.message { display: none; }
#system-message dd.message { }
/* System Error Messages */
#system-message dt.error { display: none; }
#system-message dd.error ul { color: #c00; background-color: #E6C0C0; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}
/* System Notice Messages */
#system-message dt.notice { display: none; }
#system-message dd.notice ul { color: #c00; background: #EFE7B8; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}
/* Debug */
#system-debug { color: #ccc; background-color: #fff; padding: 10px; margin: 10px; }
#system-debug div { font-size: 11px;}
#error { width:600px; margin:100px auto 0 auto; padding:20px; background:#fff;-moz-border-radius:6px;border-radius:6px;}
#error .error { color:#FF0000}

[edited by: alt131 at 1:02 pm (utc) on May 31, 2011]
[edit reason] Side Scroll [/edit]

 

alt131




msg:4276138
 8:06 pm on Mar 3, 2011 (gmt 0)

Hi kolera, and welcome to WebmasterWorld :)

Look for this line in your css:
.inputbox, input, textarea, select {background:none repeat scroll 0 0 transparent ; border:1px solid #555; color:#fff;}

color #fff is setting the text colour to white, so change that to what you want (color:#555 is a common text colour in the design)

Note this will also change the text colour for the other elements in that rule - textarea, select and anything classed .inputbox, but looking at your code I think you will be having the same problem with text not showing against the background in those elements as well - which is why I've suggested this method.

But if it gives you undesired colours in other elements do post back: Another method is to change the colour on the "registration fields" using their id's/classes, but I thought best to start with the fastest/most simple method first.

kolera




msg:4276163
 8:36 pm on Mar 3, 2011 (gmt 0)

woho thank you so much for your quick and easy response, it worked perfectly fine with your first response.
thank you.

alt131




msg:4276204
 9:21 pm on Mar 3, 2011 (gmt 0)

and a happy wahoo back at you - glad it was solved so easily and thanks for letting the forum know! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved