TUTORIAL WEB AND IT

Add unlimited styles to WordPress MLA Gallery

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Share on TumblrEmail this to someone

This is a very simple solution so we can have our gallery in many different style like we want. Just by adding <div> with "class" or "id" in front of shortcode we can customize more of Media Library Assistant in WordPress with our own style just using CSS.

But we must add that DIV in text-mode post editor, not in Visual editor. it won't work if you put that DIV in Visual mode because wordpress will translate the code to other character so it won't work as code anymore.

You can set the CSS itself using Custom CSS editor or in stylesheet of your theme.

I am also using Zero Column plugins which set the gallery not by the column number but the width of the thumbnail itself, or the width of attachment thumbnail you set. so it can fill any size of your site content. and work much better with responsive themes.

[merch-ad-disabled][DISCOUNTAD-disable]

 

Here are the sample of Customizing MLA Galleries using Div Class and CSS.

- ZERO COLUMN GALLERY DEFAULT

<div class="zero-column-gal">
[mla_gallery attachment_category='design' orderby=rand mla_alt_shortcode=gallery slide_size=thumbnail numberposts=6 columns=0]
</div>

 

 


- ZERO COLUMN GALLERY
- THUMBNAIL SIZE 200
- ROTATING LABEL

 

 

By default the size of thumbnail I set for this theme is 220px x 220px. So in this zero column gallery that size is in use.
I created only two size of thumbnail for this site, 220px X 220px (thumbnail), and 80px X 80px (thumbnail-80). and for the "post-thumbnail" size I set it the same as "thumbnail" 220px size so it would save space by not making new size.

By having 220px size, I can resize-down the thumbnail for the gallery use without too much bandwidth needs. and next size is thumbnail-80, which is 80px square size. This size if for the lightest needs, because 220 size is to much much 80px resized thumbnails.

In Post / MLA Gallery Shortcode

<div class="zero-column-gal gal-thumb-200 gal-label-rotating">
[mla_gallery attachment_category='design' orderby=rand mla_alt_shortcode=gallery style=strip-below slide_size=thumbnail numberposts=6 columns=0]</div><div class="zero-column-gal gal-thumb-200 gal-label-rotating">
</div>

 

in CSS Stylesheet

/* MLA GALLERY SIZE 200px */
.gal-thumb-200 dt,
.gal-thumb-200 .gallery-caption,
.gal-thumb-200 .gallery-item,
.gal-thumb-200 .gallery a img {
     width: 200px !important;
     height: 200px !important;
}
.gal-thumb-200 .gallery-item {
     margin: 6px !important;
}
 
/* MLA GALLERY LABEL ROTATING */
.gal-label-rotating dt,
.gal-label-rotating .gallery-item,
.gal-label-rotating .gallery-caption,
.gal-label-rotating .gallery a img,
.gal-label-up dt,
.gal-label-up .gallery-item,
.gal-label-up .gallery-caption,
.gal-label-up .gallery a img {
    width: 189px !important;
    height: 189PX !important;
}
.gal-label-rotating .gallery-item,
.gal-label-up .gallery-item {
    margin: 7.5px !important;
}
 

 

 


- ZERO COLUMN GALLERY
- THUMBNAIL SIZE 150
- ROTATING LABEL

 

<div class="zero-column-gal gal-thumb-150 gal-label-rotating">
[mla_gallery attachment_category='design' orderby=rand mla_alt_shortcode=gallery style=strip-below slide_size=thumbnail numberposts=12 columns=0]
</div>

 

 

 


- ZERO COLUMN GALLERY
- THUMBNAIL SIZE 80
- ROTATING LABEL

 

<div class="zero-column-gal gal-thumb-80 gal-label-rotating">

[mla_gallery attachment_category='design' orderby=rand mla_alt_shortcode=gallery style=strip-below slide_size=thumbnail-80 numberposts=20 columns=0]
</div>

 

 

 


- ZERO COLUMN GALLERY
- THUMBNAIL SIZE 150
- LABEL SLIDE UP

 

<div class="zero-column-gal gal-thumb-150 gal-label-up">
[mla_gallery attachment_category='design' orderby=rand mla_alt_shortcode=gallery style=strip-below slide_size=thumbnail numberposts=10 columns=0]
</div>

Related posts:

Downloadable Designs...

Leave a Reply

Your email address will not be published. Required fields are marked *