Editing Donation Form Styles

Options
Jeremy Chernikoff
Jeremy Chernikoff
Ancient Membership Photogenic First Comment Facilitator Level 1
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions

Is ity possible to edit the width of a donation form? I figure it must be a stylesheets issue but how/where can it be changed?

thanks

Tagged:

Comments

  • Adrian Cotter
    Adrian Cotter
    Ancient Membership 100 Comments Facilitator Level 3 Praiser Level 1

    You can play around with styles in your CustomCSS file, which is accessible through the page wrapper editor page.

    You might find it difficult to make it much smaller, however, because of 2 things

    1) the input fields are going to hold it open to their size -- and the state and country dropdown fields are pretty wide

    2) the area for error messaging. which probably can't be too much smaller.

    Some, (probably not all of the styles) are here (or at least as they appear on our pages) that you might need in adjusting widths:

    DIV#dataFormContainer or DIV.Don2AppArea

    TABLE.DonationAppTable

    TABLE.overTable or TABLE#overTable

    TD.FormCaption

    TR.FormRow

    TD.requiredIndicator

    TD.FormLabel

    TD.FormInput

    TD.holdsErrorMsgTable

    TABLE.holdsErrorMsg

    TR.holdsErrorMsg

    TD.FormMsgIcon

    IMG.HiddenErrorImage

    TD.FormInfoMsg

    DIV.FormMsgText

    (I got these using Firefox, and the Firebug plugin, though you could get them through View-source as well. Firebug lets you play around with changing the styles on the fly, which makes it an invaluable tool for me.)

  • James Zetlen
    James Zetlen
    Ancient Membership 10 Comments Facilitator Level 3

    I know this is a pretty old post, but there are still people asking this question, so I thought I'd update it. You can, indeed, edit the form styles without manually editing a CSS file! It's sort of out-of-the-way. Here's how.

    1. Edit your donation form.
    2. Go to Step 3, Design Donor Screens.
    3. In the "Related Actions" area under the process navigator on the left, click "Customize Look and Feel".
    4. On the following page, you'll notice that you can set a "Donation Form Wrapper", an old, legacy setting that you shouldn't use. You can also override the default page wrapper for this donation form, and lastly, you can set a "Donation Form Style". First, you'll want to create one.
    5. In the "Related Actions" area under the process navigator on the left, click "Manage Custom Styles".
    6. You'll be on the list of custom styles. Click "Create a New Custom Style".
    7. On this page, you can set the widths of each column of your donation form: the labels, the entry fields, and the rightmost "hint" area. Change these widths at will.
    8. Add the three widths together, and enter the total in the "Form Width" field. This is important; it's an odd quirk of the donation form styles system, but you do have to add them together and enter them yourself.
    9. Name your new form style (something like "Narrower" or "Microsite Form Style"), pick new colors if you like, and save.
    10. Click "Finish" to return back to the Customize Look and Feel screen.
    11. In the "Donation Form Styles" dropdown, select your new style and click "Finish".

    Setting the form styles manually can resolve a lot of issues, including a common one where the form appears way too wide for the wrapper in Internet Explorer.

Categories