---

LWV Color Palette

 

Primary Colors

LWV Blue  (#005596)

LWV Red (#be0f34)

 

Secondary Colors

LWV Light Purple (#820263)

LWV Dark Purple (#521C50)

LWV Gold (#eca400)

 

LWV Fonts

 

Serif Font: Merriweather

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Sans-Serif Font: Lato

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

 

Updating your theme colors and fonts:

NationBuilder stock themes are not designed with LWV brand standards in mind. How difficult it is to customize the colors and fonts of a stock theme depends on the theme. Some stock themes are easier to update than others. We recommend reaching out to Online Services for individual support if this is something you want to undertake. General instructions for changing themes are here. Instructions for updating theme colors are here and for updating fonts are here.

LWV Logos and Brand Standards

Note: This page is only a summary of common issues with online logo display. A full description of the standards for using LWV logos can be found in the Brand Standards documentation [here]. 

 Official State and Local League logos can be downloaded here.

The main things to keep in mind when using logos on your website:

• Logos should be large enough to be legible and to show the trademark symbol
• Logos should have clear visual space around them
• Logos should not have elements added into them or be altered visually

Clear Visual Space

Make sure your logo, as provided, has a clear visual space between it and any other visual elements. The files provided by LWV does not provide this clear space automatically. The logo image goes right to the edge of the image files. This can be problematic with some NationBuilder templates. 

Header Images

If your NationBuilder template has a colored background for the menu, and the header image cuts up into that background, using the LWV logo as is will produce something that looks like this:

Non-compliant Example

The logo is crashing against the top blue as well as against the gray on the other sides. This does NOT meet the clear space requirement.

Fix

The easiest fix for this is to use an image editing program to put a thick white border around your header image to provide the clear space. 

Avoid Alterations

LWV logos should not be altered. This means they should not have any additional elements added into them, or have changes to font or relative spacing, or be stretched in a way that changes the proportions of the logo. A full set of negative examples are included in the Brand Standards document. Two common alterations are addressed here.

Avoid Stretching

Sometimes when you are resizing the logo in an image or document editor, it can be accidentally resized in a way that breaks the relative proportions.

Original Logo

Stretched Logo: Non-compliant Example

 

The Fix

Before resizing a LWV logo, make sure that you have constrained the proportions of the image. In some programs, such as document editors, this can be done by pressing and holding a specific key (usually Shift, Ctrl, or Alt) before resizing. In other programs, such as image editors, there may be a setting to constrain the proportions. Often this is shown next to a chain icon, where a broken chain means the proportions are NOT constrained, and an unbroken chain means the proportions ARE constrained.

Note: While sometimes website displays can accidentally stretch images, NationBuilder display parameters usually prevent this from happening. If you suspect the problem is in the display, you can do a right-click to get the pop-up menu, and select the "Open image in new tab" option. If the new tab shows the image correctly, then the issue is with the way the website is displaying the image. Fixing this involves adjusting the image parameters (if you added it into the content) or the template display (if it is uploaded as part of the settings).

Avoid Added Elements 

There should be NO added text or visuals within the provided LWV logo area. Below are a couple of examples of non-compliant additions. The dashed line shows the border of the original logo.

Non-compliant Examples

  

 

The Fix

Place desired text and visuals OUTSIDE of the official logo and required clear space. You can do this in an image editor if a single image is needed.

 

Logos and Backgrounds

The preferred background for LWV logos is white (#ffffff). The .jpg files that are provided have white backgrounds. If it is necessary to use a different background for some reason, the .png files provided have a transparent background that will allow the website background to display through the logo instead. Make sure the background provides high contrast to the logo. If the background color makes the colored version of the logo hard to read, use the gray-scale version of the logo instead. See the Brand Standards document for full details.

In this example, the color logo is easy to read, as there is still a high contrast between the logo and the background

 

In this example, the color logo is hard to read. 

Non-compliant Example

 

 

If the purple background is desired, a gray-scale version of the logo should be used instead.

It is also permissible to change the black part of the gray-scale logo to white (#ffffff) if that makes for a better contrast.

 

---

What is a theme?

A theme is a set of files that work together to determine the layout and styles of your website. You can access information about your theme in the Themes tab in your site's control panel:

You will see two or three tabs under the Theme section, Switch to a stock them, Switch to a custom theme, and Current custom theme. You will only see the Current custom theme option if your website is using a Custom Theme. There is also a New custom theme button.

Selecting a new theme

Generally you would select a new theme if you want to change the overall look and feel of your website. If you just want to update colors or make small changes, you can customize your theme (see here). Before selecting a new theme, make a note of your current theme. You can find it in the theme setting panel or on the list of of sites in the main dashboard.

Stock Themes: These are the various themes provided "as-is" from NationBuilder. They will generally need some customization to prevent some unwanted functionality (see [here]) and will not be compliant with LWV brand standards.

Custom Themes: These are all the various themes ever customized in the LWVMD NationBuilder Nation, or on your leader site if you are not on the main nation. This includes all the custom themes that have been created by other local leagues. Online Services is working on setting up some custom themes that are brand standards compliant out of the box.

Note: Please do not switch to another Local League's Custom theme without discussing it with Online Services and the Local League first.  Unlike stock and Online Services custom themes, Local League customizations could have customizations and conditions that prevent them from being sharable with other sites.

Note: Best Practice is to use the New custom theme option "clone current theme" as soon as you have finalized your new theme selection so that you can make individual customizations to your site if you need to. Do this even if you select an existing custom theme. 

• If you have selected a stock theme, you will not have access to any theme files until you create a new custom theme.
• If you have selected an already existing custom theme provided by Online Services, any changes you make will change the theme as a whole unless you create a new custom theme. If multiple site managers forget to create a new custom theme, any edits one site makes to the them will also affect those other sites.

 

Important things to know about changing themes

When you switch to a new theme from a theme that has been customized for your site, there are some things to be aware of:

• You will lose any customizations you have made to your theme files. 
  • Any style or functionality that you have changed or added will have to be redone in the new theme if it is a stock theme. Examples include color and font changes, the deletion of customized fields in donation pages, and widget additions like the translation widget. Changes may also need to be redone if you chose a custom theme if those changes aren't already reflected in that theme.
• You will NOT lose any customizations you have made to individual page template files
  • If there was a functionality change that came with the new theme, such as the donation page payment changes NB rolled out, those updates will not be reflected in pages that were customized at the page level prior to the change in the theme.

A checklist of common customizations that should be done (or be present) when you change to a new theme is here.

 

Exploring Themes

You can explore how your current site would look in different themes without changing your current theme by using Preview Mode.

I didn't mean to change my theme. I want my old theme back!

If you decide you don't like the new theme, or discover there is too much to re-customize right now, you can always go back to your old custom theme. Go to "Switch to a custom theme" in the Themes tab, and select the name of your old theme from the list. If you didn't make a note of it, look for any themes containing your League name or abbreviation. Since this is already your League website's customization, you do not need to make a new customization from it.

---

To understand the importance of observing copyrights, please watch this 4 minute video.

The safest images to put on a website or social media are ones that you (or someone you knew) created and granted permission to use.

Other prospective sources include:

• LWVUS Flickr site;
• public domain resources, e.g. governmental websites; 
• free stock* images on community sites such as Unsplash.com and FreeImages.com;
• images that were created and published before 1923.

Many websites claim to offer royalty-free images. Be sure to read the fine print!

Regardless of the copyright status of the image, always credit the source. If you received permission or paid to use an image, keep the documentation in a shared League folder.

Please see the Images and Your Website FAQ for guidance on posting images. Click here to learn more about copyrights.

---

*Pay close attention when searching these websites; they offer both free stock and copyrighted images.

---

Here are some things you can do to make your site more accessible.

Images and Screen Readers

People with visual impairments may use screen readers when accessing websites. The following are some best practices for improving the experience someone using a screen reader will have with your site and with your email blasts:

• Always provide an image description and title
  • When you put an image into the content editor, you can access the image description and title fields in the General tab of the image setting pop-up box that appears when you click on the picture icon in the editor toolbar. 
  • The description text will go into the "alt-text" that is read by screen readers. Ideally this description gives all the meaningful detail in the image. Example: A group of LWV members standing behind a large banner sign. The sign has the text "Fair Maps"
  • The title field often appears as roll-over text--text that appears when you hover the mouse over the image or long press on the image on a mobile device. This should be a short description of the image.  (This is also a good place to put your image credit.) Example: Protesters at the Fair Maps Rally (credit: LWV of Maryland)

• Always include critical information in text format
  • If your image has text, make sure that text is available outside of the image. This is particularly important in event content where the image contains the details of the event. Best practice is to include any critical text as text content. 
  • If for some reason text details cannot be provided as part of the content, the text details should be included as part of the description so they can be picked up by a screen reader.
• Don't skip header levels when formatting your content
  • Header levels help the screen reader parse the content in a meaningful way. 
  • Example: If you select some text to format as Header 2, and you do a sub-heading underneath that head, that next level sub-head under it should be formatted as Header 3, not a lower level of header.
• If you use hashtags in online content, email, or in social media, capitalize each word in the hashtag.
  • Capitals will allow the screen reader to parse the combined words properly. Example: #FairMapsNow will be read as Fair Maps Now, while #fairmapsnow could be parsed and read as "fair map snow" or some other nonsense combination.

 

Language Translation

You can edit your theme files so that you can use Google's free text translation to set up a language dropdown that will auto-translate your site into specific languages, such as Spanish. Instructions for doing that are here.

 

Readability

Generally, body text is easier to read if it is in a sans-serif font (Lato). Headers are shorter, so they can be in either sans-serif or serif font (Merriweather).

Responsiveness

Responsiveness is how well your site adapts to different display sizes. NationBuilder themes are built to be highly responsive, so for the most part your content will work well on most devices. However, some choices you make when editing your themes or content may impact the experience on small screens, such as phone screens. You should generally check your content display on a mobile device to ensure the experience is reasonable.

Checking mobile display using a computer: Most browsers have an easy way to view content as if it were on a mobile device, so you can easily check how your content will display on a phone while you are working on it using the browser "Inspect element" feature. (Note: The instructions for Safari are more complicated, and are described here.)

• Preview or view the website page you want to check.
• Right-click somewhere on the page. This will pop up the context menu for the browser. The last item on the menu should be "Inspect"--select this choice.

• For Chrome, Edge, and other Chromium based browsers, a panel will open up on the right side of the browser. In Firefox, the panel will be at the bottom of the screen.

Chrome & Edge "Inspect" panel

 

Firefox "Inspect" panel

 

• Look for the phone/tablet icon on the top toolbar. On Chrome and Edge, it will be on the left side, while in Firefox it will be on the right side. Click this icon to switch between phone and computer screen views.

Making image and text combinations friendlier for mobile devices: When placing text and images together, you can use the advanced image settings to "float" the image next to the text. This allows the text to flow to the side of the image and then wrap around the bottom of the image to take up the entire width of the screen. (While you can also use a table to arrange the text and image, this usually puts a lot of white space on the smaller screen that makes for a harder reading experience.)

• In the image settings, click on the "Advanced" tab

.

• In the Style box, type "float: left;" (without the quotes) if you want the image on the left side of the text. Use "float: right;" if you want the image on the right side. To put a buffer between the image and the text, set the Horizontal Space value to 10 (or higher if you want more space). 

After you type, the information in the box will include your Horizontal Space in the style box automatically.

Try using the Inspect trick to view the following content in both computer and phone widths.

Example of what this looks like without left float or horizontal spacing:

Before you use the left float technique, you would normally see a single line of text, usually centered vertically with the image even though in the editor it looks like it is at the bottom of the image. The rest of the text would then wrap under the image. But when you add the left float, it will look like a chunk of text running in a column next to the image and then wrapping around the bottom of the image to use the full width of the screen for the remainder of the paragraph. Another way to have text run along the side of the image is to use a table. If the text is extremely long, it can make for a poor reading experience, as the text will only run the width of the table column. Also, in some themes, the image will be decreased in size to fit the table proportions.

 

Example of what this looks like using left float and horizontal spacing:

Before you use the left float technique, you would normally see a single line of text, usually centered vertically with the image even though in the editor it looks like it is at the bottom of the image. The rest of the text would then wrap under the image. But when you add the left float, it will look like a chunk of text running in a column next to the image and then wrapping around the bottom of the image to use the full width of the screen for the remainder of the paragraph. Another way to have text run along the side of the image is to use a table. If the text is extremely long, it can make for a poor reading experience, as the text will only run the width of the table column. Also, in some themes, the image will be decreased in size to fit the table proportions.

 

Example of what this looks like using a table:

(The borders of the table are left visible so you can see them in the example, and the image is centered horizontally and both image and text are both set to be aligned to the top of the table cell.)

Before you use the left float technique, you would normally see a single line of text, usually centered vertically with the image even though in the editor it looks like it is at the bottom of the image. The rest of the text would then wrap under the image. But when you add the left float, it will look like a chunk of text running in a column next to the image and then wrapping around the bottom of the image to use the full width of the screen for the remainder of the paragraph. Another way to have text run along the side of the image is to use a table. If the text is extremely long, it can make for a poor reading experience, as the text will only run the width of the table column. Also, in some themes, the image will be decreased in size to fit the table proportions.

 

Checking mobile display using a desktop computer

Many people access the internet primarily using their phones and tablets, so you want to be sure your content looks good on mobile devices. Here's how to view what it will look like on a phone using your your desktop browser. 

Chrome, Edge, and other Chromium Browsers

Most browsers have an easy way to view content as if it were on a mobile device, so you can easily check how your content will display on a phone while you are working on it using the browser "Inspect element" feature. (Note: The instructions for Safari are more complicated, and are described here.)

• Preview or view the website page you want to check.
• Right-click somewhere on the page. This will pop up the context menu for the browser. The last item on the menu should be "Inspect"--select this choice.

• For Chrome, Edge, and other Chromium based browsers, a panel will open up on the right side of the browser. Chrome & Edge "Inspect" panel

 

 

• Look for the phone/tablet icon on the top toolbar on the left side of the toolbar. Click this icon to switch between phone and computer screen views.

Firefox

• Preview or view the website page you want to check.
• Right-click somewhere on the page. This will pop up the context menu for the browser. The last item on the menu should be "Inspect"--select this choice.
• In Firefox, the inspect panel will be at the bottom of the screen.

Firefox "Inspect" panel

 

• Look for the phone/tablet icon on the top toolbar on the right side of the toolbar. Click this icon to switch between phone and computer screen views.

 

Safari

Detailed instructions for mobile view in Safari on a desktop computer can be found here.

Make your homepage more dynamic

Your home page does not have to be static content. You can have excerpts from blogs, events, and other pages showing up dynamically on your homepage. 

Ways to Use the Homepage Widget

NationBuilder has something called a homepage widget. If you add the tag "homepage" to any published content, a portion of the content will display on the homepage after any static content you have there. You can use the "homepage" tag to quickly and easily display a portion of just about any page on the homepage.

Blogs: If the main page of any blog is published and contains the "homepage" tag, the most recent entries from the blog will automatically be displayed on the homepage. You can use this to display current calls to action or anything else you want to update regularly and automatically show on your homepage. If you tag a single post in a blog, rather than the main blog page, that page will appear as a "Featured Post" on your homepage.

Events: If your calendar page is tagged with "homepage" then any upcoming events published under the calendar will display on the homepage. If it is past the event date, the event will no longer display. And if you want to feature a specific event, you can tag that directly with the "homepage" tag and it will display as a "Featured Event."

Pages with Forms: If you tag a page that has a form, such as a Volunteer or Join page, that form will appear on the homepage. You may want to do this during volunteer, membership, or donation drives.

 

Changing the Titles of Homepage Excerpts

Most of the text for the titles used in the homepage section that shows the excerpt is located in the _homepage_excerpt.html file in your Custom Theme files. Search for the text you want to replace, and change it to the desired text. 

---

1. If you don't already have one, create a Calendar page named "Events" and make the slug something like "your_league_events".
   • You do not need anything on the Intro tab as your current events will be listed here in date order.
   • On your "Page settings" menu choice, DO add the tag "homepage" to the tags field. This will make all current  events appear on your website homepage, and they will disappear after the event date is past!  Automatically.
   • Use the Events & subpages tab to create your new event
2. (The  button is all the way on the right-hand side of the screen!)
3. This event is on your webpage, so the name of your League doesn't have to be in the  name, how about "Annual Meeting 2022"?
4. The slug pops in automatically as "annual_meeting_2022", unless that slug has already been used, in which case you will have to get more creative.
5. For now, let's leave this event "unlisted" rather than published. If it is unlisted it will not show up on your website yet.
6. Create the  page by clicking 
7. Pointers on the "Basics"
   • Use the "Capacity" field if your venue has limitations. 
   • Use the "Additional RSVPs" field if you have invited some guests, like a speaker who you will not be requiring to purchase a ticket.
   • In the right-hand panel, click the radio box for "Sell tickets". You will save your work and come back later to fill in the page slug you will be creating to manage the ticket levels.
   • You will probably be accepting RSVPs, so check that box.
   • You can check the box to allow a person RSVPing to indicate the number of guests they are paying for. The imaginary menu (ticket) choices are going to add up to the number of  guests but this will give you a second way of counting to make sure everything is in balance.
   • Those who register will be given the option of Not having their RSVP listed on the event page, so it is OK to check the "Show who RSVPed" option.
8. Pointers on the "Advanced" menu choice
   • Filling in the slug of the page you want folk to land on after they register allows you to highlight what's going on in your League. This is a great way for you to begin thinking strategically about how your website can be used to move your work forward.
   • Whether you tag attendees in some way depends on the significance of this particular event in the life of your League. We will be able to search for people who RSVPed for this event, so be careful about adding another tag!
9. Pointers on the "Intro" menu choice
   • Pictures are good, but don't make your whole event a picture/image because individuals with a visual impairment will not be able to utilize their screen reader to absorb all of the wonderful information.
   • Instead use NationBuilder's tools to provide the inviting invitation you desire, and people will be able to view it on mobile devices, tablets and larger displays. (Don't use pictures of text!)
10. Pointers on the "Autoresponse" menu choice
    • This is the RSVP confirmation email - if there is a charge for any of the tickets they buy, they will get that receipt in a separate email.
    • You can add some lines in this confirmation like the event agenda, parking directions, or if the event is virtual, here is where you insert the Zoom or Google Meet link.
11. Pointers on the "Tickets" menu choice ("Event settings" submenu)
    • Here is what one ticket choice looked like for the 2017 LWVMD Convention in Kent County: 
    • The name of this ticket is "$280.00 3day/2nights"
    • The Description can be as long as needed and will be displayed on your website below as shown. The registrant changes the "0" to the number of tickets desired. If you are buying tickets for yourself and a daughter, for example, they enter a "2".
    • In the case that your caterer has offered a chicken and a steak menu choice, the name of the ticket could be as simple as "Chicken" or  "Steak" (two separate ticket levels, mind you - you enter them one at a time) and you can type in the complete menu that goes with the protein choice in the Description field.
    • After you have filled in the Name, Description and Amount fields, click 
    • Notice that the ticket you just saved is now at the bottom of the page and the blanks have reappeared, ready for you to add your next ticket level, if there is one.
    • To edit the tickets you have already entered, as you mouse over the ticket levels you already created a link reading "edit" will pop up just to the left of the ticket cost - when you click on "edit" the Name, Description and Amount will pop into the upper blanks enabling you to make your changes.
    • Now we need a donation page for these ticket purchases.
12. Create a Subpage using the next submenu choice
    • Way over on the right-hand side, click on the  button
    • Pick the Donation V2 template for this page
    • Create a page name and slug you will remember, like "YourLeagueAnnualMeeting2022Ticket"
    • The slug for this page you create will be the name of the page to purchase tickets that we skipped over in step 7 above.
    • You will want to edit the Autoresponse that goes with your new donation page. Here is what to look out for
      • Edit the title to say something like "Receipt for 2022 Annual Meeting". Yes it is a kind of donation, but this tells the customer what they have paid for
      • In the box with the text in it that says "... in honor of...." delete all of this text - it will print on the receipt, and for this type of transaction it is meaningless.
13. Go back and enter the name of your new donation page on the Basics tab, save and begin previewing your  wonderful work!

---

#1 Log into NB and go to Settings in the side menu, then Domains in the top menu.

 

#2 Click on New domain.

#3 You have the option of having NB or your domain name provider (e.g. Whois or Hostgator) manage your League's domain. Read the information in the blue box to help you decide. NOTE: you can come back later if you change your mind.

#4 Either check or leave blank "NationBuilder should manage this domain."

Click the blue "Add domain" box.  

#4A If NB is managing your domain, you'll be taken to this domain settings page.

Log into your League's domain provider to add the six required values. Go to Step #5.

#4B If you choose to have your domain provider manage your domain, you'll be taken to this domain settings page. 

#5 After a couple hours, scroll down the domain settings page and check to see whether the Required values and Current values match. Refresh the screen as needed.  When they match, follow the instructions in the blue box.

Note the "Remove domain" button at the bottom right.  Click this if you want to change your domain manager.

IMPORTANT: If your League has email addresses associated with your domain name and you choose to have NB manage your domain, please see faq_web_domainmail.

 

---

IMPORTANT: Follow these instructions after you've successfully transferred management of our domain to NB.

#1 Log into NB and go to Settings in the side menu and Domains in the top menu.

#2 Find your League's custom domain name.  It will say "Yes" under NB managed. Click Edit.

#3 This will open the Domain Settings page.  Scroll down.

#4 To complete email configuration, chat with NB Support by clicking on the live link in the blue box.

 

How to Add Images

 

Uploading a new image directly into your content

Click on the image icon in the editing toolbar.

 

In the pop-up box, go to the Upload tab.

 

.

Upload your image. The box will then take you to the General tab. Include a visual description in the Image Description box and a title in the Title box for your image. If you are using a photo, include a photo credit in the Title field. The title will show on a mouse rollover (desktop) or long hold (mobile).

Click Ok.

Uploading a previously uploaded image into your content

Go to the image on your own site that you wish to include. If your image is uploaded to the same page, make a note of the filename of the image as listed in the "Files" tab for that page. If the image is elsewhere on the site, copy the link address of that image. If you are not sure how to find it, you can right click on the browser and select "Open image in new tab" and copy the link in the address bar.

CAUTION: Do NOT copy links to images on other sites. Doing so could put your site in violation of copyright laws. Also, you would have no control over the image. If the original site changes it, or removes it, the image showing on your site will also change, or be removed.

Click on the image icon in the editing toolbar.

 

In the pop-up box, be sure you are on the General tab.

For images you have already uploaded to the page's "File" area, find and select the image name in the Image list dropdown. Otherwise, paste the link to the image into the Source field. Include a visual description in the Image Description box and a title in the Title box for your image. If you are using a photo, include a photo credit in the Title field. The title will show on a mouse rollover (desktop) or long hold (mobile).

Click Ok.

Images, Copyright, and Permissions

See also Why copyrights matter 

Assume images online are protected by copyright

Never assume that an image is not under copyright without checking. You should not use photographs or images taken from the internet without explicit written permission or a license from the copyright owner. This applies to news photographs and stock images as well. Usually news and stock images must be licensed for use by paying a fee. Be sure to follow any terms laid out in the licensing agreement, including credit attribution. 

Where to get images

You can of course take your own photographs, and use them freely. You can also freely use the photographs from the LWVUS Flickr site, as those images are licensed for use by local Leagues. If you wish to use images that are out of copyright, make sure you do your due diligence and confirm they are actually out of copyright.

Image credits

Images should be credited. NationBuilder doesn't have an easy way to caption images, so one simple way to add an image credit is in the Title box of the image pop up, under the General tab (see above). The title text will pop up when an image is hovered over, or long pressed on a mobile device. After the title of the image, add "Credit: Photographer Name" or "Credit: Organization Name" as appropriate. You can use the word "Source" instead of "Credit." You can also link to a separate page listing the image credits if you prefer, or put the image in a 1x2 table with the image in the top space and the caption and credit below it.

Pictures of people

When photographing members of the public, request written permission to post the picture on your site and in other media (see sample below). 

If your League is hosting a large public event, inform the audience that the LWV reserves rights to all photographs and recordings.

LWV has a section about photographs that includes permissions and visual standards for photography in the LWV Brand Standards document.

Image Placement, Spacing, Borders, and more

The NationBuilder Image box has advanced options to help you style your image, change the spacing between the image and text, add borders, and more. To pull up the box once you have placed an image, select the image you want to work with, then click on the image icon in the menu bar. Select the Advanced tab to access the formatting options.

 

Vertical & Horizontal Space

Entering a number in the Vertical Space box will put vertical space at the top and bottom of your images. Similarly, entering a number into the Horizontal Space box will put horizontal space at the sides of your image. If your text is wrapping around your image, you will want to use these boxes to prevent the text from sitting right next to the edge of the image.

You just enter a number in the boxes. The values are in pixels. Usually a value between 10 to 20 will be sufficient, but if you want more space, you can increase the number.

Border Width & Style

Use these boxes to create a border around your image.  Pick the style you want for your border. It can be solid, dotted, or more. Then select a width for the border. This width is also in pixels. A width of 1 would make a thin line around the image. You can try different widths and styles to decide what you like.

Note: You need to pick a style as well as a width for the border to be visible.

Border Colors

The border will default to the theme color for borders in content. If you want a specific color for the border, you can adjust it using the Style box. Read the Style Box section for instructions, then add border-color: #colorcode; to the box, where #colorcode is the hex value of the color you want. LWV color codes are listed here, and standard web color codes can be found here. You can also use a color picker in image software to get the code if you are trying to match a color in the image.

If the color has an official web name, you can often use that instead of the color code. For example, you could also put border-color: green; if you want the border to be the standard web color green.

Note: The Style box will update to put your color in with the other border information once all three pieces are there. So if you picked a solid border with a width of 3, then added border-color: #005596; to the Style box, it will show up in the box as border: 3px solid green; 

Using the Style Box

The Style Box is a way to individually style the image beyond the default styling of your theme. The Style Box uses CSS (Cascading Style Sheet) commands. If you are familiar with CSS, you can use it to achieve more advanced styling and placement of the image. 

To learn more about CSS, you can explore the resources or try some tutorials here.

One of the more common things you may want to do with the Style Box is float the images so the text properly wraps around it. Detailed instructions on how to do that are available in our Accessibility FAQ.