Customization

WordPress Plugin – Responsive Grid Gallery with Custom Links

Grid gallery visual formatting defaults to your theme styles. Paragraphs, headers and other HTML tags will use your theme’s CSS to style the output.

For example, if your theme stylesheet has a <p> tag styled as black, 18 pixel font with top margin of 20 pixels that’s how the text entered in the <p> tag will appear on the screen.

You can easily customize the output of Responsive Grid Gallery with Custom Links plugin by:

  • Selecting one of the built-in options for fonts and margins.
  • Adding CSS class from css file included with the plugin.
  • Adding CSS class from theme’s stylesheet.
  • Creating custom stylesheet.

You can also use inline styles if you prefer to.

To customize Responsive Grid Gallery with Custom Links you need to be familiar with basic HTML and CSS. No advanced knowledge is necessary. Most of the customization involves fonts, margins and colors.

How To Add Custom Classes

  • Find the HTML element you want to modify.
  • Section containers are located under Layout tab, individual fields in the Input Fields section.
  • Go to Custom CSS Class option.
  • Empty text box indicates that the element has a default style.
  • Enter the CSS class name you would like to use in order to override the default.
  • You can use any class name form the Grid Gallery css file, your theme, or custom stylesheet.
  • Do not include leading dots!
  • You can add multiple classes. No leading dots, single space between class names.
Custom CSS Class - input field

Classes included in the plugin CSS file.

/* == ALIGMENT ============== */
.rggclTxtCenter { text-align: center; }
.rggclTxtRight { text-align: right; }
.rggclTxtLeft { text-align: right; }
.rggclMLRAuto { margin-left: auto; margin-right: auto }

/*== HYPERLINKS ===============================*/
.rggclANoUnderline a{ text-decoration: none;  padding-bottom: 0; border-bottom: none; }
.rggclAUnderline a{ padding-bottom: 2px; border-bottom: 1px solid; }

/* == WIDTH =================================*/
.rggclWidthPc100{ width: 100%; }
.rggclWidthPc90{ width: 90%; }
.rggclWidthPc80{ width: 80%; }
.rggclWidthPc70{ width: 70%; }
.rggclWidthPc60{ width: 60%; }

/*== MARGINS ==============================*/
.rggclMT0{ margin-top: 0; }
.rggclMT2{ margin-top: 2px; }
.rggclMT3{ margin-top: 3px; }
.rggclMT4{ margin-top: 4px; }
.rggclMT5{ margin-top: 5px; }
.rggclMT7{ margin-top: 7px; }
.rggclMT10{ margin-top: 10px; }
.rggclMT15{ margin-top: 15px;}
.rggclMT20{ margin-top: 20px;}
.rggclMT25{ margin-top: 25px;}
.rggclMT30{ margin-top: 30px;}
.rggclMT35{ margin-top: 35px;}
.rggclMT40{ margin-top: 40px;}
.rggclMT45{ margin-top: 45px;}
.rggclMT50{ margin-top: 50px;}

.rggclMTPc1{ margin-top: 1%; }
.rggclMTPc2{ margin-top: 2%; }
.rggclMTPc3{ margin-top: 3%; }
.rggclMTPc4{ margin-top: 4%; }
.rggclMTPc5{ margin-top: 5%; }
.rggclMTPc6{ margin-top: 6%; }
.rggclMTPc7{ margin-top: 7%; }
.rggclMTPc8{ margin-top: 8%; }
.rggclMTPc9{ margin-top: 9%; }
.rggclMTPc10{ margin-top: 10%; }

.rggclMB0{ margin-bottom: 0; }
.rggclsMB5{ margin-bottom: 5px; }
.rggclsMB10{ margin-bottom: 10px; }
.rggclMB15{ margin-bottom: 15px; }
.rggclMB20{ margin-bottom: 20px; }
.rggclMB25{ margin-bottom: 25px; }
.rggclMB30{ margin-bottom: 30px; }
.rggclMB40{ margin-bottom: 40px; }
.rggclMB50{ margin-bottom: 50px; }
.rggclMB60{ margin-bottom: 60px; }
.rggclMB70{ margin-bottom: 70px; }
.rggclMB80{ margin-bottom: 80px; }
.rggclMB90{ margin-bottom: 90px; }
.rggclMB100{ margin-bottom: 100px; }
.rggclMB200{ margin-bottom: 200px; }

.rggclMBPc1{ margin-bottom: 1%; }
.rggclMBPc2{ margin-bottom: 2%; }
.rggclMBPc3{ margin-bottom: 3%; }
.rggclMBPc4{ margin-bottom: 4%; }
.rggclMBPc5{ margin-bottom: 5%; }
.rggclMBPc6{ margin-bottom: 6%; }
.rggclMBPc7{ margin-bottom: 7%; }
.rggclMBPc8{ margin-bottom: 8%; }
.rggclMBPc9{ margin-bottom: 9%; }
.rggclMBPc10{ margin-bottom: 10%; }