Make your site shine in Speed Dial

Make your site shine in Speed Dial

This article covers the new Opera Speed Dial enhancements, including using custom icons and CSS, view-mode, and the X-Purpose header.

( Read the article )

Why is X-Purpose prefixed with X- and Preview-Refresh not? Is there an RFC for Preview-Refresh?

is there any possibility to get the view-mode via javascript? i've now searched quite for a while, but found nothing.

Is it possible to override an external site's css or icon to create your own? I can think of ways to enhance just about every speed dial I have, but I'd rather not wait to see if the owners implement it themselves (though I hope they do!)

Also, I have Flickr in my speed dials and it has an link with "apple-touch-icon" set, this doesn't look very good in the speed dial window though, so it would be great if we could override it...


PS (When I first read the blog's title I mixed up the s and sh of "site shine" ... )

Now if only square icons weren't cut of at the bottom. This can even be seen on the demo page with a clean install of beta 1.

Originally posted by mwilco:

Is it possible to override an external site's css or icon to create your own?

You can manually replace the pngs in profile/thumbnails. Make sure to disable reloading in Opera though!

Hi Altarius.

You could find out if the current view-mode is minimized by applying the media feature to a temporary element and getting the computed style, e.g.:

// Returns 1 if current view-mode is "minimized", otherwise returns 0
function isMinimized() {
    var result = 0;
    if (window.getComputedStyle) {
        // Create empty element
        var test = document.createElement('div');
        test.id = 'is-minimized';
        document.body.appendChild(test);
        
        // Create temporary style and media feature
        var style = document.createElement('style');
        style.innerHTML = '#is-minimized {opacity:0;} @media screen and (view-mode:minimized) {#is-minimized {opacity:1;}}';
        document.head.appendChild(style);
        
        // Get the computed style of the empty element
        result = window.getComputedStyle(test, null).getPropertyValue('opacity');
        
        // Tidy up by removing the temporary elements
        document.body.removeChild(test);
        document.head.removeChild(style);
    }
    return result;
}

Alternatively, my colleague Mike says "you can grab a reference to the style sheet and throw a regex at its cssText looking for the view-mode. Diego Perini has a cool script that could be used as a starting point":

http://javascript.nwbox.com/CSSSupport/
http://javascript.nwbox.com/CSSSupport/css-support.js

Hope this helps.
Daniel

Well done for the good work. But to some extent, we are missing out on our friends. I think Opera needs to work on mobile SMS ALERTs for comments and requests, just as in facebook. I would appreciate if this is given a thorough consideration. Thank!

I added a minified User-CSS with the CSS-inline-rule "@media screen and (view-mode: minimized)".

All the styles are displayed properly but the viewport doesn't change.
It's still the whole page and there is no auto-reload defined in my speed dial settings.
Running the latest snapshot 2064 (but I had this also on snapshots before).

I would like the viewport to be 260 pixels wide by 195 pixels high as mentioned in the article.
Maybe someone can help me with that issue Many thanks!

EDIT: Maybe the server delivers a version with a viewport meta-tag when the x-purpose header is sent. I have to check...

Originally posted by Zwoks-Stef:

I would like the viewport to be 260 pixels wide by 195 pixels high as mentioned in the article.
Maybe someone can help me with that issue

Turns out, we got it wrong. The actual dimensions are 256 pixels wide by 192 pixels high. You should see an updated piece shortly.

Originally posted by chrismills:

Hmmm, I'm really not sure of the answer to this. I will try to find out.

Thank you. I think you shouldn't randomly make up a non-X-prefixed HTTP header.

I would like to make a css only for the screen 256x160 to the opera pin.
but.. i do not understand how.
Can you give me a simple example for put my image in a pin but PER css.
I try with:

CSS::::::::::::::::::::::::::::::::::::::Start
@media screen and (view-mode: minimized) {
body {
color: #fff;
background: #b20000;
background-image:url('path/to/custom-pin.jpg')
}
}
CSS::::::::::::::::::::::::::::::::::::::End
HTML:::::::::::::::::::::::::::::::::::::Start
<link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)">
HTML:::::::::::::::::::::::::::::::::::::End

but not work for me, only work the other way, when put rel="ico" in the header.

Thanks for your time!
(I am very happy with this new function of Opera)


