Solved

Need Square Or Matching Button

Posted on 2014-02-02
4
284 Views
Last Modified: 2014-02-16
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
Comment
Question by:frugalmule
  • 2
4 Comments
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 39828905
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
 

Author Comment

by:frugalmule
ID: 39828930
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39828967
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
 
LVL 25

Accepted Solution

by:
James Rodgers earned 250 total points
ID: 39832232
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

821 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