Hello,
I have 4 images in every article and i use lightbox2. I wanna make them be displayed in-line. I tried a lot through css but i cant achieve it.
Can you help me please?
i attach the screen-shot

CommentFileSizeAuthor
Screenshot-4.png219.86 KBkwstasm83
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Jeff Burnz’s picture

Probably something like...

.field-type-image .field-item {
  display: inline;
}

If that doesn't give you what you want you can float the field-item div left or right.

You might want to use the actual field name selector (use Firebug to find that out (hint, its going to be .field-name-[fieldname])), because the above will target ALL image fields, maybe you don't want that.

Jeff Burnz’s picture

Status: Active » Closed (fixed)

Assuming fixed. No feedback for many months. Sad when people ask for help and can't even be bothered to come back and say thank-you or even acknowledge the effort to try and help. This user posted in D.O just hours before I closed this...

luxosstudios’s picture

Well I for one will say thank you! I have been firebugging and css-ing for hours on a similar problem for my site, this little bit of code did the trick so thank you very much! I just need to somehow get the text that's now moved up to the right of the images to get back down! :-0

faqing’s picture

The above code works in other themes in the style.css, but not Adaptive theme (Adaptive theme does not have style.css). In sort, which css file I should add the code if I use Adaptive theme (subtheme).

Thanks in advance.

mazwakefield’s picture

Component: Miscellaneous » CSS/HTML
Priority: Normal » Major
Status: Closed (fixed) » Active
Issue tags: +colorbox

Im having this same issue and ive absolutely pulling my hair out trying to solve it. Im using D7 and a template monster theme that ive re-designed. The gallery is using colorbox.

Ive tried the suggestion above but it just blows up my thumbnails to like double the size and theyre all pixelated?!?!

I also tried:

.field-name-field-gallery-image img {
display: inline;
padding: 3px;
background-color: #c3ddd9;
border: 1px solid #c3ddd9;
float: left;
clear:both;
margin: 5px;
}

and everything else works EXCEPT the inline statement.

Any ideas?? Need some help ASAP!

Thankyou!

Diane Bryan’s picture

For Adaptivetheme I believe the last css file loaded is responsive.custom.css.

If you don't need the responsiveness, you can try global.styles.css.

One assumes you're doing your coding to a custom subtheme, which is best practice.

If you have some module that is overriding either of those, there is always the abominable !important.

d

faqing’s picture

The correct code for adaptive theme is display: inline-block; you also need to put field-item together.

.field-name-field-gallery-image, 
.field-item  {
display: inline-block;
padding: 3px;
background-color: #c3ddd9;
border: 1px solid #c3ddd9;
float: left;
clear:both;
margin: 5px;
}
EmilSamson’s picture

Install these two
https://drupal.org/project/field_formatter_settings
https://drupal.org/project/grid_field_formatter

a. After successful installation, browse to the "Grid Field Formatter" settings page (under Configuration > Content), and select the field types for which the Grid Field Formatter should be made available. For you it will be Image : )

b. Then, browse to the "Manage Display" settings page, for an entity (Node content type, for example) with one of the field of the type that was selected in 2.a, to configure the formatter (See screenshots on the https://drupal.org/project/grid_field_formatter).
For example: the page content type:
Home » Administration » Structure » Content types » Page » Manage display

In the field formatter settings form, enable Grid Field Formatter and provide the number of columns (don't forget to save the form).

I did it in 5 mins ! : )

Jeff Burnz’s picture

Priority: Major » Normal
Status: Active » Fixed

Cheers for the links!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.