Styling Image Caption Links

Contents

Site Designer Help

Styling Image Caption Links

Clicking anywhere on the second image's caption text in your style allows you to customize the caption links for all images on all pages.

The gray bar switches to the Image Caption Links editing tools.

Below is a screenshot of the toolbar...

Image caption links toolbar

If you're ever unsure what a button does, hover over it for a second. Its function will appear as a tooltip.

Normal

Normal is the link style when a visitor has never visited the caption link's destination, and is not hovering over the link.

For any first-time visitor, all your caption links will be the default color determined by the style. This is usually an underlined blue color.

Directions for Use
  • Click on the Color Palette button to change the link text color.
  • Click on the B or I button to add bold or italic to the caption link text. Click on the U button to change the underlining.
  • Click on the gears button to open the Advanced Styles overlay and add a background color to the link text.

Image Caption Links Normal toolbar

You can change this to any text color that suits your style's overall color scheme, add bold and italics to the links, add underlining, and add a background color.

Blue is the standard color for links on the web, so you may want to stick with a blue color. Underlining is also standard, so most people have come to expect links to be blue and underlined.

The bold and italic options will make your links stand out more from the regular text. This will be especially important if you don't use blue and/or don't underline the links.

You can also add a background color to the links (click on the gears button). This change will be global across all caption links on all pages of your site, so think twice about adding a color.

Do not set the Normal state's background color to Transparent if you want to have a background color for either the Visited state or the Hover state.

If you do set the Normal background color to Transparent, you'll see a warning message if you try to set the background color for either of the other states.

Visited

The Visited link state is the styling that the caption links take on after visitors click on that link and land on the destination page. If they return to the previous page, or visit another page with a caption link to that same destination page, the link will have the Visited styling.

The standard color for visited links is purple. You can choose a variation of purple that suits your color scheme, or go with a different color.

Directions for Use
  • Click on the Color Palette button to change the link text color for the Visited state.
  • Click on the gears button to open the Advanced Styles overlay and add a background color to the Visited state of the text links.

Body Links Visited toolbar

You can change the text link color and the background color for the Visited state of caption links.

The Color Palette button has a V on it to indicate that this is the palette for the Visited state. Click on it to change the Visited state link text color for your style.

The first time you click on the button, you'll see a warning message. Read the message before proceeding.

Click on the gears button if you want to add a background color to the Visited state of all caption links (the Color Palette button has a V on it).

You'll note that there are no B, I and U buttons for the Visited link state. Whatever is set for the Normal state applies to the Visited state as well.

Hover

The Hover link state is the styling that appears when a visitor places her mouse or trackpad over a caption link (this action is called hovering).

The standard color for hovering over links is red. Choose a variation of red that suits your color scheme, or select a different color.

Directions for Use
  • Click on the Color Palette button to change the link text color for the Hover state.
  • Click on the B or I button to add bold or italic to the link texts. Click on the U button to change the underlining.
  • Click on the gears button to open the Advanced Styles overlay and add a background color to the Hover state link text.

Image Caption Links Hover toolbar

You can change the text color, add bold and italics, add underlining, and add a background color.

Since hovering is a temporary action (it doesn't change the way the caption links look when the mouse is not on the link), you can make changes that will not affect the overall look of your site.

Click on the Color Palette button with the H on it to change the link text color to a variation of red, or to another color.

The first time you click on the button, you'll see a warning message. Read the message before proceeding.

If you made links bold and/or italic for the Normal state, keep those the same here. Changing them can have text moving back and forth when visitors hover over your links. This is due to the change in character size from the addition of bolding and/or italics.

So the best way to make hovering stand out (other than a color change) is to add (or remove) underlining, depending on whether you have it for the Normal state.