?
Solved

CSS Issues

Posted on 2011-03-23
14
Medium Priority
?
284 Views
Last Modified: 2012-05-11
HI this is a site designed in Wordpress. I am having trouble with my submit button on the form in the sidebar. None of the code is functioning. I am guessing something earlier in the code is overriding it but I am not sure what it could be. Thank you so much in advance.
0
Comment
Question by:mikegeorge2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 2
14 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35202052
Can you post the code ?
0
 

Author Comment

by:mikegeorge2
ID: 35202076
Oh my mistake! The site is at http://ninapennymortgages.com/azreverse/.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35202080
You can try the css override trick:

add !important after the css style-

Example:
#body {
  color: blue !important
}

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mikegeorge2
ID: 35202421
Still didn't affect it. I tried commenting out the code for the theme's submit button ,but it did not affect the one on my form. I didn't think of trying the !Important tag, but that didn't affect it.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35202739
Here you go. This is the style.css for the theme you are using. I removed the main style to the submit button. You will find the style for the button on about line 650. It is #submit and #submit:hover:

/*
Theme Name: Modernist
Theme URI: http://www.rodrigogalindez.com/themes/modernist
Description: A flexible, minimal theme focused on great typography. An invisible design to let you and your users focus on your content. Based on the design ideas of Jan Tschichold, Josef Müller-Brockmann, Dieter Rams, and other modernists. Supports widgets, SEO optimized, clean and documented code, fast to load, no plugins required. Works in WordPress 2.7 and superior. Works in IE 6 & superior and all versions of Safari/Firefox/Opera. Includes CSS3 buttons.
Version: 2.5
Author: Rodrigo Galindez
Author URI: http://www.rodrigogalindez.com
Tags: white, blue, black, silver, light, two-columns, fixed-width, threaded-comments, sticky-post, custom-header, custom-colors, custom-menu
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ----------------------------------------------- [ * ] */

* {
	margin: 0;
	padding: 0;
}

/* -------------------------------- [ General Elements ] */

body {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 62.5%;
	background-image: url(images/bg.gif);

	background-repeat: repeat;
	background-position: top left;

}

hr {
	display: none;
}

img {
	vertical-align: baseline;
	border: none;
}

p {	
	margin: 0 0 1.4em 0;
	font-size: 16px;
	line-height: 1.5;
	color: #556982;
}


h3 { 
	color:#71A5A1; 
	font-size:21px;
}

h4 {	font-size: 18px; 
	color:#1F536C;
}

h6 { 	font-size: 16px; 
	line-height:1.5em; 
	color:#1F536C;
}

a {
	color: #3b8686;
	text-decoration: none;
}

a:hover {
	color: #7a99dd;
}

h2.page-title {
	margin: 0 0 .5em 0 !important;
	font-size: 2.8em;
	font-weight: normal;
	color: #21759B;
}

code {
	font-family: Monaco, "Courier New", fixed;
	font-size: 12px;
	color: #6C8318;
	font-weight: normal;
}

/* -----------------------	margin-bottom: 40px;
------------------ [ Wrapper ] */

#wrapper {
	width: 878px;
	margin: 0 auto;
	height: 1%;
	background-color:white;
	padding-left: 30px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

#wrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* ------------------------------------------ [ Header ] */

#header-wrapper {
	position: relative;
	height:200px;
	clear: both;
	background: rgba(228,228,202,0.65);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-moz-border-radius: 10px; /*radius of 10px*/
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;	
	width: 929px;
	left: -40px;

	

}

#header-wrapper.triangle {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;}

#header-wrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
} 

/*--margin: 0 -20px;
	padding: 20px;--*/

#header { 
margin: 0 -20px;
	padding: 20px;}
	

#header h1 {
	display:block;
	font: 28px Georgia, Serif;
	color:#B62816;

}

#header h1 a {
	position:relative;
	padding: 190px 0 0 180px;
	text-decoration: none;
	border: 0 none;
}


.description  { 
	display:block;
	font: 18px Georgia, Serif;
	color:#1F536C;
	padding: 10px 0 0 180px;

}

#nav {
	margin: 0 100px 0 450px;
	padding: 20px 0 0 50px;
	background: transparent url("images/l.gif") no-repeat left top;
	height: 1%;
	clear: both;
}

#nav:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#nav ul {
	list-style:none;
}

