Remove Drupal 7 menu classes

Hi all

Been at this for some time now, trying to understand how to remove/replace the classes assigned to my main-navigation.
I’m creating a theme from scratch but a lot of Drupals core styles are still being assigned to a lot of the elements, including the navigation which I’m currently working on.

The output:


<ul class="menu">
	<li class="leaf">link 1</li>
	<li class="expanded">link 2
		<ul class="menu">
			<li class="first leaf">sub 1</li>
			<li class="last leaf">sub 2</li>
		</ul>
	</li>
	<li class="last leaf">link 3</li>
</ul>

My main concern is the sub <ul> inside the expanded <li> - How do I remove ’ class=“menu” ’ from the second <ul> ?
Generally speaking, how do I remove all the classes or just a few that I don’t need, how do I add my own?

I only need:


<ul class="menu">
	<li>link 1</li>
	<li>link 2
		<ul>
			<li>sub 1</li>
			<li>sub 2</li>
		</ul>
	</li>
	<li>link 3</li>
</ul>

Everything is already styled from <ul class=“menu”>

Any information is much appreciated.
Thanks, Barry

I’d suggest leaving the classes as is and adjusting your stylesheet CSS to affect ul.menu li differently that ul.menu li ul.menu li. It’s a much faster way to go about it.

NOTE: If you do decide that you must remove the class attributes, you can do that at the theming level by creating or editing template.php in your theme and overloading the mytheme_menu_item() function.

Cool thanks awasson.

Yes I did think about amending the css to fit drupal’s core styling but kind of defeats the object, and If I start building numerous amounts of drupal sites then this is something worthwhile learning.

You mention

mytheme_menu_item() function
I have managed to add:

function my_theme_menu_tree(&$variables) {
return '<ul id="nav">' . $variables['tree'] . '</ul>';
}

Which basically removes the class=“menu” and adds the id#nav.
But still, this now adds the id=“nav” to the second <ul> - How can I target the second <ul> and remove the other classes?

Another problem is that now all the menus have an ID of #nav including my administration panel.
Is it possible to target the menu by region or some other way to only effect one menu.

Whats the difference between menu_item | menu_tree ?

Cheers,
Barry

Yeah, I’ve been through this battle myself but I finally decided to embrace their menu classes and manipulate it via CSS and/or jQuery. Once I wrapped my head around what they intended it made my life a whole lot easier. I strongly recommend adding classes rather than ID’s to the elements so that you keep it semantically correct and you still have the ability to target the elements you’re after via CSS (or jQuery) by targeting ul.someclass li a {} or ul.someclass li ul.someclass li a {}

There are benefits messing with the menu system via custom code but IMO, this isn’t the case because it’s so easy to do it via a couple of lines of CSS. Never-the-less, here’s an article that might be handy for refining your code: http://www.wdtutorials.com/drupal7/85#

Ha funny enough… I’ve been reading and bookmarked http://www.wdtutorials.com/drupal7/85#

… I finally decided to embrace their menu classes and manipulate it via CSS

Yes it might be something I might have to get used to but I’m very stubborn in this area, had a similar issue when theming magento some time back.
Its nice to build something locally then clone this into the CMS, only if it was that easy :slight_smile:

The ID was used because I only usually have one main navigation and style everything from this ID I don’t want to start adding duplicate classes when I’ll only use the menu styling once for the main nav - Example: #nav ul li ul {}

Off Topic: Been meaning to ask - do you prefer using .classes over #ids even if the style is unique (example: #wrapper) and will only be used once?

Barry

Yes, actually a couple of years ago I decided to use less ID’s and more classes just in case I needed to duplicate a region for some sort of jQuery trickery or something. I usually keep IDs for things like #header, #left, #center, #right, #footer but everything else is a class and sometimes left, center and right are classes to, depending on what I’m doing. I can usually still target a specific container but it also leaves me the flexibility to duplicate a container without being bad code.

Andrew

