Posted on by researchwizard

Some animated gif for Opera Desktop

When I found the possibility to add own icons to the tags in this blog I played around with this. I looked for something nice, found cool stuff from SerbianFighter and added the dear Opera animated gif for the tag "Opera" from WhyOpera.

Then I wanted to have something different for "Opera Desktop" and found the idea from SerbianFigher appealing to have some of the main additional features visible in the icon – but I missed the red "O" in it so I changed the magnifying glass looking more like Opera – and added some blue to the world:
When uploading it to the Tags Properties it didn't look good at all, because it had been resized to 48x48px 🙁

I started completely new with the nice looking Opera Widget clock, the official RSS Feed Icon and some icons from Opera Standard Skin and made things more compact. This time I finished with a pretty nice animated Opera-gif. But it is still too big for the tag. The icons looked unrecognisable at 48x48px.

So I rearranged things and I created this a little bit different animation.

I think the two icons are pretty nice for my first animated gifs 😎

Created with Gimp

Edit:
Pictures in this blog which are right or left are not shown in my Firerfox1.503/WinXP SP2 (works fine in Opera8.54+9w + IE6) – CSS validates and images are loaded and I couldn't find the fault in the source (I didn't search very long, looked pretty straight). Maybe it is a bug in Firefox?

Edit:
I just realized that I didn't tell you how to add own icons to the tags:
click Preferences on the top of your my.opera page, there Tags is the last right option (at least with my layout, maybe this is different somwhere else). There you can edit your tags – and add icons = images, which are displayed instead of the tag text (which are restricted / resized to max 48x48px).
Sorry for the confusion gabydewilde.

4 Replies to “Some animated gif for Opera Desktop”

  1. Not sure what you’ve done wrong, 😛 I’ve just tested it and teh below works with GIF to.css background images by hrefa:link[href=”http://my.opera.com/gabydewilde/blog/show.dml/299972″], a:visited[href=”http://my.opera.com/gabydewilde/blog/show.dml/299972″] {background-repeat:no-repeat;background-color:#0000ee; background-image:url(‘http://my.opera.com/gabydewilde/homes/blog/GoogleToolBar.jpg’);display:block;width:180px;height:120px;color:#fff; padding:0px;text-indent:-200px;}[/code]You run a great wiki btw. 🙂

  2. Not sure what you want to explain. Cannot find the connection of your html and my post.Is it about Firefox not showing right or left aligned pictures? This is about the blog-options to insert pictures (BBCode):[IMGLEFT=http://img521.imageshack.us/img521/3057/operatest31lf.jpg]The from this BBCode in this blog generated HTML is still not showing the pictures in Firefox.Your HTML doesn’t work in this blog (well, I could put the style information into the custom style sheet and the HTML in the blog which would probably work). And by the way: IE6 is not able to display your code, because of the [attribute-selectors]. I just wanted to use the Blog options. It is no problem to include pictures in a normal webpage with normal (x)html / css.And what wiki you are writing about – this blog? (it’s not a wiki, so I’m confused)Edit: Just found your post about css tag imagingThis is much easier than to rebuild the code produced by the blog: click preferences on the top of your my.opera page, there Tags is the last right option (at least with my layout, maybe this is different somwhere else). There you can edit your tags – and add icons = images, which are displayed instead of the tag text 🙂 (which are restricted / resized to max 48x48px).Another hint: the html/css-code delivered to IE is probably different than what you see as sourcecode for the blog-pages in Opera and Firefox.

  3. IE, FF and Opera have different capabilities for CSS. This differences are even used as CSS-Hacks to have certain CSS applied only in certain browsers. But there are also other ways to make a page look different (or correct) in several browsers like conditional comments (IE) and server side browser detection and dynamic browser dependand delivery of HTML and CSS.

  4. My PC froze when I wanted to repost my comment. (the wiki part didn’t belong with it)Not sure what you want to explain. Cannot find the connection of your HTML and my post.I didn’t know that about the tag images. 😆 Thats why it looked so strange.I was just playing with css and thought tag images would be an interesting feature to create. One could color code the different subjects to. What I found most interesting about the css method is that it works for inline tags and links to other blogpostings.For example color all Opera related tags with a red outline. In the menu and in the posting.Your HTML doesn’t work in this blog (well, I could put the style information into the custom style sheet and the HTML in the blog which would probably work).I just added the extra tags so you could play with it. :)And by the way: IE6 is not able to display your code, because of the [attribute-selectors]. yeah, thats what I thought. But if you look at the end of my blog you see various banners, those are links with their own css background image.I cant figure out why some show up while others don’t. Firefox only displays one, IE6-7 displays 2 of them and Opera shows all 3. I don’t see that much difference in the css. I was under the impression this css was a copy of that banner that worked. :confused: But it doesn’t in IE now.I need to investigate it a bit more. I’m sure there is a good explanation.

Leave a Reply