Conflicting CSS code

[chantal2012]

I am working on a site http://telephonetraininguk.co.uk/new.  You will see that the homepage has a sign up form but the original "submit" button needs to disappear because I designed this form in Photoshop and have my own submit button.  Using Firebug and clicking on this, this code appears:

#bbp_reply_submit,
#bbp_topic_submit,
input[type="button"],
input[type="submit"] {
background-color: #650221;
color: #fff !important;
cursor: pointer;
font-family: century gothic;
font-size: 12px;
font-weight: normal;
padding: 4px 7px 4px;
text-decoration: none;
width:136px;
height:29px;
}

I then made the background transparent and added border:none; and effectively got rid of this to expose my other submit button....The only problem is that this code conficts with the "Submit" button on the Contact page...I can't change one without it affecting the other....I've tried everything but can't figure it out!

[Marco]

Css line 1342.
Should be background-color: transparent; and not background-color: #transparent;

---

Neat & Plain – Genesis and WordPress specialist

[chantal2012]

No that is not the issue that I'm having (but I did fix that line thank you for pointing it out).  As it stands, I have a "submit" button on the sign up form (homepage) and another "submit" button on the contact form (Contact page).  If I change the code so make the submit button on the sign up form (to expose the one that I designed), then the submit button on the contact form also disappears.  I've tried to change the code using the specific class for the submit button on the sign up form, but it still affects the button on the contact form.  This is the code that I changed to:

#bbp_reply_submit.formsubmit, #bbp_topic_submit, input[type="button"], input[type="submit"] {
background:transparent;
border:none;
}

I can't seem to figure this out at all and this is the last thing that I have to do for this client...Please help!

[Marco]

Ok, first of all there's an error on line 876. The CSS property color #5555555 does not validate. It's #555; or #555555;

then, I don't see any div called #bbp.

Let's try this.

Just Paste this in place of the code you've done:

/*Buttons*/
/*------------------------------------------------------------*/
INPUT[type="button"], INPUT[type="submit"]
{
	/*[disabled]background-color:#650221;*/
	/*[disabled]color:#FFF;*/
	/*[disabled]cursor:pointer;*/
	/*[disabled]font-family:"century gothic";*/
	/*[disabled]font-size:12px;*/
	/*[disabled]font-weight:normal;*/
	/*[disabled]padding:4px 7px 4px;*/
	/*[disabled]text-decoration:none;*/
	/*[disabled]width:136px;*/
	/*[disabled]height:29px;*/
}
.home .formsubmit INPUT
{
	background-color: initial;
	color: #FFF !important;
	cursor: pointer;
	font-family: "century gothic";
	font-size: 12px;
	font-weight: normal;
	padding: 4px 7px 4px;
	text-decoration: none;
	width: 136px;
	height: 29px;
	margin: 0;
}
#bbp_reply_submit, #bbp_topic_submit
{
	/*[disabled]background-color:#650221;*/
	/*[disabled]color:#FFF;*/
	/*[disabled]cursor:pointer;*/
	/*[disabled]font-family:"century gothic";*/
	/*[disabled]font-size:12px;*/
	/*[disabled]font-weight:normal;*/
	/*[disabled]padding:4px 7px 4px;*/
	/*[disabled]text-decoration:none;*/
	/*[disabled]width:136px;*/
	/*[disabled]height:29px;*/
}
#bbp_reply_submit, #bbp_topic_submit
{
	/*[disabled]background-color:#650221;*/
	/*[disabled]color:#FFF;*/
	/*[disabled]cursor:pointer;*/
	/*[disabled]font-family:"century gothic";*/
	/*[disabled]font-size:12px;*/
	/*[disabled]font-weight:normal;*/
	/*[disabled]padding:4px 7px 4px;*/
	/*[disabled]text-decoration:none;*/
	/*[disabled]width:136px;*/
	/*[disabled]height:29px;*/
}
#nav .searchsubmit
{
	padding: 2px 7px 2px;
}
.reply A, .reply A:visited
{
	padding: 0 4px;
}
#bbp_reply_submit:hover, #bbp_topic_submit:hover
{
	background-color: transparent;
	border: 1px solid transparent;
	color: #FFF;
	text-decoration: none;
	width: 136px;
	height: 29px;
}
INPUT:hover[type="button"], INPUT:hover[type="submit"]
{
	background-color: transparent;
	border: 1px solid transparent;
	color: #FFF;
	text-decoration: none;
	width: 136px;
	height: 29px;
}

and in the
/*Miscellaneous Changes*/
/*-------------------------------------------------------------*/

at the very end:

.wpcf7-form-control.wpcf7-submit
{
	background-color: #650221;
	color: #FFF !important;
	cursor: pointer;
	font-family: "century gothic";
	font-size: 12px;
	font-weight: normal;
	padding: 4px 7px 4px;
	text-decoration: none;
	width: 136px;
	height: 29px;
}
.wpcf7-form-control.wpcf7-submit:hover
{
	background: #4D1070;
}
INPUT[type="button"], INPUT[type="submit"]
{
	/*[disabled]background-color:transparent;*/
	/*[disabled]border:none;*/
}
#bbp_reply_submit, #bbp_topic_submit
{
	background-color: transparent;
	border: none;
}

I've commented something.

Let me know if we're on the right track.

---

Neat & Plain – Genesis and WordPress specialist

[Author]

Posts