• myFAV.ES
  • Help Center
  • Tutorials
  • Extensions
  • Blogs

  

  • Logos
  • Logo Requests
  • Themes
  • Backgrounds
  • Forums
  • Contact
Home » Blogs » My blog » 11032008 » Identify Transparent Logos Easier on UL - Stylish

Identify Transparent Logos Easier on UL - Stylish

gumanov —Mon, 11/03/2008 - 23:35

I have figured out a very simple way to identify transparent logos much easier!

In all modern graphics software, transparency is visible because of the use of a checkerboard pattern.

I used this concept to create a Stylish style for the site, to mimic this behavior.

I am planning to make this a permanent change on the site soon, but i dont have access to the css files at the moment.

SCREENSHOTS: (BEFORE vs AFTER - click to enlarge)
Photobucket Photobucket

Stylish Code:

.node .content .field-type-image img {
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}

Enjoy!

  • transparent
  • userlogos
  • gumanov's blog
  • Log in or register to post comments or vote.
  • +3
  • 5 votes

Comments

Mafia_Penguin's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by Mafia_Penguin on Tue, 11/04/2008 - 01:35

... wow.
It's great.

-----------------------------------------


  • log in or register to post comments
gumanov's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by gumanov on Tue, 11/04/2008 - 01:39

thanks.
i have been using it for a while now, never had time to post about it.

next time telega gets on, i will ask him to update the sites' css with this modification

  • log in or register to post comments
sjdvda's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by sjdvda on Tue, 11/04/2008 - 05:16

Thanks mafi0z!!!!

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Tue, 11/04/2008 - 08:11

@mafi0z

Thanks for your post.
Good idea.

---

next time telega gets on, i will ask him to update the sites' css with this modification

mmmmm,,,
If you do that there will be no way anymore of seeing properly the original logos.

Please see below

------------------------------------------------------------------------------------

Have to admit I rather prefer a hover Version of your Style.

This is the code.

Please try.

Enables one then to see the original logo as well as being able to confirm transparency on hover with checkerboard.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("userlogos.org") {

}

.node .content .field-type-image img:hover

{
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}

---

Original Logo on UL viewed on my setup - no hover (see cursor)
Screenshot_-_04_11_2008_,_12_52_28.png - Picamatic - upload your images

Logo on UL viewed on my setup - on hover (see cursor)

Screenshot_-_04_11_2008_,_12_52_43.png - Picamatic - upload your images

best of both worlds ??

-------

  • log in or register to post comments
sjdvda's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by sjdvda on Tue, 11/04/2008 - 13:23

@chiaroscuro

Great Idea!!!!

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Tue, 11/04/2008 - 13:28

@sjdvda

Great Idea!!!!

Glad you liked it. :-)

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Tue, 11/04/2008 - 14:02

@mafi0z

One could of course have an entirely different approach.

Say a user always has a black or very dark background in Fast Dial.

He is possibly used to viewing all white pages on web pages as white.

Maybe it would be more useful for such a person to be able to see the effect on a transparent logo of having a black background, rather than simply seeing a checkerboard

So on hover the transparent background goes black
see below

If the background has a different dominant tone the color in the code could of course be altered, or even by the industrious a background image inserted instead.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("userlogos.org") {

}

.node .content .field-type-image img:hover

{
background: black !important;
}

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Tue, 11/04/2008 - 14:09

@mafi0z

There is also this rather interesting Style on Userstyles
Firefox View Image Page - Checkerboard Background

So right click on any logo, and then "view image", and you can see with your checkerboard if the logo is transparent or not.

  • log in or register to post comments
gumanov's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by gumanov on Tue, 11/04/2008 - 14:10

hmm , thanks for that idea chiaroscuro!!
if i make it a permanent part of the site css, i will use the hover code that you provided.

as for the black background on hover, we can have that style posted somewhere on the site, and those who choose to use it can use any color or background.

what do u think?

  • log in or register to post comments
gumanov's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by gumanov on Tue, 11/04/2008 - 14:14

thanks for the great link, i will be using that style now - i liked it!

but i think it would be best if users can see the checkerboard either all the time, or on hover.
not many users right click > view image on the logos

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Tue, 11/04/2008 - 14:19

@mafi0z

hmm , thanks for that idea chiaroscuro!!
if i make it a permanent part of the site css, i will use the hover code that you provided.

Great
Fine
Thanks

as for the black background on hover, we can have that style posted somewhere on the site, and those who choose to use it can use any color or background.

what do u think?

Yes
Fine
Good idea

