Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #200724

    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?

    #200738

    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

    #200743

    The tabs work fantastically! Thank you very much!

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

    #200761

    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 7 months, 1 week ago by  Devin.
    • This reply was modified 7 months, 1 week ago by  Devin.
    #203790

    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?

    #203799

    Here:

    Those gt; should be >

    Best regards,
    Josue

    #203803

    Got everything working great, thanks for the feedback!

    #203808

    You are welcome, glad we could help :)

    Regards,
    Josue

    #207104

    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/

    #207108

    Hey!

    Try the following:

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

    Best regards,
    Josue

    #207112

    That did it! Thanks!

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Custom.css styles not applied’ is closed to new replies.