#nav ul li a {
	display:block;
	padding:3px 3px 3px 45px;
	font-size:14px;
	color:white;
	text-decoration:none;
	background-color:#46789B;
	margin: 0 0 3px 0;
	position:relative;
	top:0;
	left: 30px;
	width:260px;
}

#nav ul li:nth-child(2) a, nav ul li:nth-child(2) a span  {
	background-color: #71A5A1;
}

#nav ul li:nth-child(3) a, nav ul li:nth-child(3) a span {
	background-color: #558484;
}

#nav ul li:nth-child(4) a, nav ul li:nth-child(4) a span {
	background-color: #556982;
}

#nav ul li:nth-child(5) a, nav ul li:nth-child(5) a span {
	background-color: #7EAFA9;
}

#nav ul li:nth-child(6) a, nav ul li:nth-child(6) a span {
	background-color: #608783;
}

#nav ul li a:hover { text-decoration: none; background-color: #666; }
#nav ul li a:hover span { background-color: #666; }


#logo { 
	position: absolute;
	left: 40px; top: 20px;
	background: url(images/nina.gif) no-repeat;
	width: 122px;
	height: 161px;
	}



/* ----------------------------------------- [ Content ] */

#content {
	width: 530px;
	padding: 15px 0;
	float: left;
}


.refi { 
	font-size: 16px;
	line-height: 1.8;
	color: #1F536C;
	list-style:none;
	text-indent: 8px;
}


/* Post */

.post,
.page {
	margin: 0 0 100px 0;
	height: 1%;
}

.post:after,
.page:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.post h1,
.post h2 {
	margin: 1.5em 0 .5em 0;
	font-size: 2em;
}

.post h3 {
	margin: 2em 0 .5em 0;
}

.post h4,
.post h5, 
.post h6 {
	margin: 2em 0 .5em 0;
}

.post table {
	width: 100%;
	font-size: 1.4em;
	line-height: 1.65;
	border-collapse: collapse;
}

.post table th {
	padding: 5px 0;
	text-align: left;
}

.post table td {
	padding: 5px 0;
}

.post table tr {
	border-bottom: 1px solid #ddd;
}

.post dl {
	margin: 0 0 1.4em 0;
}

.post dt {
	margin-top: 1.4em;
	font-size: 1.4em;
	line-height: 1.65;
	font-weight: bold;
}

.post dt:first-child {
	margin: 0;
}

.post dd {
	font-size: 1.3em;
	line-height: 1.65;
}

.post ul,
.post ol {
	margin: 0 0 1.4em 0;
}

.post li {
	font-size: 14px;
	line-height: 1.65;
}

.post li ul,
.post li ol {
	margin-left: 15px;
}

.post address {
	font-size: 1.4em;
	line-height: 1.65;
	margin: 0 0 1.4em 0;
}

.post abbr,
.post acronym {
	border-bottom: 1px dotted #ccc;
}

.post pre {
	margin: 0 0 1.4em 0;
	font-family: Monaco, "Courier New", fixed;
	font-size: 12px;
	color: #6C8318;
}

.post kbd,
.post tt {
	font-family: Monaco, "Courier New", fixed;
	font-size: 12px;
	color: #666;
}

.post var {
	color: #892E12;
}

/* Hack to make the 'Div and Span Tests' unit test look better */
div.myclass strong { 
	font-size: 1.4em;
	line-height: 1.65;
}

.post blockquote {
	margin-left: 30px;
	padding-left: 15px;
	border-left: 2px solid #ddd;
}

.post img {
	max-width: 500px;
	height: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 8px;
	background: #fff;
	border: none;
}

.post-header h2 {
	margin: 0;
	font-size: 2.8em;
	font-weight: normal;
	color: #333;
}

.post-header h2 a {
	border: 0 none;
	color: #333;
}

.post-header h3 {
	margin: 0 !important;
	font-size: 2em;
	font-weight: normal;
}

.post-header h3 a {
	border: 0 none;
	color: #3b8686;
}

.post-header p {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	color: #777;
}

.post-meta {
	padding: 10px 0 0 0;
	background: transparent url("images/l.gif") no-repeat left top;
	clear: both;	
}

.post-meta ul {
	list-style-type: none;
}

.post-meta li {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	color: #777;
}

.post-navigation,
.comment-navigation {
	margin: 0 0 40px 0;
	padding: 10px 0 0 0;
	background: transparent url("images/l.gif") no-repeat left top;
	clear: both;
	float: left;
	height: 1%;
}

.comment-navigation {
	margin-top: 40px;
}

