0

I'm using the nifty Display Suite module to create a custom layout for an event page. I'm using the stacked fluid 2 column layout with the Body field on the left and the image and event fields in the left column.

I would like the body (left region) to wrap around the image and date fields (right region). I''ve been unable to figure out to to accomplish this.

http://ctu.robohobo.net/node/17

How would I make that happen?

Drupal: 7.19 Display Suite: 7.x-2.0

4
  • 1
    it was hard to understand what you want, can you provide a picture for your desired look ?
    – Sohail
    Feb 11, 2013 at 21:44
  • This is essentially a HTML + CSS question, is it? The Display Suite does not really matter.
    – donquixote
    Nov 9, 2013 at 3:40
  • You first say "a custom layout", then you say "I'm using the stacked fluid 2 column layout". So in fact you are using a predefined layout, not a custom one.
    – donquixote
    Nov 9, 2013 at 3:43
  • You want to look for hook_ds_layout_info(). The benefit of a custom layout is you can reuse it in other places. Your CSS can be targeted at the layout, instead of being targeted at a special case.
    – donquixote
    Nov 9, 2013 at 3:44

2 Answers 2

1

To solve this issue you need to reorder your html by flipping columns in your custom layout

If you inspect your html you'll see that group-left renders first then group-right

<div class="group-left">content</div>

<section class="group-right">image and location </section>

So you need to have the following structure:

<div class="group-left">image and location </div>

<section class="group-right">content</section> 

Then add the following style to your css file

.ds-2col-stacked > .group-left {
  float: right;
  width: auto;
}

.ds-2col-stacked > .group-right {
  float: none;
  width: auto;
}
0

Try to change structure of template file of display suite module file named ds-2col.tpl.php in :

your project > sites > all > ds > layouts > ds_2col > ds-2col.tpl.php

Your Answer

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

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