Trying To Get A More Predictable CSS for Breadcrumbs

Issue

User simply wants breadcrumbs that start out as black, but hover as white and are visited white

Solution

1. In Designer go to Advanced -> Manage Format Customizations, and double click on webworks.css, skin_IE7.css, and skin_IE9.css

2. Open these 3 files in your favorite text editor.

3. To each of these files, add the following:

.ww_skin_breadcrumbs {
margin: -8px -8px 0px -8px;
font-family: Arial;
font-size: 10pt;
color: white;
padding: 6px 8px 6px 8px;
background: #b9ba50;
}

.ww_skin_breadcrumbs_divider {
font-family: Arial;
font-size: 10pt;
color: black;
text-decoration: none;
}
.ww_skin_breadcrumbs_divider > a:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
}
.ww_skin_breadcrumbs_divider > a:visited {
font-family: Arial;
font-size: 10pt;
color: black;
text-decoration: none;
}
.ww_skin_breadcrumbs_divider > a:link:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
}
.ww_skin_breadcrumbs_divider > a:visited:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
}
.ww_skin_breadcrumbs a:link {
font-family: Arial;
font-size: 10pt;
color: black;
text-decoration: none;
}
.ww_skin_breadcrumbs > a:link:hover {
font-family: Arial;
font-size: 10pt;
color: black;
text-decoration: none;
}
.ww_skin_breadcrumbs_current{
font-family: Arial;
font-size: 10pt;
color: black;
text-decoration: none;
}
.ww_skin_breadcrumbs_current > a:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
}
.ww_skin_breadcrumbs_current > a:visited {
font-family: Arial;
font-size: 10pt;
color: black;
text-decoration: none;
}
.ww_skin_breadcrumbs_current > a:link:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
}
.ww_skin_breadcrumbs_current > a:visited:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
}
.ww_skin_breadcrumbs_parent{
font-family: Arial;
font-size: 10pt;
color: black;
text-decoration: none;
}
.ww_skin_breadcrumbs_parent > a:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
}
.ww_skin_breadcrumbs_parent > a:visited {
font-family: Arial;
font-size: 10pt;
color: black;
text-decoration: none;
}
.ww_skin_breadcrumbs_parent > a:link:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
}
.ww_skin_breadcrumbs_parent > a:visited:hover{
font-family: Arial;
font-size: 10pt;
color: white;
text-decoration: none;
} 

4. Save and close each of these files

5. Save and close your Designer project to take the changes

6. Reopen and regenerate your output to reflect the changes made in the customization