.post-navigation:after,
.comment-navigation:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.post-navigation ul,
.comment-navigation ul {
	list-style-type: none;
}

.post-navigation li,
.comment-navigation li {
	margin-right: 25px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	color: #777;
	float: left;
}

.post-page-links {
	margin-bottom: 1.4em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	color: #777;
}

/* Comments */

.post-comments {
	margin: 0 0 40px 0;
	height: 1%;
}

.post-comments:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.post-comments h2,
h3#comments-title, 
h3#reply-title {
	margin-bottom: 1em;
	font-size: 2.8em;
	font-weight: normal;
	color: #21759B;
}

.comment,
.trackback,
.pingback {
	width: 530px;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #ddd;
	clear: both;
	float: left;
	height: 1%;
}

.comment:after, 
.trackback:after,
.pingback:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.pingback p, 
.trackback p {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	color: #aaa;
}

.comment-avatar {
	width: 60px;
	float: left;
}

.comment-avatar img {
	width: 54px;
	padding: 2px;
	background: #fff;
	border: 1px solid #ddd;
}

.comment-body {
	width: 460px;
	margin-left: 10px;
	float: right;
}

.comment-body ul {
	margin: 0 0 1.4em 1.2em;
}

.comment-body li {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 11px;
	line-height: 1.5;
}

.comment-body blockquote {
	margin-left: 30px;
	margin-bottom: 1.4em;
	padding-left: 15px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 11px;
	line-height: 1.5;
	border-left: 2px solid #ddd;
}

.comment-body blockquote p {
	font-size: 1em;
}

.comment-meta {
	margin: 0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	color: #777;
}

.comment-form table {
	width: 530px;
	border-collapse: collapse;
}

.comment-form th {
	width: 120px;
	padding: 2px 0 15px 0;
	text-align: left;
	vertical-align: top;
}

.comment-form th label {
	font-size: 1.3em;
	line-height: 1.4;
	color: #333;
}

.comment-form th p {
	margin: 0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	color: #777;
}

.comment-form td {
	padding: 5px 0 15px 24px;
	vertical-align: top;
}

.comment-form td input {
	width: 280px;
	padding: 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.3em;
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	color: #444;
}
.comment-form td textarea {
	width: 360px;
	padding: 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.3em;
	line-height: 1.65;
	font-weight: 300;
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	color: #444;
}

#submit {
	width: auto;
	padding: 6px 10px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.3em;
	font-weight: bold;

}

#submit:hover {
	background-color: #1F536C;
	text-decoration: none;}

}

.depth-2 .comment-avatar {
	text-align: right;
}

.depth-2 .comment-body p {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	color: #444;
}

.depth-2 .comment-avatar img {
	width: 30px;
	height: 30px;
}

.depth-3 .comment-avatar {
	width: 100px;
}

.depth-3 .comment-body {
	width: 420px;
}

.depth-4 .comment-avatar {
	width: 140px;
}

.depth-4 .comment-body {
	width: 380px;
}

.depth-5 .comment-avatar {
	width: 180px;
}

.depth-5 .comment-body {
	width: 340px;
}

/* ----------------------------------------- [ Sidebar ] */

#sidebar {
	position:relative;
	width: 300px;
	padding: 15px 20px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	float: right;
	color: #777777;
	}

#sidebar h2 {
	margin: 0 0 .9em 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	line-height: 1.4;
	text-transform: uppercase;
	text-align:center;
	
	padding: 5px;
}

#sidebar a {
	color: #555;
}

#sidebar a:hover {
	color: #111;
}

#sidebar p {
	font-size: 1em;
	line-height: 1.5;
}

#sidebar ul {
	list-style-type: none;
}

#sidebar li {
	margin: 0 0 .4em 0;
}

#sidebar .section {
	margin: 0 0 40px 0;
	padding: 15px 0;
	background: transparent url(images/l.gif) no-repeat top left;
}

/* ------------------------------------------ [ Footer ] */

#footer {
	padding: 10px 0;
	background: transparent url(images/l.gif) no-repeat top left;
	clear: both;
}

#footer p {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	color: #777;
}

/* Widget: Search */

#searchform input {
	width: 90%;
	padding: 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	color: #444;
}

/* Widget: Calendar */

table#wp-calendar {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

table#wp-calendar caption {
	letter-spacing: 2px;
	text-transform: uppercase;
}

table#wp-calendar caption,
table#wp-calendar td,
table#wp-calendar tr {
	padding: 5px 2px;
}

