Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have template from ThemeForest and I don't want to edit CSS from this template, because I don't have time for it.

I want integrate Paypal buttons to my web page. The problem is Paypal buttons use a <FORM> tag for payment selection option. I have overloaded style for the <FORM>tag, but it does not look like it should.

How can I do this without using CSS for this element? I don't want use <IFRAME> and I don't want to edit the CSS if I can avoid it. This CSS look weird, must I edit it to solve this problem?

/*////   - Forms -   ////*/
form {
        margin-bottom:20px;
}
body.ie7 form, body.ie8 {
        margin-bottom:40px;
}
form p {
        margin-bottom:15px;
}
form label {
        float:left;
        width:140px;
        margin-top:5px;
}
form input, form textarea, form select {
        padding:10px 5px;
        background:#fff url(../img/bg-input.gif) repeat-x top;
        border:1px solid #D9D9D9;
        width:448px;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
}
form input.small {
        width:35px;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
share|improve this question

2 Answers 2

up vote 2 down vote accepted

You could reset those rules to have them display the custom rules you have in your CSS. You can wrap the Paypal buttons in a <div class="paypalbutton"> and then use CSS resembling this:

div.paypal form {
        margin-bottom: 0;
}
div.paypal body.ie7 form, div.paypal body.ie8 {
        margin-bottom: 0;
}
div.paypal form p {
        margin-bottom: 0;
}
div.paypal form label {
        float: none;
        width: auto;
        margin-top: 0;
}
div.paypal form input, div.paypal form textarea, div.paypal form select {
        padding: 0;
        background: transparent;
        border: 2px inset #D9D9D9;
        width: auto;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
}

I don't know if that will reset them exactly but I hope it gives you the idea.

share|improve this answer

Since your CSS declarations are element declarations, the only option you have is to give your particular form an id and write/reset it's css attributes.

form#paypal_form {
    custom styles;
}

form#paypal_form label {
    custom styles;
}

and so on.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.