Drupal 7 Node Class Module
Share with Others
In this episode you will learn how the Drupal 7 Node Class module works with the basic page content type. The simplicity of the Node Class module provides an easy way for site builders and themers to add a CSS class directly to the wrapper on the node. Using this module allows for various different layouts and styles to be called based on defined CSS rules.
Hello everybody and welcome to Episode Number 166 of the Daily Dose of Drupal. I am Adam, and today we are looking at the Node Class Module. I’m going to pull that up here. The Node Class Module is a really really simple module but comes in handy for people that aren’t as familiar with PHP and other ways to do this but basically, what the node Class module does is it gives you an easy way to add a Class on the individual node. So then you can define different styles with your themers as well with any other developers in the group.
So we’re going to take a look at that here quickly. Again, it’s a really simple module but does come in handy for some cases. A couple of housekeeping things, you make sure you head over to codekarate.com and check out our EBook there, been going strong getting a lot of great feedback from everybody. I appreciate it if you do get the EBook to let us know what you think about it. We’re always looking to improve that and are improving that on a weekly basis. Also, we do another special here, the first person to watch this video and email email@example.com and say that they want a free copy of the EBook, we’ll send you a free copy. So make sure to send I Want a Free EBook to firstname.lastname@example.org.
Let’s get to the module, so the Node Class Module, so the first thing that you want to do is you want to download that and get that installed. So once we get it installed, all you do is enable it, turn that on. Once you get the non-class module installed there’s nothing to configure on the module. All you need to do is go our content and create a piece of content. So I’m going to add a page and call it and I’m going to paste in some text and at the bottom here you’ll see there’s a node class setting in the setting area down there. Basically all you do is you can define it by adding a space separated list. So if we want to add fancy and I can see here, let’s go picture-left.
So for example, both these class are going to print separately. So fancy and picture-left, so let’s add that, the basic page is will get created, so there’s our node class example node and you see there’s some text in here. So right now nothing look like anything special has happened, but if we dive in and look at the code on the back end, so we pull up our code editor or debugger and we hover over the node we’ll see that on the node right there there’s our two classes. So there’s fancy and picture-left getting printed. So then with CSS we could define that by calling up picture-left and changing the layout of that area.
So while that’s pretty handy, let’s say for example you had a blog and you wanted two different layouts like if one had a picture and one didn’t had a picture. Well you can add picture-left class and that would view for that when you want the picture to be on the left or you can add picture right class and that would be to come out the picture on the right and with CSS you can then change the layout. So obviously listen to what that class is. So pretty simple module, that’s really all there is to it, but again nicely to add a class directly into the HTML about having an only PHP or having to touch any template file so it’s kind of a quick easy way to get that accomplished.
Alright I don’t want to really go on much further on this, there’s nothing much else to this module. Make sure also to check us out at Twitter land, you can follow me @AdamLearing or at Shane @smthomas3. You can follow us there. Other than that guys, that’s it, let us know what you think again about the EBook, any other videos you want us to take a look or any other modules you want us to take a look at, we’ll be happy to do that as well. Until next time, thanks.