Solved

CSS Issues

Posted on 2011-03-23
14
279 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
  • 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
 

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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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 500 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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

747 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now