Styling Callout Box Links
Clicking on any text link in the Callout Box of your style allows you to customize those links.
The gray bar switches to the Callout Box Links editing tools.
You can edit how the text of the links will appear. And you can select a background for the links.
Below is a screenshot of the toolbar...
If you're ever unsure what a toolbar 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 link's destination, and is not hovering over the link.
For any first-time visitor, all your links will be the default color determined by the style. This is usually an underlined blue color.
- 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 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 link text.
You can change this to any text color that suits your style's overall color scheme, add bold and italics to the links, remove the 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 Callout Box links on all pages of your site, so think twice about adding a color. If you do add one, make it easy to read against the background of the Callout Box.
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 a Callout Box link takes 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 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.
- 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.
You can change the text link color and the background color for the Visited state.
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 links. Since there are usually few, if any, Callout Boxes on a page, and even fewer Callout Box links, adding a background color here will not be as jarring to the eye.
However, since visited links are less important than unvisited links, you may not want to call attention to them with a background color.
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 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.
- 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.
You can change the text color, add bold and italics, remove the underlining, and add a background color.
Since hovering is a temporary action (it doesn't change the way the 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 a background color -- unless you added one to the Normal state. Ensure that visitors can still read the link text as they hover over links. For example, you don't want to use red text color on a dark color.