Acidfree album has large greay boxes around images
dforce - October 21, 2005 - 05:00
I have installed the Acidfree module and managed to get it all running. I don't understand why when looking at the album, it has large gray boxes around each one of the images - seems like a lot of wasted space. Is there a way to turn this off?
You can see an example of the behavior here: http://www.look-up.com/avimages
Thanks!
df
i think this is intentional
You should be able to edit the acidfree.css file in the /modules/acidfree/ directory change the boxes' color or probably get rid of them altogether. I think the idea behind having square boxes around the images is that it looks better when the pictures are not all the same height and width.
The large grey boxes
The large grey boxes around each image is supposed to look like a slide. But you can do whatever you want with them by changing the CSS. It is just a div around the image, so that both the div and the image have a border. I like the look, which is why I wrote the code that way. :)
If you have a better looking default theme, I am open to patches.
hardcoded styles
I'm trying to remove the grey slide border around Acidfree 4.6 images, but it look as though some stylesheet styles are hardcoded into the module. If turn off the acidfree.css stylesheet entirely, there's still a 180px width on my images--which messes up captions. Looking at the code, these widths are inline, not in the acidfree stylesheet.
Can we move these styles into the stylesheet so there's no need for hacking the module if we don't want a slide border (or any border at all)?
Thanks.
I opened an issue for this problem here: http://drupal.org/node/66025
-Peter
--
http://www.grownwithoutschooling.com
Solved
Problem solved. You can override an inline style with the !important declaration:
http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules
Which line in the css
Which line in the css affects these borders? I've tinkered with most of the likely ones and it doesn't seem to affect the borders.
Override CSS... perhaps borders due to TABLE
To hide the Acidfree album borders, I placed this code at the very end of acidfree.css:
#acidfree-main tbody
#acidfree-main .none,
#acidfree-main .folder {
border-width: 0;
}
Later, I realized that those borders were caused by TABLE styles in style.css. Since, I don't want to remove them and change my admin tables (like Watchdog), I opted for the "tableless" method. I wrapped the thumbnails with DIVs and styled them with
float:left.I learned this "tableless" method from an excellent source: www.alistapart.com/articles/practicalcss/
Seems to work: www.adastra.ca/travel/bostwana_05
--------------------------------------------------------------------
AdAstra.ca - Optimze the Web. Optimze the World.
div.outer + img.acidfree
div.outer controls the 'full slide': the grey background and the border around it
img.acidfree controls the border around the thumb itself
play around with the settings in the acidfree.css to see what works
no need to use !important, just change the css to your liking, ex:
div.outer {
display: table-cell;
margin: auto;
padding: 0;
border: 1px solid #CCD;
background: #F3F3EF;
vertical-align: middle;
}
img.acidfree {
margin: auto;
vertical-align: middle;
border: 1px solid #DDD;
}