• 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;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing the look of the links’ is closed to new replies.