Yes it makes sense, a suppose its always down to personal preference as well.

Back on topic: Drupal. A steep learning curve like most CMSs, I might stick it out for now until and see if I can customize this how I want it.
If all else fails, I’ll have to stick with Drupal’s naming conventions ( feel like the CMS has won - Its beaten me! :slight_smile: )

Just checked out your site, very cool! Nice colors, no Drupal then ha ha.
Not decided to use any OG: Meta tags? Don’t you bother with Facebook? A suppose its slightly out of context - I only say this been messing about with Facebooks open graph, quite powerful for just a few tags. Regarding presentation anyway.

Barry

I came across this page which gives a good overview of things. - http://projectdesignportfolio.com/2011/12/29/basic-to-advanced-custom-theming-in-drupal-7-in-context/

Yeah, that site is 11 years old now… Too busy to get around with the new site. I have one in development (Drupal) and it’s almost done but we still have to finish the homepage design. It’s been 6 months since I put the new site together so hopefully soon we’ll come up with a design we’re happy with soon.

I started doing sites with Drupal about 6 years ago when I got dragged kicking and screaming into as site. When I came out the other side, I had an idea that it might be a good idea to learn more about it. Now I’m a real fan of the platform and know it pretty well. I’ve done some pretty crazy stuff with it design wise and I think it’s a pretty flexible solution but you need to know the go-to modules. Almost every site I build has:

  • Admin Menu (I turn off the Core toolbar)
  • WYSIWYG (I use TinyMCE with it)
  • IMCE (plus mkdir, rename and wysiwyg bridge)
  • Views (+ CTools)
  • Token + Pathauto + Entity
  • Context
  • Global Redirect

Often I’ll use Content Access so I can create content that requires a specific role before it can be accessed.

I took up a challenge yesterday from one of my clients who had a static 10 page site that they wanted reproduced in D7. The content and design is very simple and didn’t need views or anything. I reproduced it on my test server and then had them review it. Once it was OK’d, I zipped up and archive of the old site and moved the Drupal site to the production server. From start to finish, it took 5 hours. That was mind boggling fast.

Andrew

Ha Cool!
5 hours turn around - It shows if you keep at it and learn it well it benefits in the long run :slight_smile:
Hopefully I’ll be at the stage very soon.

I’ve came across a few module recommendations but still a Drupal novice currently working on my first site. Google Analytics might be one to add.
It seems like Views and Panels are popular, more stuff to learn.

Must admit, always frustrating learning any new CMS bombarded with chunks of irrelevant markup that isn’t needed and spend most of your time trying to change it, remove it or style it ha. A suppose that’s part of the fun!

Thanks for the list and information.

Out of curiosity:
Did you create a theme from scratch or create a sub-theme?
Did you use all of Drupal’s CSS naming conventions?
Did you override any HTML output?
What was you workflow, how do you approach each new Drupal build?

If you have time, just trying to get a better understanding cheers.

I also read the Omega theme is a good reference to work from, using the latest HTML5 elements and out of the box responsive design.
Have you used the Omega theme?

Did you learn everything on-line… any good book references?

Barry

Hey Barry,

Sorry about the late reply… I was inundated with emails the other day and I missed the Sitepoint forum reply message.

Yes, I’m pretty stoked about the 5 hour turnaround but it’s a simple 10 page site and it doesn’t have any complex views or anything.

Once you learn them, Views will become your best friend. They are absolutely amazing and I find them to be extremely handy when they are used as blocks.

As far as theming goes, 99% of the time I theme from scratch. The 5 hour challenge site was themed from scratch and only consists of 5 files:

  • theme.info
  • html.tpl.php
  • page.tpl.php
  • style.css
  • screenshot.png

I’m changing my theming approach now because of the need for responsive, mobile friendly themes. I think the best approach for this is sub-theming under Omega or Adaptive Themes. I’m currently working on an Adaptive Themes sub-theme. The desktop theming part seems dead easy but I’m still struggling with making it work nicely in a small viewport. I’m sure with some experience I’ll have a better understanding of what to expect as the viewport gets smaller.

