Solved

Need Square Or Matching Button

Posted on 2014-02-02
4
281 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 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

25 Experts available now in Live!

Get 1:1 Help Now