Link Styles

The default Harmony style sheet [p7HMY-01.css] contains a set of text link styles that are applied automatically. Sometimes these rules can conflict with other elements on your pages, such as menus or widgets, by assigning unwanted borders or an unexpected color. If this is a problem, there are two ways to fix things:

Change the rule to automatically affect only links that are inside paragraphs

Locate the following rules in your Harmony CSS file:

.p7HMY .hmy-section a {
border-bottom: 1px dotted;
transition: all linear .5s;
color: inherit;
text-decoration: none;
}
.p7HMY .hmy-section a:hover {
border-bottom: 1px solid;
}

Change them to target the p tag:

.p7HMY .hmy-section p a {
border-bottom: 1px dotted;
transition: all linear .5s;
color: inherit;
text-decoration: none;
}
.p7HMY .hmy-section p a:hover {
border-bottom: 1px solid;
}

Change the link rules to assignable classes

Change the above rule names to require a class of text-links:

.p7HMY .hmy-section a.text-links {
border-bottom: 1px dotted;
transition: all linear .5s;
color: inherit;
text-decoration: none;
}
.p7HMY .hmy-section p a.text-links:hover {
border-bottom: 1px solid;
}

To style your links, you will simply need to assign the text-links style class to your link's <a> tag:

<a href="index.htm" class="text-links">My link</a>

That's it!

© 2017 Project Seven Development
Navigation