I do use Drupal’s CSS naming conventions. Sometimes I’ll reset Drupal’s built in styles and then override them but I find if I understand what the core team are thinking when they produce a component (like the nav tree), I can rework it to do whatever I need more effectively. Here’s an example of a simple footer menu where I removed the bullets styles (image and list style) and made it a simple horizontal list of links:


<style>

#footer ul.menu {
    border: medium none;
    list-style: none outside none;
    text-align: center;
}

#footer ul li.leaf {
    border-right: 1px solid #333333;
    display: inline-block;
    font-size: 10px;
    line-height: 100%;
    list-style-image: none;
    list-style-type: none;
    margin: 0;
    padding: 0 6px 0 2px;
}

#footer ul li.last {
    border: none;
}

#footer ul li a {
    color: #333333;
}

</style>


If I need to I’ll override the HTML output either in pag.tpl.php, node.tpl.php or in a views template. It’s not too difficult once you figure out where it is that you want to make your changes.

Workflow depends highly on the project. Big projects usually begin with a review to ensure we know exactly what the client wants/needs, then we do a design phase with layout comps, wireframes etc… We’ll follow that or build the mechanics of the site concurrently without any design attributes. Sometimes I’ll just build a generic theme so I can put elements where they need to be. We’ll follow that with applying the design (theming), sometimes do usability testing to see if we’re hitting the mark and then it goes through final proofing and if it’s ok, it gets launched.

  • Almost always, I’ll bring the client in early on in the project to show them the user interface and get them familiar with the tools for creating and editing the content. It pays off in spades because they learn the system as we’re building the site and they have less rookie questions after the site is complete.

** The 5-hour site was just a simple assess the site and build it. The client already has another Drupal site so there’s no need for training and I was just duplicating an existing site with an existing design. It couldn’t have been easier.

*** Sometimes I’ll spend a few hours during quoting to mock up an approach just to make sure I can pull it off. That’s just part of the process and I don’t think it can be avoided. I’ve done that before and not gotten the job which is a drag but the flip side is to get the job and not have quoted the appropriate amount of time and resources so it can’t really be avoided.

A couple of good books for Drupal are:
Using Drupal: http://shop.oreilly.com/product/0636920010890.do
Pro Drupal Development 7: http://www.apress.com/9781430228387

Take it easy,
Andrew

I was going to ask a question, but saw yours…

Regarding your initial query about struggling against Drupal’s own CSS output: is there any need for your visitors to have all of Drupal’s stylesheets? If there is, my thought won’t matter; but if not, give anonymous visitors only your own stylesheets, like this:


<?php if ($logged_in ) {print $styles;} ?>

And put your stylesheets in links below that. It helped me a lot and it also vastly reduces the quantity of output for visitors. If you have some modules which require styles, add them in with your own.

No worries awasson and thanks for getting back - much appreciated :cool:

This is what I’ve been updating and changing myself so seems I’m on the right track.

As far as theming goes, 99% of the time I theme from scratch. The 5 hour challenge site was themed from scratch and only consists of 5 files:

  • theme.info
  • html.tpl.php
  • page.tpl.php
  • style.css
  • screenshot.png

I’ve already done a bit of responsive design so have a good idea on what works.
A couple of media queries and additional CSS usually does the trick for the not so completed sites.
I think I’ll start on a Omega sub-theme next.

And after looking at your footer menu seems like a good approach as soon as you understand the naming convention.
Simply target each menu by region/id with the bonus of cutting down on the overrides and extra markup.
Once I’ve mastered views and a few other drupal bits I’m sure I’ll be up to speed sooner enough.

Anyway, I think that covers things for me for now.
Thanks for your detailed descriptions and book recommendations, quite like the look of Pro Drupal Development 7.

Until the next post awasson, cheers!
Barry