Thanks for your question. The best way to apply CSS styles to gallery items is to create a custom style template.
You can apply any CSS styles you like to your gallery by creating a custom style template. You can also change the HTML content with a custom markup template. You can find more information about both in the “Style and Markup Templates” section of the Settings/Media Library Assistant Documentation tab. To create the Style Template:
- Navigate to the Settings/Media Library Assistant Shortcodes tab.
- Click on the “Style” view just above the templates table.
- Hover over the “default (default)” Style entry (for the Gallery shortcode) and click the “Copy” action link.
- When the page refreshes, the “Edit Template” screen will appear.
- Change the template Name to (for example) “left-justify”.
- Make the changes you need to apply the styles you’d like.
- Scroll to the bottom and click “Update” to save your template.
Once that’s done you can add the template to your shortcode with the mla_style=left-justify parameter. Creating a custom markup template is very similar.
For your application, you can change the alignment in the .gallery-item styles or add a text-align: left; style to the .gallery-caption item. Here is an example that is working well on my system:
<style type='text/css'>
#[+selector+] {
margin: auto;
width: 100%;
}
#[+selector+] .gallery-item {
float: [+float+];
margin: [+margin+];
display: inline-block;
text-align: center;
width: [+itemwidth+];
}
#[+selector+] .gallery-item .gallery-icon img {
border: 2px solid #cfcfcf;
}
#[+selector+] .gallery-caption {
margin-left: 0;
vertical-align: top;
text-align: left;
}
/* see mla_gallery_shortcode() in media-library-assistant/includes/class-mla-shortcode-support.php */
</style>
I hope that gets you started on a solution for your application. I am marking this topic resolved, but please update it if you have problems or further questions regarding the above suggestions. Thanks for your interest in the plugin.