---

I think both the checkerboard hover and the black hover work fine in isolation.

But we need to find a way that they do not conflict.

That is why I pointed out the view image style as it would not conflict with a hover.

Do you follow me.

Needs working out.

  • log in or register to post comments
gumanov's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by gumanov on Tue, 11/04/2008 - 14:32

hmm, sorry i do not understand

what i meant was by default on the site, we could have checkerboard on hover.

but we can provide the style to users if they dont like the checkerboard, and instead want to use a color on hover, such as black.

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Tue, 11/04/2008 - 15:28

what i meant was by default on the site, we could have checkerboard on hover.

but we can provide the style to users if they dont like the checkerboard, and instead want to use a color on hover, such as black.

OK fine
Yes I understand
We can troubleshoot all this when telega returns

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Tue, 11/04/2008 - 16:55

@mafi0z

thanks for the great link, i will be using that style now - i liked it!

but i think it would be best if users can see the checkerboard either all the time, or on hover.
not many users right click > view image on the logos

Sure.
It was just for your interest
I'm glad you liked it
I agree
---
Unusual idea though
Very discreet.
Can be used on any web site and the original image remains unaltered on the page.

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Wed, 11/05/2008 - 08:09

@mafi0z

Mmmm
Refreshed a logo on FD and got this: :-(

Screenshot_-_05_11_2008_,_13_09_35.png - upload images with Picamatic

Rather disappointing.
Seems this happens if a cell is refreshed when
Firefox View Image Page - Checkerboard Background
is running in Stylish.

Needs checking out.

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Wed, 11/05/2008 - 08:57

@mafi0z

Modified Version

---

This Style will give a black (or any other colour) background to all transparent logos on UL.

On hover however it will give checkerboard.

---

This will allow the user to see all the Logos on UL displayed in the most suitable background colour for transparent logos for his/her setup, as well as allowing the user to check for transparency when necessary

/*
* Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("userlogos.org") {

}

.node .content .field-type-image img

{
background: black !important;
}

.node .content .field-type-image img:hover

{
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}

  • log in or register to post comments
macleod.mac's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by macleod.mac on Sat, 11/15/2008 - 07:09

Just found this

+1

--

macleod.mac

~macleod.mac Click Here to Request a Logo / Just ask if you want one of my source PNGs
  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Sat, 11/15/2008 - 07:20

@macleod.mac

Just found this

Are you referring to Mafi0z post or to a particular style ?

  • log in or register to post comments
macleod.mac's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by macleod.mac on Sat, 11/15/2008 - 07:35

The original style Mafi0z Posted

But I think your styles are awesome too.

--

macleod.mac

~macleod.mac Click Here to Request a Logo / Just ask if you want one of my source PNGs
  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Sat, 11/15/2008 - 07:43

The original style Mafi0z Posted

But I think your styles are awesome too.

---

OK
I see
Thanks

But in a sense all the Styles posted are variations on Mafi0z original theme.
Did you play around with them in Stylish ?

  • log in or register to post comments
macleod.mac's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by macleod.mac on Fri, 12/05/2008 - 08:54

/*
* Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("userlogos.org") {

}

.node .content .field-type-image img

{
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}

.node .content .field-type-image img:hover

{
background: black !important;
}

Just a simple edit for my personal use, so it shows checkerboard normally, then black on mouseover, as I find this useful when looking at white logos on transparent backgrounds.
--

macleod.mac

~macleod.mac Click Here to Request a Logo / Just ask if you want one of my source PNGs
  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Fri, 12/05/2008 - 13:04

@macleod.mac

Great.

Good thing about Stylish is each can make his own Style. :-)

  • log in or register to post comments
Mafia_Penguin's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by Mafia_Penguin on Wed, 12/17/2008 - 15:57

I think it would be best to have a dark link, like this:

---------
Please exchange this coupon for one (1) free internet.

Trouble using transparent Logos? Click
here
for help!


  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Wed, 12/17/2008 - 16:17

Mafia_Penguin

I think it would be best to have a dark link, like this:

Good idea

  • log in or register to post comments
Mafia_Penguin's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by Mafia_Penguin on Wed, 12/17/2008 - 16:19

Good idea
I've been using that pic for quite a while now...
I just forgot to post the link to it.
---------
Please exchange this coupon for one (1) free internet.

Trouble using transparent Logos? Click
here
for help!


  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Wed, 12/17/2008 - 16:21

I've been using that pic for quite a while now...
I just forgot to post the link to it.

Perfect

Great improvement

Thanks

edit
I have posted on userlogos here

/*
* Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("userlogos.org") {

}

.node .content .field-type-image img

{
background: #212121 !important;
}

.node .content .field-type-image img:hover

{
background: #eee url('http://www.picamatic.com/show/2009/04/16/10/20/3280958_16x16.png') 0 0 repeat !important;
}

  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Wed, 12/17/2008 - 16:29

Much much better !

Have included in Style in Extensions/FD Styles

Screenshot_-_17_12_2008_,_22_54_11.png - Picamatic - upload your images

  • log in or register to post comments
Mafia_Penguin's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by Mafia_Penguin on Wed, 12/17/2008 - 17:03

That bg is the default color for Gimp.
I use it with the default UL color on nonmouseover.
---------
Please exchange this coupon for one (1) free internet.

Trouble using transparent Logos? Click
here
for help!


  • log in or register to post comments
chiaroscuro's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by chiaroscuro on Wed, 12/17/2008 - 17:34

That bg is the default color for Gimp.


You made my day with this.
It is much more subtle and less invasive.

Can't get over the difference it makes.

Thanks for this :=)

I use it with the default UL color on nonmouseover.

Don't you miss some reflectons ?

  • log in or register to post comments
Mafia_Penguin's picture

Re: Identify Transparent Logos Easier on UL - Stylish

Submitted by Mafia_Penguin on Thu, 12/18/2008 - 02:51


I was thinking that a dark/light comparison would be best...
But on your setup, I can see why you would like a dark/really dark comparison.
---------
Please exchange this coupon for one (1) free internet.

Trouble using transparent Logos? Click
here
for help!


  • log in or register to post comments

Pages

  • 1
  • 2
  • next ›
  • last »

Search logos

Search site

Navigation

  • Blogs
  • Forums
  • Online users
  • Recent content

User login

  • Create new account
  • Request new password
 
  • Changelog
  • Latest releases
  • Important links
 
 
  • Changelog
  • Latest releases
  • Important links
  • Support Forum
 

Top Rated

  • google.com
  • youtube.com
  • fast dial folder
  • wikipedia.org
  • Firefox Black
  • fd folders, folders, folder
  • generic gaming logos
  • mail.google.com, gmail.com, googlemail.com
  • Carbon Fiber
  • iphone app style icon template
more

Recent Polls

  • What are you resolution of screen use
  • Which version of Fast Dial do you run?
  • How often do you visit Userlogos?
  • Which FD iPhone logo format do you find preferable
  • How many themes do you run in Fast Dial ?
more

Online users

There are currently 3 users online.
Active - 15 mins:
hammadamir90 (1 min ago)
sijiv31759 (2 min ago)
wakawaka (11 min ago)
  • Last 24 hours

Recent comments

  • Founded with a passion for
    by: hammadamir90
    1 min 23 sec ago
  • room
    by: sijiv31759
    2 min 4 sec ago
  • Founded with a passion for
    by: hammadamir90
    10 min 37 sec ago
  • ADDDDD
    by: wakawaka
    11 min 1 sec ago
  • ADDDDD
    by: wakawaka
    14 min 48 sec ago
  • ADDDDD
    by: wakawaka
    20 min 27 sec ago
  • Located at 3253 Rolling Oaks
    by: hammadamir90
    23 min 23 sec ago
  • Very good written article. It
    by: wakawaka
    24 min 44 sec ago
more

Recent topics

  • Expert Tips on Maintaining Your Roof in Erie PA
  • Asahi Refining & Geiger Edelmetalle: Trusted Names in Silver Refining
  • Understanding Roof Warranties with Erie PA Experts
  • Wrapped in Softness: Understanding the Value of Good Baby Clothes
  • Explore Japan: Travel Tips, Culture, and Must-See Destinations
  • I've never seen anything like it before!
  • Best Time of Year for Exterior Painting in Pittsburgh
  • Investing in the 2025 Are You a Good Fit for This 1 Oz Silver Philharmonic Coin Tube (20 Pieces)?
more

Top contributors

User Total user points
jimmy1024 992
Mafia_Penguin 912
Deva 552
gumanov 490
jumpordie 471
Karmody 457
macleod.mac 402
ingalls 354
spaljeni 310
zigzag 290
Rog 265
Sastre 256
famecky 160
x-b 152
danger83 147
more

2008-2017 userlogos.org. All logos/images belong to their respective owners. Contact administrator.

  • Logos
  • Logo Requests
  • Themes
  • Backgrounds
  • Forums
  • Contact