P.S.: if i do with:
HTML:::::::::::::::::::::::::::::::::::::Start
<head>
<title>My Opera</title>
<link rel="icon" type="image/png" href="http://path/to/logo.png">
</head>
HTML:::::::::::::::::::::::::::::::::::::END
that change my favicon and view ugly in other browser (the favicon)
for that reason i would like to have my "custom pin" per css for not overwrite the favicon.

By default, the maximum icon size is 256 pixels wide by 160 pixels high. Icons larger than that will be resized to fit (demo). Users can change the default minimum and default maximum settings from the opera:config menu.

I found "Thumbnail Icon Min Height/Width", but no such MAX setting?!

I am developing a Wordpress plugin for very easy GUI based uploading of custom speed dial icon for noob Wordpress bloggers. Just click > Upload any image you want > Activate. Simple. Default image size will be 114 x 114 and will support upto 256 x 160. Currently only png is supported.

Frankly, it adds:

<link rel="icon" type="image/png" href="http://example.com/wp-content/plugins/Opera-Speed-Dial-plugin/default/speeddial.png">

or

<link rel="icon" type="image/png" href="http://example.com/speeddial.png">

to the header. In other words, it converts what we want to add from php to html as output.

I am thinking to add more features.

Here is a screenshot of the plugin when it is activated in Wordpress panel in my test (offline) blog: http://bit.ly/hS8n8L

And working example is my website (Wordpress 3.1) : http://bit.ly/9Hp8bf

It does not change the favicon in the Redmond browser series (IE 8, some one can test on IE9, IE7 ?) FF or Safari as well.


I need to provide CSS support (say some template will be there to choose from) for it, other than lame dependency on graphics ( so that user can just type his / her blog's name and that will appear over the base template).


Please provide more ideas and help for that CSS part

All the links to examples in the article seem to be broken

For example:

• http://dev.opera.com/articles/view/opera-speed-dial-enhancements/demos/view-mode.html
• http://dev.opera.com/articles/view/opera-speed-dial-enhancements/demos/multiple-icons-same-size.html
• http://dev.opera.com/articles/view/opera-speed-dial-enhancements/demos/multiple-icons-diff-sizes.html

Originally posted by mwilco:

Is it possible to override an external site's css or icon to create your own? I can think of ways to enhance just about every speed dial I have, but I'd rather not wait to see if the owners implement it themselves (though I hope they do!)

Yes it is ;-)
http://my.opera.com/Zwoks-Stef/blog/2011/04/18/customize-speed-dials-with-css

Turned out that site specific user CSS doesn't work.
But this workaround helps to tune up Speed Dials

What about the HTML5 sizes attribute for link elements? I don't see that covered in the article.

For instance:

<head>
    <title>My Opera</title>
    <link rel="icon" type="image/png" sizes="128x128" href="http://path/to/128x128image.png">
    
    <link rel="icon" type="image/png" sizes="200x200" href="http://path/to/200x200image.png">
</head>

This would let the user agent fetch only the relevant version of the icon.

Originally posted by webinista:

As of version 11.10, Opera for desktop allows content creators to control how their site looks in Speed Dial. By default, Speed Dial uses a screen capture of the web site. But now site owners can specify an icon or serve Speed Dial-specific CSS or content.

But what about the users? Is there any ability to disable this new behavior in Opera?
I used to these screen captures.

Can it be, that the rendering of the speeddial stops after some time?
I've tried to implement a ticker for news when my page is added to speeddial, but it seems after about 40 - 60 seconds, the javascript stops to run.

I tried to popularize this article among friends and web services I like. Surprisingly I saw some effect on my Speed Dial tab.
Unfortunately images used as "icon" at the web page loose their transparency while imported to Speed Dial. This is a disadvantage for some users (like 'Speed Dial contest' participants).
Is this for a reason or is there any chance to change in the future?

// Returns 1 if current view-mode is "minimized", otherwise returns 0
function isMinimized() {
var result = 0;
if (window.getComputedStyle) {
// Create empty element
var test = document.createElement('div');
test.id = 'is-minimized';
document.body.appendChild(test);

Here is the code for a article uploaded to x traposed take a gander

// Create temporary style and media feature
var style = document.createElement('style');
style.innerHTML = '#is-minimized {opacity:0;} @media screen and (view-mode:minimized) {#is-minimized {opacity:1;}}';
document.head.appendChild(style);

// Get the computed style of the empty element
result = window.getComputedStyle(test, null).getPropertyValue('opacity');

// Tidy up by removing the temporary elements
document.body.removeChild(test);
document.head.removeChild(style);