Editing CSS in New Webforms

Lucas Weber — Tue, 13 Apr 2010 08:05:25 +0000

Using custom CSS in a webform can be a great way to add style or functionality to webforms. However, editing CSS in the old version of the webforms interface was not a simple process. It required you to actively track down the selector that you wanted to modify using either the raw source code or a browser extension which could assist in finding the correct name to be used. With the new webforms interface however, we’ve made it very easy to see the CSS and find the correct portion to edit if you want to make very specific changes. This post will walk you through using the new webform builder to find and edit the CSS code to truly personalize your webforms.

Before we begin, please note that this guide will not tell you what changes to make to the CSS, simply where to find it in the new webforms builder.

Step 1: Choose your Webform

The new webform builder allows you to edit the CSS for any of the webforms available to you, from an Add contact form to a Manage Preferences page. The first step is just deciding which form you would like to edit. When you’ve decided, you can click either the name of the form, or the pencil icon off to the right.

Step 2: Click the ‘Styles’ link

The next step is to simply click on the Styles button on the upper right of the form editor screen. This will bring up a lightbox that contains all of the CSS code for the current webform. You can see that the CSS is well commented, which means you should be able to tell which selector controls which portion of your form content.

Step 3: Check the checkbox

In order to make sure that you are able to edit the CSS, you’ll just need to make sure that the Use the custom stylesheet below checkbox is checked. This will enable the text field with the CSS in it, and you will be able to make any edits that you would like.

Resetting the form

If you make a few too many edits and accidentally hide your email address field or something, we also offer a quick way to revert back to the default CSS stylesheet. If you need to do this, just click the Styles link one more time and then click the link at the very bottom of the lightbox, the link is pictured below.

Hopefully this post illustrates the ease with which you can now find and edit specific styles on your webforms. If you have any questions or suggestions, feel free to leave them in the comments section below.

Lucas Weber,
Bronto Client Services

Getting Comfortable With New Webforms Bronto’s Spring 2010 Release is finally here, and with it,...
Webforms and Subscriber Confirmation Back in February, Lucas Weber gave us a great post...
Creating New Webforms Coming soon to a Bronto near you, our new webforms...

Adding Style To Your Images

Lucas Weber — Tue, 24 Nov 2009 18:53:12 +0000

Do your images have style? If not, why? It’s simple in Bronto’s WYSIWYG editor to add styling to your images to give your message that professional feel. In today’s post, we’ll look at the styling tools we offer and see how to use them to fix a couple of common problems.

A Look at the Image Appearance tab

In order to see what styles you can apply to your images, you’ll need to go to the normal Insert/Edit Image button () in the Bronto WYSIWYG editor. Clicking this button will bring up the standard image inserting dialogue box. If you take a look at this, you’ll notice two tabs at the top, one of which is labeled Appearance.

After clicking on the Appearance tab, you’ll see the editor window below:

Now that we have the Appearance tab pulled up, we’ll walk through what each of the settings does…

The Alignment Setting

The Alignment setting allows you to align your image. You can choose from a number of different alignment options, including the two most commonly used, left and right. Aligning an image left will cause text to wrap around the image on the right side, and aligning an image right will cause the text to wrap around on the left. Like the graphic below.

Dimensions

The Dimensions setting allows you to set the size of your image. It will let you define a width and a height for the image you are styling. It also includes a checkbox that will, if checked, keep the image proportions intact so that your image does not distort when it re-sizes.

Vertical and Horizontal space

The Vertical and Horizontal space boxes are great for allowing your images a little breathing room. If you look back at the alignment example above, you’ll notice that the images and the text are really close together. If we take the same left aligned image and put a value of 10 in both the vertical and horizontal space boxes, an invisible buffer of 10 pixels in either direction will surround the image. The result will be much nicer, like so:

Border

The Border property allows you to set a border around your image. The border will be solid with a thickness set to whatever number you type into the box. This is not the most useful aspect of the Border property though. Oddly enough, the vast majority of users will set the Border attribute to 0. Setting it to 0 will eliminate the ugly blue border that appears around images when you place a link on them. This blue border can be quite the eyesore in an otherwise beautiful email marketing message, so it really pays to get rid of it with this simple setting.

Style

The Style box is kind of a catch all that allows you to apply custom styling to your images using CSS. Using this box will require knowledge of CSS syntax and attributes.

So that is our quick and easy look at the image styling options available in the Bronto WYSIWYG editor. The different styles offered here can really help to lend a professional look and feel to your WYSIWYG generated messages, and can hopefully increase your ROI in the process.