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"]
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);
}
Posted in DM Albums, Usage | 8 Comments »
8 Responses to “DM Albums™ Customization”
