Customization

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.

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.
• Blank 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 from 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.

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%; }

/* == HORIZONTAL LINE ====================== */
.rggclBB11 { border-bottom: 1px solid #e6e6e6; }
.rggclBB12 { border-bottom: 1px solid #b3b3b3; }
.rggclBB13 { border-bottom: 1px solid #808080; }
.rggclBB14 { border-bottom: 1px solid #4d4d4d; }
.rggclBB15 { border-bottom: 1px solid #1a1a1a; }

.rggclBB21 { border-bottom: 2px solid #e6e6e6; }
.rggclBB22 { border-bottom: 2px solid #b3b3b3; }
.rggclBB23 { border-bottom: 2px solid #808080; }
.rggclBB24 { border-bottom: 2px solid #4d4d4d; }
.rggclBB25 { border-bottom: 2px solid #1a1a1a; }

.rggclBB31 { border-bottom: 3px solid #e6e6e6; }
.rggclBB32 { border-bottom: 3px solid #b3b3b3; }
.rggclBB33 { border-bottom: 3px solid #808080; }
.rggclBB34 { border-bottom: 3px solid #4d4d4d; }
.rggclBB35 { border-bottom: 3px solid #1a1a1a; }