Adelle ribbon banner: changing colour and font style

  • Unknown's avatar
    travelknitter · Member ·

    Hi there! I’ve got so much help by reading though other posts, but haven’t been able to find this out.

    I’m looking to tweak the ribbon banner in Adelle – to be able to change the colour from black to something else, and to change the page titles to lowercase.

    All help greatly appreciated!

    http://travelknitter.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, to change the top navigation background color and change the uppercase back to normal (reflects what you type in as a label), add the following and edit the color code as desired (excuse my obnoxious demo color).

    .navigation-main, .navigation-main ul ul, .menu-toggle, .main-small-navigation ul.nav-menu.toggled-on {
    background: #22CC00;
}
.navigation-main a {
    text-transform: none;
}
  • Unknown's avatar
    yellowpeachesdesign · Member ·

    Hi Sacred Path!
    Your CCS info is soo helpful – however I can’t seem to find one thing…
    Do you know how to change the navigation bar ribbon ends of the Adelle theme? I would like them to just be a straight edge (for both the navigation bar and bar at the bottom of the page). Thank you.

  • Unknown's avatar
    travelknitter · Member ·

    thank you!

    Can you please tell me how to change the font colour of the category headers (can’t quite get it to work). Both the main colour and hover cover would be great! (obnoxious demo colours are great).

  • kathrynwp · Staff ·

    Can you please tell me how to change the font colour of the category headers (can’t quite get it to work).

    Sure – all category pages have the class category, so you can target the headings on category pages like this:

    .category .page-title {
	color: #bb00bb;
}

    Change the colour to anything you like. Category headings don’t have a hover state as they aren’t links.

  • kathrynwp · Staff ·

    yellowpeachesdesign – you’ll need the Custom Design upgrade to add custom CSS to make this sort of change. Once the upgrade is active, add this code under Appearance > Customize > CSS:

    .navigation-main:before, .navigation-main:after {
border: #000;
}

    If you need further help, would you please start a new thread so I can better assist? Thanks.

  • The topic ‘Adelle ribbon banner: changing colour and font style’ is closed to new replies.