Keyword

Make thumbnails grayscale

  • Piet Carion
  • Piet Carion's Avatar Topic Author
  • Offline
  • New Member
More
12 years 10 months ago #50775 by Piet Carion
Make thumbnails grayscale was created by Piet Carion
Hi,

does somebody know how I can change the colour of the thumbnails to grayscale?
The pop-up image is full colour.
Can it be done with css?

Please Log in or Create an account to join the conversation.

More
12 years 10 months ago #50776 by Katia
Replied by Katia on topic Re: Make thumbnails grayscale
Please provide me with a link to your gallery in order to realize what you are trying to change.

Please Log in or Create an account to join the conversation.

  • Piet Carion
  • Piet Carion's Avatar Topic Author
  • Offline
  • New Member
More
12 years 10 months ago #50777 by Piet Carion
Replied by Piet Carion on topic Re: Make thumbnails grayscale
Hi Katia

here is the link:
www.testcarion.be/index.php?option=com_content&view=article&id=4&Itemid=109

I want to make the thumbnails grayscale, but all the large images full colour

thanks

Please Log in or Create an account to join the conversation.

More
12 years 10 months ago #50778 by Katia
Replied by Katia on topic Re: Make thumbnails grayscale
The border of the thumbs' background can be found in this file: plugins/content/jw_sigpro/jw_sigpro/tmpl/Classic/css/template.css and can by modified by changing border and padding of this element:
ul.sigProClassic li.sigProThumb span.sigProLinkWrapper {
    border: 1px solid #cccccc;
    display: block;
    float: left;
    margin: -5px 0 0 -5px;
    padding: 4px;
}

Please Log in or Create an account to join the conversation.

  • Piet Carion
  • Piet Carion's Avatar Topic Author
  • Offline
  • New Member
More
12 years 10 months ago #50779 by Piet Carion
Replied by Piet Carion on topic Re: Make thumbnails grayscale
Hi,

I found a very easy solution:
simply add this to your css using:

.sigProLink {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'www.w3.org/2000/svg\'>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */}

I found it here:
www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

Please Log in or Create an account to join the conversation.

More
12 years 10 months ago #50780 by Katia
Replied by Katia on topic Re: Make thumbnails grayscale
Ignore my previous answer please. I thought you were referring to the borders of the thumbs.

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum