By Lostmonkey on

Hi,

I'm trying to add a border to the images in my gallery (the full size images, not the thumbnails). I managed to do it previously when using 4.6 by adding this to the image.css:

.preview img { ...}

however this doesn't seem to work now with the 4.7 image.module.

How do I add the border?

( see one of my images for css code: http://www.lostmonkey.dk/image/double )

Thanks,
Mikkel

⋅ Categories: Drupal 4.7.x

Comments

sol77’s picture

sol77 commented

I haven't played around with that module but it looks like img.image.preview { ... } would work. I am assuming that you mean the large image on the page you linked to.

If you check the source for the page you can see what classes are assigned to the object you want to apply css to.
In your case you find: <img src="http://www.lostmonkey.dk/files/images/DSC_2826_opt.jpg" alt="Double" title="Double" class="image preview" width="750" height="333" />
As I am sure you have noticed you sometimes have to overwrite an already existing selector by assigning the css the same way it is done in the module's css file (if it has one).

Hope this helps.

nevets’s picture

nevets commented

Both image and preview are CSS classes for the same element, so you can use one or the other but not both. (img.image.preview would look for an img tag with or followed by an element with class image followed by an element (tag) with class preview).

nevets’s picture

nevets commented

The CSS does not validate so it is hard to be specific, but you have a lot of rules that look like ; height: 50px which should be height: 50px;

Also at least in 4.7 the rule would be img .preview

sol77’s picture

sol77 commented

I am pretty sure 'img .preview' means any tags with the .preview class within img-tags and 'img.preview' means any img-tag with the .preview class. So there should not be a space in the selector.

nevets’s picture

nevets commented

img.preview and img .preview should work the same.

sol77’s picture

sol77 commented

I played around with it just to be sure before answering and now I am certain.
CSS is whitespace sensitive. img.preview is not the same thing as img .preview, adding even more whitespace has no affect though. So what I said before stands true.

'img .preview' means any tags with the .preview class within img-tags and 'img.preview' means any img tag with the .preview class

It is called contextual selectors and it applies to all kinds of selectors in whatever combination. To my surprise it even works like this with pseudo classes. So you can write p :hover and you will get the hover effect on objects within p tags. Pretty cool.

Also, you can add two class selectors to a tag selector like img.image.preview and it will mean all img tags that have both the image and the preview classes. div .image.preview would work as well.

Btw, I should mention that I only tested this with firefox. But from reading some websites as well it seems like it is supposed to work like this. This was a good site: Contextual Selectors. It had some information about sibling selectors that I had no idea existed so it was a good evening for me. :)

Download my testsite to quickly try it out yourself: css-experiment.

Cheers.

mirko’s picture

mirko commented

I just added this:

img {
     border:1px solid #000;
}

to the style.css file and it seemed to work fine. But this might add borders to other images as well, so you'll have to give a more specific selector.

druppie-1’s picture

druppie-1 commented

I added in the style.css the following and it seems to work...

.preview {
margin: 1em 0em 1em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: 15px solid #abc;
}

Hope this will help...

nevets’s picture

nevets commented

While this will work it may also style previewed nodes which also use 'preview' as a class.

druppie-1’s picture

druppie-1 commented

Thank you for the tip!
I changed the header in .image.preview
now it doesn't affect the nodes preview class anymore.

Lostmonkey’s picture

Lostmonkey commented

Thank you very much for the help everyone.

:-) Mikkel