DM Albums™ Customization February 14th, 2012

A few questions have come our way regarding the sizing and styling of DM Albums, which I thought I would answer here.

Sizing the Albums
As for sizing, DM Albums™ fills the area that it’s positioned in, meaning that it fills whatever space is available in the post. Some users prefer to have a fixed size that is perhaps smaller than that, or would like to have the album float to the left or right of their text. For that, we’ve added a div that surrounds the albums, which can be sized, positioned, and styled however you want. The div is assigned a css classname:

.dm-albums-galleria-container

Excellent tutorials and references on how to work with CSS can be found online, including at W3 Schools.

If you’d like to control the size of a specific album, we also have made available a height and width parameter for the DM Albums™ short tag:

[dmalbums path="/path/to/album/" width="400" height="300"]

Slideshow:
Fullscreen:

Styling the Album
As of version 3.0, the style sheet that controls DM Albums™ is located at:
dm-albums/galleria/themes/classic/galleria.classic.css

Full control over the layout is given in that style sheet. For example, to change the color of the album and thumbnails from black to white, make the following changes to the classes .galleria-container and .galler-thumbnails .galleria-image:

.galleria-container {
    position: relative;
    overflow: hidden;
    background: #FFF;
}
.galleria-thumbnails .galleria-image {
    height: 40px;
    width: 60px;
    background: #000;
    margin: 0 5px 0 0;
    border: 1px solid #FFF;
    float: left;
    cursor: pointer;
}

To change the color/opacity of the captions, you can change the background and opacity/filter properties in the .galleria-caption class:

.galleria-caption
{
	position: absolute;
	width: 100%;
	bottom: 0px;
    left: 0px !important;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    background: #000000;
    color: #dddddd;
    font: 11px helvetica,sans-serif !important;
    font-weight: normal !important;
    opacity: 0.55;
    z-index: 1;
    filter: alpha(opacity=55);
}

9 Responses to “DM Albums™ Customization”

  1. Dumitru says:

    Hey

    Using Firefox 10.0.1 the thumbnails are not being generated correctly. Ths width and height are automaticallys et to 0px although the style.css is correct. Chrome shows it correctly, Safari as well.

  2. Dumitru says:

    Same behaviour now in IE9.

  3. frank says:

    @Dumitru

    It is probably a theme issue or a conflict with a stylesheet somewhere as the plugin has been tested with all browsers and functions correctly. Can you provide a link to your site and/or list out any error messages you’re seeing?

  4. robin says:

    Can you tell me how to use this with dreamweaver 8? Where do I put the folder on my mac? What is the html and where to I put it? Hoping to hear from you very soon. Thanks.

  5. Pawel says:

    Problem with thumbs in Firefox – testing page is located here: http://www.cialbud.pl/new/?page_id=5

    width and height of thumbs are set to 0

  6. Maxi says:

    I can’t get captions to show up. I tried editing style sheet to no avail.

    http://340boxing.com/340-boxing-champs-tapped-for-martinez-training-camp/

    Thamks!

  7. test says:

    To show the thumbnail scroller, please refer the following url. It’s a CSS conflict.
    http://wordpress.org/support/topic/plugin-dm-albums-slideshow-control-does-not-show-in-firefox

  8. frank says:

    @test
    This has been fixed in 3.1.8. Thanks!

  9. Cyril says:

    Wat mins DM Albums Management panel requred, this is a plagin or wat ???.

Leave a Comment