Changing the look of the links
-
I’ve tried overwrite the CSS design of the links in my child theme, but they don’t seem to have any effect. I want the links to stand out a bit more when not hovered over and even more when hovered. I’d like very subtle shades of purple, but I’ll tinker with that once I get a response to CSS changed. Here is my child style sheet…
*/
body {
background: #999; /* Fallback for when there is no custom background color defined. */
}pre {
background: #88adbb;
font-family: “Times new roman 12 Pitch”, Courier, monospace;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}hr {
background-color: #888;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}button,
input[type=”button”],
input[type=”reset”],
input[type=”submit”] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #232323;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0,0, 0.05);
color: rgba(0, 0, 0, .8);
cursor: pointer; /* Improves usability and consistency of cursor style between image-type ‘input’ and others */
-webkit-appearance: button; /* Corrects inability to style clickable ‘input’ types in iOS */
font-size: 12px;
font-size: 1.2rem;
line-height: 1;
padding: .6em 1em .4em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
}.main-navigation ul ul ul {
left: -999em;
top: 0;
}.main-navigation ul ul a {
width: 200px;
}.main-navigation ul ul li {
}
.main-navigation li:hover > a { text-shadow: 2px 2px #8888ff;
}.main-navigation ul ul :hover > a { text-shadow: 2px 2px #8888ff;
}.main-navigation ul ul a:hover { text-shadow: 2px 2px #8888ff;
}.main-navigation ul li:hover > ul {
left: auto;
}.main-navigation ul ul li:hover > ul {
left: 100%;
}.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}a {
color: 7744aa;
}a:visited {
color: 8944a8;
}a:hover,
a:focus,
a:active {
color: 5544a8;
}
- The topic ‘Changing the look of the links’ is closed to new replies.