The default CSS settings in Slickr Flickr galleries work fine on a normally sized site with a white background.
But did you know you do have the ability to alter fonts, sizes, styles, margin and paddings by amending the stylesheet elements?
The default style is defined in a CSS file, slickr-flickr.css, and is located in the Slickr Flickr plugin directory. Please note that if you change this you are doing so at your own risk. However that risk is quite small as if things get messed up you can always just reinstall the Slickr Flickr plugin to get back the original settings. This file gets updated every time you update the plugin so it is not the best place to make changes; it is better to put your Slickr Flickr CSS overrides in the same place you put your theme overrides – which may be in a custom.css file or the style.css of a child theme.
Let’s look at an example of customizing the Slickr Flickr Gallery hightlight color.
It’s likely you might want to modify is the highlight color when the visitor moves their cursor over a thumbnail in the Flickr gallery
If you look in slickr-flickr.css you will see that the line that sets the highlight color is:
[css]
.slickr-flickr-gallery ul a:hover img { background-color: brown;}
[/css]
So if you wanted a blue highlight color in the content area (assuming your theme had a container element with id=”content”) you would add the following line to your style.css file:
[css]
#content .slickr-flickr-gallery ul a:hover img { background-color: blue;}
[/css]
Note that the reason that the theme’s CSS setting overrides the default plugin setting is because it is more specific – it contains the #content at the beginning. Note that not every theme contains a element called “content”; it might be called “page” or “container” or something similar – you just have to view the source of a page and pick the correct CSS element.
If you are using the Thesis theme then it is slightly different; both in terms of the file you edit and also in the CSS itself.
For Thesis Theme Users Only
If you are running the Thesis theme then put your customizations in custom.css.
For example to modify the highlight color to blue when you hover over a thumbnail in the Flickr Gallery, use:
[css]
.custom .slickr-flickr-gallery ul a:hover img { background-color: blue };
[/css]
Remember to include the .custom at the beginning of the line.
Also Thesis allows you to get even more specific so if you want to customize a particular gallery on a specific page to have a green highlight color then Thesis lets you do this.
So, if the page has a URL of my-example then the CSS is
[css]
.custom .my-example .slickr-flickr-gallery ul a:hover img { background-color: green};
[/css]
The reason this works is that Thesis put the “custom” class on the body element of all its pages.
If you want to find out more about Thesis then check out Ten Reasons To Use the WordPress Thesis Theme
For Hybrid Theme Users Only
The free theme I recommend using is Justin Tadlock’s Hybrid theme which is good for SEO and very extensible. With Hybrid you will have a child theme for your site and you will add the override to the style.css file that is located in the child theme folder.
[css]
.page-template .slickr-flickr-gallery ul a:hover img { background-color: green};
[/css]
Even though Hybrid is free, it makes sense to sign up to Justin’s Hybrid support membership site which $25 per year and gives you access to lots of great information to help you be successful with Hybrid.
Leave a Reply