Creating separate CSS styles for different links (primary menu, navigation, content)
I've used CSS for quite a while for text and link styles on static sites, however this is the first time I've used it for CMS layout and could do with some help. I'm developing a custom theme based on the theme Foundation and I need to create separate CSS styles for the primary menu links, navigation menu links and content links.
The problem is that the Foundation style.css file only has one set of styles for all links, wherever they are on the page:
a:link { color: #C0C0C0; }
a:visited { color: #C0C0C0; }
a:active { color: #ff0000; }
a:hover { }
However, since my theme has different background colours for the primary menu, left sidebar and body, I need to have separate CSS styles. I've found classes that relate to the different sections however they seem to relate to layout:
.header .navigation .navigation-primary { }
.sidebar-left { float: left; width: 20%; height: 100%; background-color: #2462A9; padding-top: 10px; padding-left: 0px; }
I'm guessing I have to create new classes for the primary and navigation links but I'm not sure how to call these within page.tpl.php. As you can see from the code below, I've managed to create a new class called menubar for the primary menu background, however any help on how to sort out the css for the links would be greatly appreciated.
<?php
if ($primary_links || $secondary_links):
?>
<?php
if ($primary_links):
?>
<?php
print theme('links', $primary_links);
?>
<?php
endif;
?>If anything about my post needs any clarification, please let me know. Thanks!
Correction
Sorry, the snippet above should have appeared like this:
<div class="menubar"><?php if ($primary_links || $secondary_links): ?>
<div class="navigation">
<?php if ($primary_links): ?>
<div class="navigation-primary">
<?php print theme('links', $primary_links); ?>
</div>
<?php endif; ?>
</div>
Structure
I can only see one
<?php endif; ?>but two<?php if (): ?>: have you terminated the<div class="menubar">too soon?Rules
You should be able to use rules like;-
.navigation-primary a:visited {color: #159;}.sidebar-left a:link {color: #dba;}
I would suggest getting firebug extension for firefox to help you see the id’s and classes of the tags produced by your theme.
Thanks zeta-zoo, that's
Thanks zeta-zoo, that's exactly what I was looking for, I've sorted out the different link styles.
However I've got another quick question: how would I go about centering text vertically within a div? The menu items in my menu bar are aligned to the top and neither vertical align or padding seems to do it (the former just doesn't seem to work when applied to my .menubar class and padding seems to add pixels to the outside of the box rather than the inside as an HTML table cell would).
I've been boning up on CSS as it's something I need to get up to speed on, however any suggestions would be appreciated.
Nested divs
If you centre text vertically in your .menubar class, the div inside fills the div.menubar anyway (and is not centred vertically itself), so this has no effect.
Do you have firebug? I’m working in the dark here: Post a link, and I’ll take a look.
Link
The site's up at http://194.83.69.200/. I've just migrated it from my dev server to a Windows server so ignore the error messages. I've just installed Firebug so I'll see if I can make any sense of the divs with it. Thanks again.
Try this...
how about removing height and vertical-align from .menubar, and adding
.navigation {padding: 10px 0;}or.navigation-primary {padding: 10px 0;}Note that
.links {padding: 10px 0;}would probably be over-ridden byul.links {padding: 0;}in system.cssPS. I notice that your include_path includes \ & / in one item (/Library/WebServer/Documents/r2l/sites/all/modules/civicrm\packages;)!
Thanks
I tried it on my dev server and you suggestion works fine.