Customize Drupal's Default Menus

By srhcpa@debitsandcredits.com on 10 Mar 2015 at 02:20 UTC

I have been working with Drupal for a little over a year now and I have pretty good handle on many of the basics. Now I am tackling the menu system. I want to customize the appearance of the default menu system. I don't want to use an add-on module because I want to learn how to work with Drupal as-is first.

I am using a Best Responsive template and I have been reading that block--system--main-menu.tpl.php will allow me to override block-system-main-menu. I understand what this means, I just can't seem to find anyplace where I can see an example of what would go into block--system--main-menu.tpl.php. I have tried to find this core functionality so that I can see how to modify it, but to no avail.

All I really want to do is modify the font, the color, the spacing, and a few other minor attributes of the default menu.

Can someone point me in the right direction?

Thanks,

Steve

Comments

=-=

VM commented 10 March 2015 at 02:43

All I really want to do is modify the font, the color, the spacing, and a few other minor attributes of the default menu.

none of the above is attained through customizing a tpl.php file. Rather you should be styling with CSS.

The .tpl.php file you mention

Jaypan commented 10 March 2015 at 03:17

The .tpl.php file you mention is only used for altering the HTML wrapping the menu, it doesn't change the menu itself.

If you want to change the HTML in the menu itself (and generally you shouldn't need to, as they usually contain enough CSS classes and IDs to be able to do it all purely with CSS), you can override the following theme functions:

But first you should see if you can accomplish what you want through CSS without altering the menu markup (HTML), as the markup is already how menus should be structured.

Using CSS instead of modifying the HTML

srhcpa@debitsandcredits.com commented 10 March 2015 at 03:59

Okay, thank you Jaypan.

Here is where I am having a problem, then.

<div id="main-content" class="clearfix">
<div class="abc"> 
<div class="region region-menu-top"> (I created this region)
<div id="block-system-main-menu" class+"block block-system contextual-links-region block-menu">
<h2>
   <span>Main menu</span>
</h2>
...

I believe that I have tried every css class and I was looking at "block-system-main-menu" as the likely class to modify. The problem is that I can't find where this class is located.

Thanks for your help,

Steve

Why would you need to modify

Jaypan commented 10 March 2015 at 04:29

Why would you need to modify it?

Also, that class is auto generated, it would be pretty difficult to remove or modify. You'd be better off adding your own additional class.

Finally, something is funny in there, instead of an = you have a +.

How to add an additional class

srhcpa@debitsandcredits.com commented 10 March 2015 at 15:50

Okay, now we are getting somewhere. Where and how would I add an additional class?

I have looked through the menu items to be able to add one and I can't find it.

Please point me in the right direction.

Thanks,

Steve

=-=

VM commented 10 March 2015 at 15:57

multiple methods found @ http://bit.ly/1ERhhA1

Before addressing that (even

Jaypan commented 10 March 2015 at 22:37

Before addressing that (even though it's already been addressed), why not just use the existing class?

Changing the CSS

srhcpa@debitsandcredits.com commented 12 March 2015 at 19:40

First, thank you all for getting my conceptual understanding back on track and alerting me to the fact that it always comes back to the basics: HTML and/or CSS.

In this case, I am working custom.css file which overrides classes from style.css or adds new ones.

print render($page['menu_top']);

As a test, I want to turn the text color from red to blue (so I know I am targeting the right elements, etc.)

From custom.css
.abc {
border: 3px solid;
border-color: #ff0000;
color: blue;
margin-bottom: 30px;
}

but the body a tag is preventing this.

From style.css
body a {
color: #e73420;
}

What am I missing? I don't want to override the body style.

Thanks for your help.

Steve

=-=

VM commented 12 March 2015 at 19:48

Are you inspecting the element you want to change with firefox or chrome's developer tools to see how the classes are being used?

Rather then showing up the PHP, please show the rendered HTML of page for the element.
A link to the site in question would make this much much easier to work through as we can show examples rather than explain theory.