My OperaThe My Opera forums have been replaced with forums.opera.com. Please head over there to discuss Opera's products and features
See the new ForumsYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
Very simple Opera Speeddial Extension
I would like to create an extion for the Opera Speeddial.Just linking to the website tape.tv
Black background
white bold colored text "tape.tv" (center + middle)
I tried to build it based on the clock example...
config.xml:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://www.tape.tv/" defaultlocale="de" viewmodes="minimized">
<name short="Tape.tv">Tape.tv Speed Dial Extension</name>
<description>This is a Speed Dial extension linking to Tape.tv.</description>
<author href="http://unrealmirakulix.de/">Daniel P.</author>
<icon src="images/icon_64.png"/>
<feature name="opera:speeddial" required="false">
<param name="url" value="http://www.tape.tv/"/>
</feature>
</widget>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Tape.tv Speed Dial Extension</title>
</head>
<body>
<td align="center" valign="middle"><font color="#FFFFFF"><b>tape.tv</b></font></td>
<output></output>
</body>
</html>
style.css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
/* Use display:table and display:table-cell
so that we can use vertical-align:middle */
body {
background: #444;
color: #fff;
display: table;
height: 100%;
width: 100%;
}
output {
display: table-cell;
font-family: monospace;
font-size: 10em;
text-align: center;
text-shadow: 0 0.1em 0.1em #000;
vertical-align: middle;
}
/* Styles here are only applied in a "minimized" state */
@media screen and (view-mode: minimized) {
output {
font-size: 1.8em;
}
}
At the moment the linking works, but colors and middle + center doesn't work...
Got the right colors now:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Tape.tv Speed Dial Extension</title>
</head>
<body>
<td align="center" valign="middle"><b>tape.tv</b></td>
</body>
</html>
style.css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
/* Use display:table and display:table-cell
so that we can use vertical-align:middle */
body {
background: #000;
color: #fff;
display: table;
height: 100%;
width: 100%;
}
output {
display: table-cell;
font-family: monospace;
font-size: 10em;
text-align: center;
text-shadow: 0 0.1em 0.1em #000;
vertical-align: middle;
}
/* Styles here are only applied in a "minimized" state */
@media screen and (view-mode: minimized) {
output {
font-size: 1.8em;
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Tape.tv Speed Dial Extension</title>
</head>
<body>
<td align="center" valign="middle"><b>tape.tv</b></td>
</body>
</html>
style.css:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
/* Use display:table and display:table-cell
so that we can use vertical-align:middle */
body {
background: #000;
color: #fff;
display: table;
height: 100%;
width: 100%;
}
output {
display: table-cell;
font-family: monospace;
font-size: 10em;
text-align: center;
text-shadow: 0 0.1em 0.1em #000;
vertical-align: middle;
}
/* Styles here are only applied in a "minimized" state */
@media screen and (view-mode: minimized) {
output {
font-size: 1.8em;
}
}
Looks a bit better with this now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Tape.tv Speed Dial Extension</title>
</head>
<body>
<td align="center" valign="middle"><b><img src="images/tapetv_marke_negativ.jpg" /></b></td>
</body>
</html>
But how can I make the image resize automatically? And How can I put the image in the middle?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Tape.tv Speed Dial Extension</title>
</head>
<body>
<td align="center" valign="middle"><b><img src="images/tapetv_marke_negativ.jpg" /></b></td>
</body>
</html>
But how can I make the image resize automatically? And How can I put the image in the middle?
here's my attempt:
For the resizing, I used a new CSS property that Opera supports, background-size: contain, which stretches the image to available size, while maintaining aspect ratio.
This is only activated when the available size is less than the size of the image (using a media query), otherwise it is only centered.
You have to change the url to the background image and adjust the media query max-width and max-height to match your image.
There's a lot of other really useful new css properties supported in opera, have a look here: http://www.opera.com/docs/specs/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Tape.tv Speed Dial Extension</title>
<style>
/* set margin and padding on html and body containers and force height and width to 100%, as it defaults to 0 */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* set centered background on body */
body {
background: url("http://media.opera.com/media/images/icon/Opera_512x512.png") center no-repeat;
}
/* strech to resize the background when the available size is less than the size of the image - when width is < 512 or when height is < 512 */
@media (max-width: 512px), (max-height: 512px) {
body {
background-size: contain;
}
}
</style>
</head>
<body>
</body>
</html>
For the resizing, I used a new CSS property that Opera supports, background-size: contain, which stretches the image to available size, while maintaining aspect ratio.
This is only activated when the available size is less than the size of the image (using a media query), otherwise it is only centered.
You have to change the url to the background image and adjust the media query max-width and max-height to match your image.
There's a lot of other really useful new css properties supported in opera, have a look here: http://www.opera.com/docs/specs/
Forums » Dev.Opera » Opera Extensions Development Discussions