Forum Replies Created

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter bytegraphics

    (@bytegraphics)

    Yay! I figured out the main question. This is what it needed:

    ul#menu-topnav li:hover {
    background-color: #b11fd9;
    }

    I’m still trying to figure out how to change the little arrow color when you mouse over the tab that it’s associated with … right now the arrow has a “resting state” color, but that color changes to something else when you mouse over the tab (so it is a different color than the tab). I would like the color to stay the same in the mouseover state.

    Great theme though and *great support*!! (sadly, not that common)

    Laura

    Thread Starter bytegraphics

    (@bytegraphics)

    Ok, CSS validator found one small (unrelated) error. Can anyone help me with this? Here is my current CSS:

    h1.site-title {
    font-size: 50pt;
    }

    .navigation-main {
    background-color: #5040FF;
    }

    .navigation-main a {
    font-size: 15px;
    padding: 14px;
    }

    .navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
    background-color: #9609BD;
    }

    .navigation-main li.current_page_item a:after, .navigation-main li.current-menu-item a:after {
    background-color: #9609BD #fff #fff;
    }

    ul#menu-topnav li {
    background-color: #1500FF;
    }

    .navigation-main ul > .current_page_item,
    .navigation-main ul > .current-menu-item,
    .navigation-main ul > .current-post-ancestor,
    .navigation-main ul > .current-menu-ancestor,
    .navigation-main ul > .current-menu-parent,
    .navigation-main ul > .current-post-parent {
    background-color: #1500FF;
    }

    .navigation-main ul > .current_page_item:hover,
    .navigation-main ul > .current-menu-item:hover,
    .navigation-main ul > .current-post-ancestor:hover,
    .navigation-main ul > .current-menu-ancestor:hover,
    .navigation-main ul > .current-menu-parent:hover,
    .navigation-main ul > .current-post-parent:hover {
    background-color: #9609BD;
    }

    .navigation-main ul > .current_page_item:after,
    .navigation-main ul > .current-menu-item:after,
    .navigation-main ul > .current-post-ancestor:after,
    .navigation-main ul > .current-menu-ancestor:after,
    .navigation-main ul > .current-menu-parent:after,
    .navigation-main ul > .current-post-parent:after {
    background-color: #9609BD;
    }

    .navigation-main ul > .current_page_item:hover a:after,
    .navigation-main ul > .current-menu-item:hover a:after,
    .navigation-main ul > .current-post-ancestor:hover a:after,
    .navigation-main ul > .current-menu-ancestor:hover a:after,
    .navigation-main ul > .current-menu-parent:hover a:after,
    .navigation-main ul > .current-post-parent:hover a:after {
    border-top-color: #9609BD #fff #fff;
    }

    .navigation-main ul > .current_page_item a:after,
    .navigation-main ul > .current-menu-item a:after,
    .navigation-main ul > .current-post-ancestor a:after,
    .navigation-main ul > .current-menu-parent a:after,
    .navigation-main ul > .current-post-parent a:after {
    content: ”;
    font-size: 0px;
    line-height: 0%;
    width: 0px;
    border-top: 6px solid #9609BD;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    z-index: 9995;
    }

    .site-content .entry-content, .site-content .entry-header, .site-content .entry-summary {
    margin: 1.5em 10em 1.5em 4em;
    }

    p {
    font-size: 15px;
    line-height: 24px;
    font-family: Merienda;
    }

    .button-primary, a.button-primary, .wpm-button-primary, a.wpm-button-primary {
    display: none;
    }

    .featured-content-secondary .entry-title a {
    color: #3a3a3a;
    font-size: 16px;
    }

    .featured-content-secondary .entry-title {
    margin-top: -14px;
    text-align: center;
    }

    .site-content .entry-title {
    font-size: 20px;
    line-height: 28px;
    font-family: Merienda;
    }

    .site-header .site-branding {
    position: relative;
    background-color: #ffffa2;
    }

    .expound-full-width #primary {
    /* width: 960px; */
    background-color: #ffffa2;
    }

    .site-main {
    float: left;
    width: 100%;
    clear: both;
    background-color: #ffffa2;
    }

    .entry-title a {
    color: #117bb8;
    font-family: Merienda;
    }

    Thanks,
    Laura

    Thread Starter bytegraphics

    (@bytegraphics)

    Yes! That worked, thanks. But I still can’t get the color of a tab/item to change when I hover over it. I’ve got the hover color all set, but it’s not working. Maybe I need to validate my CSS at this point … stay tuned …

    Thread Starter bytegraphics

    (@bytegraphics)

    Hi Konstantin,

    What you say makes sense, but there are actually *two* little arrow states — one when the arrow is at rest, i.e., when that particular page is active, and the other, when the arrow accompanies the tab that is being “hovered” over.

    I tried messing with the values, but I ended up with a colored arrow inside a differently-colored small rectangle (similar dimensions to the arrow).

    Sorry to be such a pain. I would love to understand this better.

    Laura

    Thread Starter bytegraphics

    (@bytegraphics)

    It’s not working for me yet … This is what I have so far:

    .navigation-main {
    background-color: #5040FF;
    }

    .navigation-main ul > .current_page_item,
    .navigation-main ul > .current-menu-item,
    .navigation-main ul > .current-post-ancestor,
    .navigation-main ul > .current-menu-ancestor,
    .navigation-main ul > .current-menu-parent,
    .navigation-main ul > .current-post-parent {
    background: #1500FF;
    }

    .navigation-main ul > .current_page_item:hover,
    .navigation-main ul > .current-menu-item:hover,
    .navigation-main ul > .current-post-ancestor:hover,
    .navigation-main ul > .current-menu-ancestor:hover,
    .navigation-main ul > .current-menu-parent:hover,
    .navigation-main ul > .current-post-parent:hover {
    background: #9609BD;
    }

    .navigation-main ul > .current_page_item:hover a:after,
    .navigation-main ul > .current-menu-item:hover a:after,
    .navigation-main ul > .current-post-ancestor:hover a:after,
    .navigation-main ul > .current-menu-ancestor:hover a:after,
    .navigation-main ul > .current-menu-parent:hover a:after,
    .navigation-main ul > .current-post-parent:hover a:after {
    border-top-color: #9609BD;
    }

    .navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
    background: #9609BD;
    }

    ul#menu-topnav li {
    background: #1500FF;
    }

    =======

    What I’m seeing is …
    non-tabbed navbar is 5040FF (good)
    current_state is 9609BD (good)
    background color of “at rest” tabs is 1500FF (good)
    tab “hover” color is 1500FF (would like something different, say, green for now)
    arrow color “at rest” is 117BB8 (should be same color as current_state, 9609BD)
    arrow color “hover” is 9609BD (should be same color as hover color, 1500FF)

    Sorry if this is confusing … I never understood the navigation classes.

    If you could help me with this, I would appreciate it even more than I already do!

    Laura S.

    Thread Starter bytegraphics

    (@bytegraphics)

    Fantastic, thanks so much!

    Thread Starter bytegraphics

    (@bytegraphics)

    Sorry, typo. Fixed below …

    I’m trying to figure out how to set up the home page. I want it to look like the image I clicked on when I downloaded the Expound home page (it has one large image and four small images and some text). Can someone help me with this?

    Thanks,
    Laura S.

Viewing 7 replies - 1 through 7 (of 7 total)