Hey guys. I wanted to try to do somethign with the navigation menu items and make little boxes around each one. I'm trying to understand how this drupal theme works exactly, but I wanted to test something.

In page.tpl.php, I found the following line of code around line 195:

 print theme(array('links__system_main_menu', 'links'), $primary_links,
            array(
              'id' => 'main-menu',
              'class' => 'links clearfix',
            ),
            array(
              'text' => t('Main menu'),
              'level' => 'h2',
              'class' => 'element-invisible',
            ));

Now, isn't this the PHP telling drupal to place the menu there. Like whatever is onthe primary menu, this will make it appear? So I put <div id="primarylinkstheme"> and </div> around this tag to try to style this particular element. I'm sure there are other CSS options for this all ready in place, but I couldn't find it correctly. So I put it around it and added this to my CSS sheet, only to find that it didn't do anything to the menu links. Does anyone know why?

And how would you be able to style the menu links exactly if not the above way? I want to put div boxes around each individual item, space them out in a certain way, etc, but not sure how this is done with this theme.

Does anyone nkow of a simpler theme perhaps to build on before going into this Zen theme.. it seems many things are hard for me to find and it's taking me forever to do simple tasks.. not sure if it's just Zen or because I'm newer to drupal or if all themes do have a learning curve somehow.

Comments

sunshinee’s picture

sunshinee commented

First, I would recommend sticking with Zen if you plan to do ongoing development with Drupal. The 'learning curve' with Zen is similar to other base themes, so if you've already started digging into it, I doubt you'll find a huge benefit to switch base themes.

That out of the way, one possibility is that you need to clear your theme registry when you modify page.tpl.php. Go to configuration>performance and clear the caches. Or turn on the theme setting to clear the registry with each page.

Assuming you still see no effect, the easiest way to target all the menu elements similar styling is to find #main-menu in Zen's navigation.css file. You can modify this directly in your subtheme or just use it as a reference. For instance, if you want to add a border, padding, and margin to each link, you'd use something like

#main-menu-list ul li {
	border:1px solid #000;
	margin: 0 5px;
	padding: 3px;
}

To style individual links, use pseudo classes or get their IDs using Firebug.

Now if you really need to add an additional wrapper, the way you've done so should work. However, you'd need to use the same specificity to override the default styling, such as

.myWrapperClass #main-menu-list ul li {
	border:1px solid #000;
	margin: 0 5px;
	padding: 3px;
}

Hope this helps.
Joy

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Closed (fixed)

closing old support issues

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Issue summary: View changes

code wasnt appearing