Posted by bjc5070 on March 4, 2011 at 1:27am
I added an image field to my basic page content type. I installed colorbox. everything is working great. only problem is the way the images appear in my node. they are stacked one on top of the other. I would like them to appear horizontal. more like a mini gallery. I tried css img {display: inline;} didnt change anything. anyone know of a way that i can do this?
can I edit the CSS of image_field?
Maybe I need to create an Image style?
drupal 7 install.
Comments
Try Firebug...
... to edit the css for the wrapper divs. Pretty much everything that comes out of a drupal field is wrapped in one or more divs or spans. When you get it the way you like, add the changes to your css.
'<img>' is already an inline element, and won't show block-level (taking up its own line like a paragraph) unless it's inside something else -- like a <p> or a <div>. You could try making these containers display: inline, or if you still want to be able to apply block-level properties like margin and padding, keep them as blocks but float either the divs or the img's left.
floating the images worked.
I have firebug and cant live without it.
floating the images worked. but now its floating all my images. is there a way to add a class or id.
Sure, you can modify the
Sure, you can modify the template for the node-type you're outputting the image in if there's not a class or id around it already. You can also modify the field output for all fields or just your image field.
You probably have a wrapper with a bunch of classes that looks something like
class="field field-name-field-image field-type-image field-label-above"unless you've modified the field output. You should be able to apply the styles to ".field-name-[field-whatever-your-image-field-is-called] img" and get it to work. Probably have to add a clear in there somewhere, too.Perhaps I'm misunderstanding? Do you have one image per node? Are there images outside the node? What selector are you targeting with your css?
My suggestion would be to use
My suggestion would be to use the views module. Set the formatting setting to "grid" and you can choose how many columns you want. It allows you to filter down to only show certain image types as well.
I am trying to add a few
I am trying to add a few images to basic pages. for example, I have a page about "print design" it has an explanation and a few images. trying to figure out how to move and style those specific images.