I need to change the way images appear on a web page. I need to have 3 images across, three going vertically down, and 3 on the bottom. The middle space I want to keep empty. Is there a way to do it manually on a dev site without going into the css code?

Comments

Sam Moore’s picture

Well CSS is probably the easiest approach.
I suppose you could create blocks, one for each picture, and if your theme's regions are set up to allow it, place them so that you get the layout you want.
If you're going to be doing more of this sort of thing, though, have a look at Panels or Display Suite.
Both are solutions that allow you to customize the layout of a particular node in very creative ways.
The downside of course is that you'll have a lot of module code running, and you have to learn how to use it.

Panels: https://www.drupal.org/project/panels
Display suite: https://www.drupal.org/project/ds

Lyv’s picture

Can I use blocks even if the images are aligned using the grid system of bootstrap 3?

VM’s picture

yes. Though I'd use a block per each image set rather than each image.

Another option that I'd consider especially if the images are static and are more a theme element rather than a content element is print them in the page.tpl.php file. Though CSS will be required regardless of which method you employ for horizontal alignment and any other styling required.

Lyv’s picture

Do I do these changes in the source code or the css file? There are so many css files that I do not know to which css file that particular page is related to. Some css files are not formatted properly and are impossible to read.

VM’s picture

which changes? you should never make any changes to default css files. Changes go into a custom.css file intended to contain all changes.

Lyv’s picture

Should custom.css file be included in the theme folder? Or do I copy and paste the content of the original style.css into my notepad and save it on my computer as custom.css?

VM’s picture

custom.css (custom is a placeholder for whatever you choose to name the file). Looking at the STARTERKIT folder within zen and inspecting the starterkit.info.txt file indicates that the included style.css can be used as a custom.css file as it doesn't include any already existing definitions.

Lyv’s picture

Thank you!