Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • August 14, 2014 at 2:07 am #304112
    cl

    Hi Kriesi-Team,

    we would like to set individual text-colors for the following stats:

    1. TRANSPARENT HEADER + SUBMENU
    – mouse out
    – hover

    2. FIXED HEADER + SUBMENU
    – mouse out
    – hover

    3. Although we added a shadow to the header – the shadow should only appear with the “fixed header” (when scrolling down) and should not be visible with the “transparent header”. At the moment the shadow also appears with the “transparent header”. How can we make the shadow only appear with the fixed header?

    4. Besides we tried to give the “fixed header” some gradient on the left and the right side. (canceled at the moment) The gradient appears with the “transparent header” too. What´s our mistake?
    We used following css in quick-css:
    #header_main, #header {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.0) 100%);
    }

    Thx a lot for your help!
    Christian

    August 14, 2014 at 7:33 am #304214
    Josue

    Hey!

    1, 2, 3. Make use of the “av_header_transparency” class (this gets applied to the #header only when it is transparent), for example, to remove the box-shadow:

    .av_header_transparency #header_main, .av_header_transparency#header{
    box-shadow: none !important;
}

    Cheers!
    Josue

    August 14, 2014 at 10:23 am #304274
    cl

    Hey Josue,

    thx for the shadow solution, works now…

    May you pls give me a hint concerning to questions 1), 2), 4)

    Cheers!
    Christian

    August 14, 2014 at 10:37 am #304278
    Josue

    Hi,

    1.

    /* idle */
.av_header_transparency .avia-menu-text{
    color: green;
}
.av_header_transparency .sub-menu .avia-menu-text{
    color: peru;
}

/* hover */
.av_header_transparency li.menu-item:hover .avia-menu-text{
    color: red;
}
.av_header_transparency .sub-menu li.menu-item:hover .avia-menu-text{
    color: yellow;
}

    2.

    /* idle */
.avia-menu-text{
    color: red;
}
.sub-menu .avia-menu-text{
    color: blue;
}

/* hover */
li.menu-item:hover .avia-menu-text{
    color: red;
}
.sub-menu li.menu-item:hover .avia-menu-text{
    color: yellow;
}

    3 and 4.

    .av_header_transparency #header_main, .av_header_transparency#header{
   background: none !important;
   box-shadow: none !important;
}

    Regards,
    Josue

    August 14, 2014 at 4:29 pm #304453
    cl

    Hi Josue,

    thx. Works fine, but i´ve still some questions:

    1. The hover-color of the mainmenu is equal with the idle-color of the submenu. How can we change the idle-color of the submenu? (Transparent and Fixed Header)

    2. With the css-changes we lost the active status of mainmenu-buttons. How can we add some color for the active status? (Transparent and Fixed Header)

    Thx,
    Christian

    August 14, 2014 at 4:45 pm #304464
    Rustybucket

    This is great, just what I needed to. Is there something that can be added so that

    1. once the menu option is selected, it remains the same colour as the hover state?
    2. use the same colours for the underline that appears below the text and you mouse over the menu item

    Cheers

    • This reply was modified 10 years, 3 months ago by Rustybucket.
    August 14, 2014 at 5:33 pm #304498
    cl

    Hey Rustybucket,

    i added this code in quick-css to enable the underline… you can change color also…

    /* ———- HEADER: Button-Underline ———- */
    .avia-menu-fx, .current-menu-item>a>.avia-menu-fx, li:hover .current_page_item>a>.avia-menu-fx {
    display: none;
    }

    Cheers,
    Christian

    August 14, 2014 at 6:11 pm #304523
    Dude

    Hey!

    @cl – thanks for helping us out.


    @Rustybucket     – please let us know if you’ve any additional questions

    Best regards,
    Peter

    August 14, 2014 at 7:03 pm #304542
    cl

    Hey Dude,

    maybe you can give us a hint referring post #304453?

    Thx, Christian

    August 14, 2014 at 8:05 pm #304569
    Rustybucket

    Hi guys

    I tries adding your code and it removed the underline as you suggested but changed to
    .avia-menu-fx, .current-menu-item>a>.avia-menu-fx, li:hover .current_page_item>a>.avia-menu-fx {color:#01b2de;}
    and the underlines are back won’t adopt the colour.

    I was also wondering if there was any ideas about my

      number 1 question

    above? And also how to change the size of the text in the dropdown.

    Cheers

    • This reply was modified 10 years, 3 months ago by Rustybucket.
    August 14, 2014 at 9:36 pm #304600
    cl

    hey rusty,

    i´d please you to start a extra topic – otherwise i think i´ll never get my questions answered… i think if you answer to this post the topic get´s again to the end of the queue…

    use this css instead of {color…}:

    {
    background: rgba(255, 255, 255, 0.7);
    }

    thx, christian

    August 14, 2014 at 10:44 pm #304614
    Josue

    Hey Christian!

    If a rule is not getting applied, try adding !important, for example for the idle color of the submenu:

    .sub-menu .avia-menu-text{
    color: red !important;
}

    Regarding coloring the current-menu items, use this codes:

    .current-menu-item .avia-menu-text{
    color: red;
}
.av_header_transparency .current-menu-item .avia-menu-text{
    color: green;
}

    Regards,
    Josue

    August 15, 2014 at 2:20 pm #304914
    cl

    Hey Josue!

    Works great! Finished the menu design now… happy :-)

    Now the next question pops up: (or should i start a new topic with that?)

    We would like to change some icons, for example the “previous-/next-slider-arrows” or the “go top”-buttom or or or… is that possible?

    Josue, thanks a lot for superb service!

    Cheers,
    Christian

    August 15, 2014 at 6:40 pm #305018
    Josue

    Hi Christian!

    Refer to this article:
    http://kriesi.at/documentation/enfold/change-icon-used-for-standard-theme-elements/

    For example, to change the scroll to top icon:

    add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);

function avia_replace_standard_icon($icons)
{
$icons['scrolltop']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue915');
return $icons;
}

    You can see the full list of default icons in functions.php, around line 150.

    Best regards,
    Josue

    August 20, 2014 at 1:15 pm #306811
    cl

    Hi Josue,

    thanks a lot!

    Cheers, Christian

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Header – Text Colors’ is closed to new replies.