Custom CSS for Individual Galleries

Robo Gallery allows you to apply custom CSS styles to a specific gallery. This is useful when you want to customize the appearance of a single gallery without affecting others.

You can modify:

• spacing between images
• hover effects
• borders and shadows
• typography
• layout adjustments

Adding Custom CSS to a Specific Gallery#

Each gallery includes a Custom CSS field where you can apply styles that affect only that gallery.

Inside this field you can write CSS rules targeting the gallery.

Example selector:

.robogallery-gallery-9 { }

The number in the selector corresponds to the gallery ID, ensuring that the CSS only affects that specific gallery.

Global Custom CSS and JavaScript#

If you want to apply styles to all galleries, you can use the Global Custom CSS / JS settings.

Navigate to:

Robo Gallery → Settings → Custom JS/CSS

There you can:

• include custom CSS files
• include custom JavaScript files

Example CSS file path:

wp-content/plugins/robo-gallery/css/custom.css

Example JavaScript file path:

wp-content/plugins/robo-gallery/js/custom.js

When to Use Custom CSS#

Custom CSS is useful when you want to:

• match the gallery design to your theme
• modify hover styles
• adjust spacing or alignment
• change typography
• apply advanced visual customization

Best Practice#

Use gallery-specific CSS when customizing a single gallery, and global CSS files when applying styles across multiple galleries.

This keeps your styles organized and prevents unwanted changes across your site.