I will have a look at this as soon as I return home from my travels. I believe the solution will require a custom style template and possibly a custom markup template as well.
If you are using a custom style and/or markup template, could you post your source text here so I can replicate your application as closely as possible? Thanks.
Thread Starter
Krystof
(@krystof-stulc)
Sorry, I didn’t realize you are travelling. I wouldn’t have bothered you with this knowing that. This can wait. It’s just a minor styling thing.
I use the custom styling and markup mainly because of the styling of the captions.
This is my styling:
<style type=''text/css''>
#[+selector+] {
margin: auto;
width: 100%;
}
#[+selector+] .gallery-item {
position:relative;
z-index:1;
float: [+float+];
margin: [+margin+];
text-align: left;
width: [+itemwidth+];
}
#[+selector+] .gallery-item .gallery-icon img {
border: 0px solid #222222;
border-bottom: 0px solid #222222;
}
#[+selector+] .gallery-caption {
/*captions in the image*/
display:block;
position:absolute;
bottom:12px;
left:5px;
z-index:2;
}
#[+selector+] .gallery-caption-under {
/*captions under image*/
/*text-align: justify;*/
}
/* styling of the captions has to be for some reason in the template stylesheet*/
</style>
And this is my markup
Open:
<div id='[+selector+]' class='gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]'>
Row Open:
<!-- row-open -->
Item:
<[+itemtag+] class='gallery-item'>
<[+icontag+] class='gallery-icon [+orientation+]'>
[+link+]
<[+captiontag+] class='gallery-caption-under'>
<div style="margin-bottom:5px;"> <strong>[+title+]</strong></div>
<div> [+caption+]</div>
<div style="height:1px; background-color:#EBEBEB; margin-top:15px;"></div>
</[+captiontag+]>
</[+icontag+]>
</[+itemtag+]>
Row Close:
<br style="clear: both" />
Close:
</div>
But as I mentioned above, this is just a minor design thing, so it is not worth spending too much time on it, if it is complicated. I was just wondering, if there is perhaps some hidden parametr like”column-gap” or so..
Thread Starter
Krystof
(@krystof-stulc)
I’m using this styling template:
<style type=''text/css''>
#[+selector+] {
margin: auto;
width: 100%;
}
#[+selector+] .gallery-item {
position:relative;
z-index:1;
float: [+float+];
margin: [+margin+];
text-align: left;
width: [+itemwidth+];
}
#[+selector+] .gallery-item .gallery-icon img {
border: 0px solid #222222;
border-bottom: 0px solid #222222;
}
#[+selector+] .gallery-caption {
/*captions IN the image*/
display:block;
position:absolute;
bottom:12px;
left:5px;
z-index:2;
}
#[+selector+] .gallery-caption-under {
/*captions under the image*/
/*text-align: justify;*/
}
/* styling of the captions has to be for some reason in the template stylesheet*/
</style>
and this for the markup
Open:
<div id='[+selector+]' class='gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]'>
Row Open:
<!-- row-open -->
Item:
<[+itemtag+] class='gallery-item'>
<[+icontag+] class='gallery-icon [+orientation+]'>
[+link+]
<[+captiontag+] class='gallery-caption-under'>
<div style="margin-bottom:5px;"> <strong>[+title+]</strong></div>
<div> [+caption+]</div>
<div style="height:1px; background-color:#EBEBEB; margin-top:15px;"></div>
</[+captiontag+]>
</[+icontag+]>
</[+itemtag+]>
Row Close:
<br style="clear: both" />
Close:
</div>
Thanks for your updates and for posting the source text of your style and markup templates. I copied your style template into my development/test system and ran a few experiments.
You can make any CSS changes you like in the style template and they will be reflected in the gallery display. For example, I made this change to decrease the margin/gap between the gallery items:
#[+selector+] .gallery-item {
position: relative;
z-index: 1;
float: [+float+];
/* margin: [+margin+]; */
margin: [+margin+] 0.5%;
text-align: left;
width: [+itemwidth+];
}
Parameters like mla_margin simply provide values you can use in your template, e.g., the [+margin+] substitution parameter. In the above example I used it to set the top and bottom margins and I set the left and right margins to 0.5% explicitly. You can substitute any margin: attribute that your application requires.
I hope this is what you meant by “Only the gap, and nothing else.” In any case, the solution is similar. You can use the style template to apply any CSS styles you need to any part of your gallery display.
I am marking this topic resolved, but please update it if you have problems or further questions regarding the use of custom style templates to format your [mla_gallery] display. Thanks for your patience during my travels and for your continued interest in the plugin.
