I've been working on a theme just in my spare time and I'm trying to style the way the article/node is displayed. Currently its simply formatted to:

  1. title
  2. submitted info
  3. image
  4. Short summary/description
  5. read more / login

I want the field layout to be somewhat like the one they use on the League of Legends website (I believe that site is using Drupal)I want to make it so they layout is basically like this part of the site: Recent News Section leagueoflegends.com

However I am unsure how to do this and what files I need to edit, I've been styling the rest of the site using responsive.css however I'm not sure how to change the layout and style it all.

Any help with this would be much appreciated.

Thanks, Ben

2 Answers 2


There are several ways you can go about re-structuring your html. Two options would be:

  1. Overriding / creating template files for the content type that you are trying to modify.
  2. Using a contrib module like Display Suite which gives you an interface to easily modify a content types structure and classes.

The simplest solution is to add float: left to your CSS file.

Analysing the example of League of Legends and their News section you can see the following structure:

Every post has been placed into a div class="gs-container" whit 2 containers in that:

  • div class="default-1-3" which "surrounds" the node image
  • div class="default-2-3" which "surrounds" the node title (h4), node summary (div class="teaser-content"), and the post date (div class="horizontal-group" ...)

Now, the CSS file says:

.gs-container > * {
float: left;
padding-left: 20px;
padding-top: 20px;
position: relative;

So anything placed directly after an element with class="gs-container" [in our example div class="default-1-3" (image) and div class="default-2-3" (content)] becomes among others float: left - this is the key to achieve what you want.

What can you do: Simply render:

  1. node image
  2. node title
  3. node summary and so on

and add a CSS class to the node image wrapper that has float: left property.

BTW: If you would like see how something has been done/structured you can use "Inspect element" in your browser (or other tools like FireBug) to see at least the HTML and CSS structure of a web page. If you would like to check what technologies has been used on websites you can use Wappalyzer.

  • What file is the one I need to edit to do the classes around the different elements?
    – TheBenj30
    Mar 22, 2015 at 19:52
  • What type of file you mean exactly? You don't know where to put the CSS property or CSS class in?
    – 0x6d6c
    Mar 22, 2015 at 20:44
  • You said about how they used the div classes and then styled, them (I think you are saying they added the classes themselves) I don't know which file I need to open to add the div classes though.
    – TheBenj30
    Mar 22, 2015 at 20:55
  • The simplest way: Check how your theme renders the node image (in teaser view mode) and what CSS classes are added to the container (div in most cases) which contains the img itself. Add this/these class(es) to your CSS file. An example: <div class="container"><div class="container-inner"><div class="field field-name-field-article-media field-type-file field-label-hidden"><div class="file file-image file-image-jpeg" id="file-1234"><img width=10 height=10 />, so your class could be (in CSS file): .container {float: left;}.
    – 0x6d6c
    Mar 22, 2015 at 22:32

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.