Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need Square Or Matching Button

Posted on 2014-02-02
4
Medium Priority
?
292 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 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 53

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

670 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