Solved

Need Square Or Matching Button

Posted on 2014-02-02
4
279 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

763 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

6 Experts available now in Live!

Get 1:1 Help Now