I have three fields in my node that I'd like to group together with a tag (so I can center them all next to each other) but I'm not sure how to do this.

The fields are a user photo (the author of the node) a field that just says 'by' and then the 'author name' field.

Right now they look like this:


I could just 'float: left' but I also need to center the whole group on the page so that actually won't work in this case. Hence my need to put them inside a tag.

Note: I'm also currently trying to use display suite to display my nodes, if that make a difference.

I looked at the display suite tpl file I'm using and frankly it doesn't give me many options other than 'print $ds_content;'

Anyone know how to do this?

2 Answers 2


If you are using Display Suite you can change the layout. For Example: Two Column stacked (fluid) and assign the 3 fields to the header column and the rest in the bottom column.

If you inspect the element with your browser, the header column should have a wrapper, so then you can center the content with css.

enter image description here

PS: You could also create your own Display Suite layout by modifying the ds-2col-stacked-fluid-node.tpl.php file. (ex: get rid of the left and right fields. so its just a top and bottom) or add a 3rd horizontal column if you need another one.

  • thanks. I tried this and it sorta helped but wasn't ideal. I was able to put all my top stuff in the header and then my author, photo, and by fields in the left column, and all the rest of the content in the footer. ok, i then centered the '.group-left' and floated all the items inside to the left...which overrode the text-align center I setup on the group div. so I had to manually adjust to margin-left: 38% for the group to make it center-aligned. of course this will have to be manually adjusted for all screen sizes. maybe you were thinking something else?
    – Sage
    Nov 5, 2015 at 21:34
  • If you want to center them, you can't float them. A better alternative would be to make them all display: inline-block; so you can still stylize them as a block element, and they'll still pay attention to your text-align: center; on the parent wrapper. JS Fiddle Example
    – No Sssweat
    Nov 5, 2015 at 23:03
  • yea that did it. I added display: inline-block to all the <div>'s holding those three pieces of content. I also had to set the width to auto on one of them because it was taking up the whole width of the content area (obviously causing an issue)...I also set the vertical-align property to 'middle' for my image. Thanks for your help!
    – Sage
    Nov 6, 2015 at 1:55

To provide the custom markup, you have to override the tpl.php file for that node. To override this, follow these steps :

1) Copy the node.tpl.php in your theme.

2)Rename it node--"yourContentTypeMachineName".tpl.php for example my custom file is now node--image_archive.tpl.php

3) to test it out write some text(anything) in your new node.tpl file.

4)paste your new node.tpl file back in you theme folder

5)Clear all cache

Now access all the field and provide the custom markup as you want.

  • this doesn't work for me for the reason I explained above (I'm using the display suite tpl which only has one variable).
    – Sage
    Nov 5, 2015 at 21:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.