Styling the Really Simple Gallery Widget

The Really Simple Gallery Widget has some very light CSS selectors in the HTML for you to apply your styles to. They amount to this: there is an outer div with the class “rsgallery”, each image is given a class of “rsg_image”, and captions are given a class of “rsg_caption”. There are no current plans attach stylesheets, but some better structure and/or options for classes may be provided in a future version.

Examples:

/* Add some space (20 pixels in this example) under each image */
.rsg_image { margin-bottom:20px; }
/* Add a border that changes when moused over
Important: don't forget that you need to add double the width of the border to the image width to get the total */
a .rsg_image { border:1px solid #00F; }
a:hover .rsg_image { border: 1px solid #F00; }
/* Create a grid of images - will not work with captions in the current version. Adjust the margins to fit in the width of the widget area - there will be leftover margin on some sides
Be careful - the floating may cause your layout to behave strangely, especially anything that follows the gallery widget */
.rsg_image { float:left; margin:0 20px 20px 0; }

To add CSS to a theme that you can’t edit, try using the the Simpler CSS plugin. Remember that if you edit a CSS file in a downloaded theme like Twenty Ten, it will probably get overwritten if you upgrade the theme in the future. Make a child theme instead.


4 comments

  1. Thank you sooooo much for this plugin, it really is just so simple!!!
    Just in case any newbies want to add styling to their gallery, you can just add this to the bottom of your theme’s style.css file:

    .rsgallery {height:180px; width:350px; margin:0 0 0px 0;}
    .rsg_image {float:left;display:inline;margin:0 10px 10px 0;border:1px dashed #888;padding:5px}
    a .rsg_image { border:1px solid #00F; }
    a:hover .rsg_image {border:1px dashed #000}

    Cheers!!

    • I’m glad to hear that it’s working for you! I like the border change from solid to dashed on hover… I’ll have to remember that one for the future :)

  2. Hi. I’m trying to figure out how to use make my thumbnails appear as a grid with your plugin, but I’m not sure I understand the instructions above? I’d like to make a grid of 3 images wide by 4 tall…

    Any ideas on how to do this?

    Thanks!

  3. Hi Helen, I love the simplicity of this plugin! I have a question that seems kind of silly but I’m trying to link the individual images to a page or external URL. Is there any way to do this? Thank you!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s