1

I use the theme 'Business' and the standard setting of it is that the teasers of the articles I put on the front page are aligned vertically, but I'd like to have them horizontally in blocks of three--next to each other--instead.

Now I would like to know if it's possible to change this, probably by changing some of the css code (If explained in detail I think I should be able to do this, but I'm rather inexperienced..) and otherwise perhaps with a module I haven't found yet?

I'd be very much obliged.

Edit to answer Volker's question:

I create the teasers automatically when I make a new page: In the menu settings there's an option to 'Promote to front page', which I do and then the link, the image and the first paragraph appear on the front page.

Improve this question
6
  • Do you use this one? drupal.org/project/business Commented Apr 9, 2013 at 13:56
  • There are some more themes named business... Commented Apr 9, 2013 at 13:57
  • Yes, sorry, that's the one. When I installed it I was under the impression the 'Highlights' were where the articles would go but it turned out that was not the case--but in comparison with other themes I tried I was most content with this theme so I kept it. :) Commented Apr 9, 2013 at 14:07
  • Ok. Please provide some more information in your question (just edit it ;) about how you create your teasers and how you place them on the front page. Are you using the views module? Panels? If you describe this a bit more accurate, i think there's a better chance to answer your question. Basically, i think you have to edit your CSS, like giving the teaser a class and then add a width and a float:left, so they can align horizontally. Commented Apr 9, 2013 at 14:23
  • (edited the question) Where / what exactly would I edit in CSS? Commented Apr 9, 2013 at 14:33

1 Answer 1

Reset to default
2

I think you'll have to investigate a bit further into your site structure generally. ;)

Assuming that you have content types of articles and basic pages on your frontpage, you could try something like this in your CSS:

.node-promoted { float: left; margin-right: 20px; max-width: 280px;

}

"node-promoted" is the class one of several classes of teasers of articles and/or basic pages promoted to frontpage. You can use the almighty Firebug-Addon for FF to find this out ...

Improve this answer
4
  • That works perfectly! Thank you! However, is there a way to get it to 2 instead of 3 'boxes', cause I forgot there's a sidebar I'm using .. :B And now the third is posted under the second, leaving a space open to the left, and then the fourth and fifth are posted under that. So what I'm looking for (so sorry!) is two boxes with teasers next to each other , and then two new boxes with the teasers. Commented Apr 9, 2013 at 15:13
  • See, one question leads to another. How do we get from here? Are you willing to spent some time for CSS-Basics? Look here: barelyfitz.com/screencast/html-training/css/positioning at topic number 9... or here: vanseodesign.com/css/understanding-css-floats Commented Apr 9, 2013 at 15:18
  • Of course, I'm always willing to learn. :) I looked at it, but I'm not sure (or better yet: I have no idea) how to incorporate that into my question though. :B EDIT I added a height to the boxes and now they align two-to-two. I think this solved it, right? :D Commented Apr 9, 2013 at 15:27
  • Good! The second link in my comment above should give you an idea of how floats are working. Just start with a simple HTML-Page and experiment... happy coding! ;) Commented Apr 9, 2013 at 15:36

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.