Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • Last Modified:

Need Square Or Matching Button

The page at www.tedpenner.com has a rounded "submit" button, and I'd rather it be a little closer to the "choose file" button.

It is submitted via a wordpress plugin called Formidable and this is the HTML for the rounded submit button that needs to be changed.

<div class="frm_submit">
[if back_button]<input type="button" value="[back_label]" name="frm_prev_page" formnovalidate="formnovalidate" class="frm_prev_page" [back_hook] />[/if back_button]
<input type="submit" value="[button_label]" [button_action] />
<img class="frm_ajax_loading" src="[frmurl]/images/ajax_loader.gif" alt="Sending" style="visibility:hidden;" />
[if save_draft]<a class="frm_save_draft" [draft_hook]>[draft_label]</a>[/if save_draft]
</div>

Open in new window

Assistance is greatly appreciated
0
frugalmule
Asked:
frugalmule
  • 2
2 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You have a css file called

<link rel='stylesheet' id='formidable-css'  href='http://tedpenner.com/wp-content/uploads/formidable/css/formidablepro.css?ver=1.07.04' type='text/css' media='all' />

And this bit of code in that file is making it 'pretty'.

media="all"
.with_frm_style .frm_submit input[type=submit], .with_frm_style .frm_submit input[type=button], .frm_form_submit_style {
width: auto;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;
font-size: 14px;
height: auto;
text-align: center;
background: #eeeeee url();
border-width: 1px;
border-color: #dddddd;
border-style: solid;
color: #444444;
cursor: pointer;
font-weight: normal;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
text-shadow: none;
padding: 3px 8px;
-moz-box-sizing: content-box;
box-sizing: content-box;
-ms-box-sizing: content-box;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
background: -moz-linear-gradient(top, #eeeeee, #cccccc);
-moz-box-shadow: 1px 2px 3px #999999;
-webkit-box-shadow: 1px 2px 3px #999999;
box-shadow: 1px 2px 3px #999999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');

Open in new window


Your choices are to either completely remove the css file and if you are not using any other form elements, this is fine.  If you do like the form elements except for the button, you have some more choices.  

a) Either comment out the code


/*
media="all"
.with_frm_style .frm_submit input[type=submit], .with_frm_style .frm_submit input[type=button], .frm_form_submit_style {
width: auto;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;
font-size: 14px;
height: auto;
text-align: center;
background: #eeeeee url();
border-width: 1px;
border-color: #dddddd;
border-style: solid;
color: #444444;
cursor: pointer;
font-weight: normal;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
text-shadow: none;
padding: 3px 8px;
-moz-box-sizing: content-box;
box-sizing: content-box;
-ms-box-sizing: content-box;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
background: -moz-linear-gradient(top, #eeeeee, #cccccc);
-moz-box-shadow: 1px 2px 3px #999999;
-webkit-box-shadow: 1px 2px 3px #999999;
box-shadow: 1px 2px 3px #999999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');
*/

Open in new window

b) Change the input to a button
<button type="submit">Submit</button>

Open in new window

0
 
frugalmuleAuthor Commented:
So the CSS would look like this?
/*
media="all"
<button type="submit">Submit</button>
width: auto;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;
font-size: 14px;
height: auto;
text-align: center;
background: #eeeeee url();
border-width: 1px;
border-color: #dddddd;
border-style: solid;
color: #444444;
cursor: pointer;
font-weight: normal;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
text-shadow: none;
padding: 3px 8px;
-moz-box-sizing: content-box;
box-sizing: content-box;
-ms-box-sizing: content-box;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
background: -moz-linear-gradient(top, #eeeeee, #cccccc);
-moz-box-shadow: 1px 2px 3px #999999;
-webkit-box-shadow: 1px 2px 3px #999999;
box-shadow: 1px 2px 3px #999999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');
*/

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think I confused you with too many choices.  3 Options A, B, C

a) Change the HTML mark up so instead of rendering <input type="submit" value="submit> it should render <button type="submit">Submit</button>

The reason is there is not a css class for the button (that I saw) and it will render without the css added.

b) Simply remove this style sheet from all pages
<link rel='stylesheet' id='formidable-css'  href='http://tedpenner.com/wp-content/uploads/formidable/css/formidablepro.css?ver=1.07.04' type='text/css' media='all' />

c) Comment out the code on the formidablepro.css for the button where the complete css is below.  Everything between the /* and */ will be commented out if it is a css file.

/*
media="all"
.with_frm_style .frm_submit input[type=submit], .with_frm_style .frm_submit input[type=button], .frm_form_submit_style {
width: auto;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;
font-size: 14px;
height: auto;
text-align: center;
background: #eeeeee url();
border-width: 1px;
border-color: #dddddd;
border-style: solid;
color: #444444;
cursor: pointer;
font-weight: normal;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
text-shadow: none;
padding: 3px 8px;
-moz-box-sizing: content-box;
box-sizing: content-box;
-ms-box-sizing: content-box;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
background: -moz-linear-gradient(top, #eeeeee, #cccccc);
-moz-box-shadow: 1px 2px 3px #999999;
-webkit-box-shadow: 1px 2px 3px #999999;
box-shadow: 1px 2px 3px #999999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');
}
*/

Open in new window


If you are not using any of the form style anyplace else, option B may be the way to go.  However, the real easy route is changing your button from an input to a button option A.   It is not a good idea to directly manipulate wordpress theme files because they will just be over written when wordpress or the theme is updated.   The way to avoid this is to use a child theme and that is spelled out nicely here http://codex.wordpress.org/Child_Themes.  If that seems to much work, the button, Option A is the way to go.
0
 
James RodgersWeb Applications DeveloperCommented:
try adding this to the end of your css, style.css in the theme directory

.frm_form_submit_style  {
border-radius: none;
}


you might need to use important

.frm_form_submit_style  {
border-radius: none !important;
}

note: the style of the "choose file" button is determined by the browser , it will look different on every browser and os (looks different in safari on a mac than safari on a PC)
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now