Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 16, 2013 at 5:57 pm #200724
    dkiessling

    We’re looking to style some menu and tab elements in a client site we’re building (http://staging.lakewaleschamber.com/). We want the Top Menus to be a larger font size, and the tabs on the front page to use the same font as the menus and the other headers, and also to have different background colors (blue, orange, and green). I have applied the following to both the custom.css file and the Quick CSS in the styling options:

    .menu {
    font-size: 2em;
    font-weight: bold;
    font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
    }

    #tab-id-1 {
    width: 150px;
    background-color: #045783;
    font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
    color: white;
    }

    #tab-id-2 {
    width: 150px;
    background-color: #faa61a;
    font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
    color: white;
    }

    #tab-id-3 {
    width: 150px;
    background-color: #008a4b;
    font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
    color: white;
    }

    As far as I can tell, only the top Menu calling the Open Sans has taken effect. Can you help me see where I’m going wrong here?

    December 16, 2013 at 6:30 pm #200738
    Devin

    Hi dkiessling!

    Your css needs to be more specific for the menu:

    .main_menu ul:first-child > li > a {
    font-size: 1em;
    font-weight: bold;
    font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
}

    For the tabs, they aren’t targeting the tab classes so it would need to be more like:

    #top.home .tab_titles .tab{
	color: white;
}
#top.home .tab_counter_0 {
	width: 150px;
	background-color: #045783;
	font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
	color: white;
}

#top.home .tab_counter_1 {
	width: 150px;
	background-color: #faa61a;
	font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
	color: white;
}

#top.home .tab_counter_2 {
	width: 150px;
	background-color: #008a4b;
	font-family: Open Sans Condensed, Arial, Helvetica, sans-serif;
	color: white;
}

    Regards,
    Devin

    December 16, 2013 at 6:49 pm #200743
    dkiessling

    The tabs work fantastically! Thank you very much!

    The top menu, however, still isn’t sizing – we’d like that to be much larger.

    December 16, 2013 at 8:39 pm #200761
    Devin

    The css got pasted in incorrectly. The > were changed to their html code so correcting that will make it take effect. Right now it looks like this:
    .main_menu ul:first-child > li > a {
    it should be
    .main_menu ul:first-child > li > a {

    edit: the html for it keeps getting converted to the proper > here. If you look at it however its incorrect.

    • This reply was modified 10 years, 11 months ago by Devin.
    December 30, 2013 at 6:28 pm #203790
    tck

    Devin, I think I could use this fix for the main menu, but I’m confused by what you’re saying about the “>”. Can you take a screen shot of how it is supposed to look?

    December 30, 2013 at 6:48 pm #203799
    Josue

    Here:

    Those gt; should be >

    Best regards,
    Josue

    December 30, 2013 at 6:55 pm #203803
    dkiessling

    Got everything working great, thanks for the feedback!

    December 30, 2013 at 6:59 pm #203808
    Josue

    You are welcome, glad we could help :)

    Regards,
    Josue

    January 8, 2014 at 9:55 pm #207104
    dkiessling

    One more quick question, how would we resize the child menu items? We can manipulate the top items, but that makes the sub menus look too small.

    http://staging.lakewaleschamber.com/

    January 8, 2014 at 10:01 pm #207108
    Josue

    Hey!

    Try the following:

    .sub-menu a {
    font-size: 24px !important;
    line-height: 30px !important;
}

    Best regards,
    Josue

    January 8, 2014 at 10:20 pm #207112
    dkiessling

    That did it! Thanks!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Custom.css styles not applied’ is closed to new replies.