-
AuthorPosts
-
December 16, 2013 at 5:57 pm #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?
December 16, 2013 at 6:30 pm #200738Hi 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,
DevinDecember 16, 2013 at 6:49 pm #200743The 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 #200761The 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 11 years ago by Devin.
December 30, 2013 at 6:28 pm #203790Devin, 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 #203799December 30, 2013 at 6:55 pm #203803Got everything working great, thanks for the feedback!
December 30, 2013 at 6:59 pm #203808You are welcome, glad we could help :)
Regards,
JosueJanuary 8, 2014 at 9:55 pm #207104One 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.
January 8, 2014 at 10:01 pm #207108Hey!
Try the following:
.sub-menu a { font-size: 24px !important; line-height: 30px !important; }
Best regards,
JosueJanuary 8, 2014 at 10:20 pm #207112That did it! Thanks!
-
AuthorPosts
- The topic ‘Custom.css styles not applied’ is closed to new replies.