table#wp-calendar tr {
	border-bottom: 1px solid #ddd;
}

table#wp-calendar tr:last-child {
	border: 0 none;
}

/* Widget: Tag Cloud */

.tag-cloud {
	line-height: 1.65;
}

.wp-tag-cloud {
	line-height: 1.5;
}

/* Widget: Pages */

#sidebar ul.children {
	margin: .4em 0 0 15px;
}

/* General WordPress Classes */

.aligncenter {
	display: block;
	margin: 0 auto;
	text-align: center;
}

.alignleft {
	margin-right: 15px;
	float: left;
}

.alignright {
	margin-left: 15px;
	float: right;
}

img.alignnone {
	margin-right: 5px;
	margin-bottom: 0;
}

.wp-caption {
	padding: 2px 5px;
	background: #fff;
	border: 1px solid #E9E9E9;
}

.wp-caption p {
	font-size: 1.1em;
	line-height: 1.5;
}

.wp-caption img {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0;
	border: 0 none;
}

.wp-caption a[rel] {
	border: 0 none;
}

.gallery dd {
	font-size: 1.1em;
	line-height: 1.5;
}

.gallery-caption,
.wp-caption-text {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	text-align: center;
}

.gallery-icon a {
	border: 0 none;
}

.gallery-item img {
	margin-bottom: 5px;
	border: 1px solid #E9E9E9 !important;
}





/*-------Gravity Forms-----------*/


/*-------Wrapper---------------*/

body .gform_wrapper 

	{
	padding-bottom:10px;
		border-left:1px solid gray;
		border-top:1px solid gray;
		border-radius:10px;
		padding: 10px;
background: rgba(228,228,202,0.65);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-moz-border-radius: 10px; /*radius of 10px*/
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;		}





/*-------This styles the Header--------*/
body .gform_wrapper .gform_body .gform_fields .gsection 
	{
	padding: 5px 15px 5px 15px;
	background-color:#46789B;
	-moz-border-radius: 10px; /*radius of 10px*/
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;			

	}





/*-------This styles the text for the section Break-------*/
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title 
{
	color:white;
}


/*----Section Break Descritption----*/
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description 
{	
	margin: 0 auto;
	width: 180px;
	font-size:12px;
	text-align:center;
	padding-top:8px;
}


/*-------This styles the text input fields-------*/
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] 
	{
		border:3px solid #71A5A1;
		border-radius:10px;
		width: 270px;
		height: 20px;
		font-size:14px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	}


/*--------This styles the field labels text-------*/
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {color:#71A5A1;}


*/----Submit Button---/*

body .gform_wrapper .gform_footer {border:1px solid red}


body .gform_wrapper .gform_footer input[type=submit] {border:1px solid red !important;}

body .gform_wrapper .gform_footer input[type=image] {  border: 1px solid red !important;}

Open in new window



0
 

Author Comment

by:mikegeorge2
ID: 35203023
I do not know what is going on, but that button will not budge or anything!
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35203099
I see the color has changed.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35203113
Make sure you aren't seeing a cached version of the page. Hold Ctrl+F5 to do a hard refresh (it clears your browser cache).
0
 

Author Comment

by:mikegeorge2
ID: 35203266
So sorry. I think we might be talking about a different button. I was referring to the sidebar button in the form that says "get free information...." with the orange button. Unless you are seeing something different on your screen?
0
 

Author Comment

by:mikegeorge2
ID: 35203273
I emptied my cache. The ctrl f5 thing did nothing. Thank you so much again for continuing to help me.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35203626
So you have noticed the color changed correct?

Now you want to move the submit button?
0
 

Author Comment

by:mikegeorge2
ID: 35203725
The submit button that I am trying to change is an image. It is within the Wordpress Gravity Forms widget. The color changed on the submit button for leaving a comment. I can't see to be able to do anything with my Form button. The code for it is at the very bottom of the CSS.
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35204810
I'm sorry but i do not understand. The "get free information" button works - as it submits the form above it. Why are we talking about css ?
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 2000 total points
ID: 35204883
Here is the code to remove the image, but it seems the submit button is the image:

#gform_submit_button_1 {
display: none !important;
}

Open in new window


You could replace the image with another image of your choice. This would be the easiest way. Just create an image and name it button_form3.png and upload it to your file server in this directory:
wp-content/uploads/2011/03/button.form3.png
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month14 days, 13 hours left to enroll

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question