Adding style:
In its current form, the widgets default background color is transparent, and uses regular browser defaults for styling. Let’s spice it up with a little CSS and additional markup.
First, you need to add a style sheet reference to the HTML document, and add some hooks for styling. Replace what you currently have inside
index.html with the following, and save the changes.<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href="style/helloworld.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Hello World!</h1>
</div>
<div id="content">
<div id="front" class="view">
<h2 id="hellotext">Welcome to the world of Opera Widgets!</h2>
</div>
</div>
<div id="footer">Powered by Opera</div>
</div>
</body>
</html>
- Find where the Widget is installed on your development machine. For example, in Mac OSX it will be in the Applications folder; in Windows it will be in Program Files; in Linux it will be in ~/.opera-widgets/usr/share. In the case of this example, you are looking for
Hello World!
. - Access the files inside the Widget. This is done in different ways depending on your operating system. For example on Mac OS X, Cmd + Click on the Widget icon and select Show Package Contents. You will be given a finder window containing the package contents: Hello World! > Contents > Resources > Widget > index.html.
- Open the HTML file you wish to edit (e.g. index.html) in your favorite text editor, make the desired changes, and save the file.
- Close the widget and restart it to see the effect your changes have had.
Next it’s time to create a style sheet to style your widget. Create a new folder called
style in the same directory as your other files, and create a new file inside it called helloworld.css. Add the following code inside this file and save it./** Basic styles **/
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 16px;
}
h1 {
margin: 0;
font-size: 1.1em;
padding: 7px 0 0 10px;
font-weight: normal;
}
h2{
font-weight: normal;
font-size: 1.1em;
margin: 0px;
}
/** Structure **/
#container {
width: 429px;
}
#header {
background-image: url(../images/back_top.png);
padding: 4px 10px 0px 10px;
height: 35px;
}
#content {
background-image: url(../images/back_center.png);
color: #333;
}
.view{
padding: 10px 10px 10px 20px;
height: 60px;
max-height: 60px;
max-width: 393px;
overflow: auto;
-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px);
}
#footer {
background-image: url(../images/back_bottom.png);
height: 23px;
padding: 2px 0 0 20px;
font-size: 0.6em;
text-decoration: underline;
color: #dd2222;
}
You’ll notice that there are several background images referenced inside this style sheet; now you need to add these to our widget folder. The images you need can be found in the
/docs/examples/firstwidgetdirectory in the SDK package — unzip the archive, then grab the images folder contained within it and put it in the same directory as the index.html file.
The styling is now all in place, so try running your widget again, in the same manner as before — it should now look like Figure 3. After this styling is applied, the widget no longer looks bland and unstyled. It now has a background that makes it stand out from the rest of the desktop. The control regions make the center of the widget and any scrollbars clickable without causing the widget to be dragged.
No comments:
Post a Comment