Skip to main content

How to move the tags around on the node

May 3, 2010 by Steve

The part of the node layout that gives you all your taxonomy terms is called "terms". I've got these as subject tags, so I want them next to the title of the post. The default for Newswire is to have them at the bottom right, so I need to move them. This requires rearranging the PHP code in node.tpl.php and making some CSS changes, but none of this is too difficult. (This will be easier to follow if you have sites/all/themes/newswire/node.tpl.php open in the text editor of your choice while you are reading this.)

Most themes will give you the terms section as a separate bit of code in the node.tpl.php structure, so that it can be wrapped with a div block and styled appropriately. In the Newswire theme, the block looks like this:

<?php if ($terms): ?>
< div class="tags"><?php print $terms; ?>< /div>
<?php endif; ?>

Translated from the PHP, it says "if the $terms variable has any content, then print a 'tags' div with the $terms inside." In Newswire as it is distributed, this block of code is down after the $content gets printed out. I cut it out of there and put it just before the $submitted block, which puts it after the title and before the date. (If you cut and past my code here, you will have trouble because I put spaces into the div tags to get them to show on the page.)

Problem with that is, it is still styled to show up over on the right. I want it to be tucked in on the left, under the title. In Firefox with Firebug installed, I can right click on the tags, choose Inspect Element from the menu, and have it show me all the CSS for those items. Doing that, I learned that the tags are all members of an unordered list (a <ul> element), with a class of "links", and that style information is on line 438 of sites/all/themes/newswire/style.css.

This section of code originally looked like this:

div.node ul.links {
text-align: right;
display: block;
font-size: 0.95em;
}

To move the tags over to the left side of the node listing, I tried changing the alignment to "text-align:right". And it worked, kind of. The problem was the tags are not left justified within their own tiny blocks, so they don't line up with the title and body of the note. I also had to change the padding around the tags themselves. I ended up adding this block of CSS, right after the code listed above.

div.tags ul.links {
text-align: left;
display: block;
list-style-type: none;
}
div.tags ul.links li {
padding: 0 1em 0 0;
}

This overrides the text-align from the previous block, putting my tags on the left, and also changes the padding of each item from both sides to only being padded on the right, letting everything line up on the left side of the page.

I'm no CSS guru, so there are probably things that could be changed to make this better, but it worked.

@stevew99999

  • @rosamundlannin I make regular chili but use that veggie crumble meat substitute stuff. 5 years 3 weeks ago
  • @Snarky_Geek Since I was awake at 4:30 this morning, and finally just gave up and went to work around 5:45, I feel your pain. 5 years 4 weeks ago
  • One of the Chicago office dogs really wants to play this morning @the_nerdery, keeps bringing toys over to try to start something. 5 years 12 weeks ago

Premium Drupal Themes by Adaptivethemes