Threaded View
-
July 16th, 2011 02:26 PM #1
- Join Date
- May 2011
- Location
- Latour, Paramaribo, Suriname
- Posts
- 2,081
- Mentioned
- 27 Post(s)
- Tagged
- 713 Thread(s)
- Sex:
Create a simple gadget (without javascripts)
Hello everyone, this tutorial will guide you to make your own gadget.
NOTE: It is recommended that you can write and understand HTML scripts. The gadget we will make today is like a link panel.
follow the steps below:
we will make a folder named 'Images' (in this folder the images will be placed).
1. prepare a new webdocument (use a texteditor like notepad)
2. we will write the html code below and make a body of 500px by 210px. (use div)
3. create some links. we will use links to My Documents; My Music; My Pictures and My Videos
Use Documents
Where the ******** is, fill the path in (e.g. C:/Users/User/Documents)
4. Save the document as a webpage and name it index.html
The full code code:
-----------------------------------------------------------------------------------------------
<html>
<head>
<title> Alienware Panel </title>
<link rel='stylesheet' href='style.css'>
</head>
<body scroll="no" unselectable="on">
<div class='base'>
<table border='0' width='480px' align='center' cellspacing='0' cellpadding='0'>
<tr><td rowspan='3'>
[img]images/computer.png[/img]
</td>
<td colspan='2' align='right'>
[img]images/logo.png[/img]
<font class='motto'>by Harvey's Designs</font>
</td>
</tr><tr>
<td width='140px'>
<UL class='list'>[*]COMPUTER [*]RECYCLE BIN [*]DESKTOP [*]HARDDRIVE [*]RECENT ITEMS [/list]
</td>
<td width='140px'>
<UL class='list'>[*]DOCUMENTS [*]MUSIC [*]PICTURES [*]VIDEOS [*]DOWNLOADS [/list]
</td></tr>
<tr>
<td colspan='2' height='20px'> <marquee class='marq'> Alienware Satellite C655 | Windows Alienware 3.1 | 250GB SATA HDD | 2GB DDR3 RAM | 128 MB Video Adapter </marquee> </td>
</tr>
</table>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------
5. Make a external CSS and name it as style.css :
body {
width:500px;
height:210px;
margin:0;
padding:0;
}
.base {
border:5px solid #dddddd;
background:url(images/body.png);
height:210px;
width:500px;
}
.list {
list-style:none;
margin:0 0 0 0;
padding:0;
}
.list li {
padding:3 0 0 0;
}
.link {
font-family:eurostile extended;
color:#dddddd;
font-size:10pt;
text-decoration:none;
letter-spacing:0;
}
.link:hover {
color:#ff0000;
}
.motto {
font-family:eurostile extended;
color:#dddddd;
font-size:9pt;
}
.marq {
color:#ff0000;
font-family:eurostile extended;
font-size:9pt;
}
----------------------------------------------------------------------------------------
6. Windows will look up for an xml file for the gadget.
lets make one. Copy the following code and save it as gadget.xml
----------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<gadget>
<name>Alienware Panel Red</name>
<namespace>microsoft.windows</namespace>
<version>1.0.0.0</version>
<author name="Harvey's Designs">
<info url="https://go.microsoft.com/fwlink/?LinkId=124093" text="www.gallery.microsoft.com"/>
<logo src="logo.png"/>
</author>
<copyright>© 2011</copyright>
<description>The fast launching Alienware Panel</description>
<icons>
<icon height="48" width="48" src="icon.png"/>
</icons>
<hosts>
<host name="sidebar">
<autoscaleDPI>true</autoscaleDPI>
<base type="html" apiVersion="1.0.0" src="Index.html"/>
<permissions>full</permissions>
<platform minPlatformVersion="1.0"/>
<defaultImage src="drag.png"/>
</host>
</hosts>
</gadget>
----------------------------------------------------------------------------------------
7. save all the files (index.html / style.css / gadget.xml) and folder (Images in a folder named: 'en-US')
Save this folder in another folder named: 'Yourgadgetname.gadget'
8. Place this folder in C:/program files/windows sidebar/gadgets/
9. Open your gadgets and there you have them.
IF YOU ARE MISSING SOMETHING OR YOU DON'T UNDERSTAND IT DOWNLOAD THE WHOLE GADGET HERE
you can ask me some questions if you don't userstand something. use the same forum to do so(please don't PM me).
you can REP me(by clicking on the green hand) for the work.
"BEST IN THE WORLD"
VIRTUAL CUSTOMS TEAM MEMBER
PLEASE REP THE ARTIST IF YOU LIKE A POST OR DOWNLOAD IT
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Similar Threads
-
Gadget Help
By thayl0 in forum General Windows 7 CustomizationReplies: 2Last Post: August 4th, 2013, 09:52 AM -
VC Gadget
By MrToxicCodes in forum Desktop GadgetsReplies: 5Last Post: November 26th, 2012, 12:51 PM -
i need help with a gadget
By framemaster in forum GadgetsReplies: 2Last Post: May 26th, 2012, 05:36 AM -
Create a simple realistic shadow effect
By Harvey Sewdin in forum PS CS5 TutorialsReplies: 5Last Post: May 12th, 2012, 03:45 PM -
WMP gadget
By 0228 in forum Desktop GadgetsReplies: 6Last Post: September 13th, 2011, 08:58 PM
hi when you applied the stylehack was all the images still there if not you might have not applied it correctly only msstyles and visual styles are different anyway try this open the 7-10 wsb first...
Custom Class Maps and...