By RayvenUK on

I'm still learning Drupal and have been using Display Suite as a way of formatting my site without having to code up my own templates (I'm comfortable with PHP and CSS3, but not enough to venture out alone quite yet).

I've used the 3 column fluid stacked to help manage the placement of text and images, but i have a couple of questions.

I wanted an image to appear beneath my text, so added a field to the footer panel of the display suite and set it as an image. This works a treat, but it is left justified. I have used FireBug to test that if I were to add "text-align:centre" to the class ".ds-3col-stacked-fluid>group-footer" then the image centers. but is there a way i can do this without actually editing the style sheet?

The second question is to do with wrapping. I added an image field to display in the right hand column, and the text happily fits into left and center columns. However when the image finishes, the text doesn't flow beneath the image. Is there any way to do this?

Thanks in advance for any assistance anyone can give me on this.

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

While display suite is helpful for overall positioning you are going to need css for the fine tuning.

mike_san’s picture

mike_san commented

Module style sheets may be modified by the module developer in a module update. If you edit them directly, you take the risk of your style sheet modifications being overwritten. Rather add a new stylesheet to the themes .info file and override them.
I use display suite with extensively modified styles on my family history site http://sandesancestry.net and have a dedicated display suite stylesheet that overrides the module stylesheet.

Good luck

Jaypan’s picture

Jaypan commented

Adding a stylesheet to the .info file still risks being overwritten in an update. The best thing to do is create a sub-theme of the theme, and add your css file to that.

mike_san’s picture

mike_san commented

You're right of course. Perhaps I didn't make this clear!