Small-screen version of Time and Date
Sunday, 11. March 2007, 21:37:21
If you have a small computer screen, you might very well find that the default size of the Time and Date widget is too large.
Although it is possible to zoom the widget by using the + or - keys, this causes the widget to run very much slower.
Here is an alternative and better solution.
Although it is possible to zoom the widget by using the + or - keys, this causes the widget to run very much slower.
Here is an alternative and better solution.
- Click on Import and export in the Calendar window.
- Paste the following code into the text area:
var exportedSettings = new Object({ "modification" : "var css=document.styleSheets[0],l=css.cssRules.length,oaol=appearanceLinkOnLoad;MAXHEIGHT=443;WIDTH=636;modificationInput.length=5000;css.insertRule('.window_background{padding:5px}',l++);css.insertRule('.window_frame{padding:4px}',l++);css.insertRule('#calendar{width:450px}',l++);css.insertRule('#calendar .window_frame{height:178px}',l++);css.insertRule('#previousmonth{top:3px;left:3px}',l++);css.insertRule('#month{top:3px;left:29px}',l++);css.insertRule('#nextmonth{top:3px;left:122px}',l++);css.insertRule('#year{top:3px;left:158px}',l++);css.insertRule('#today{top:3px;left:237px}',l++);css.insertRule('#showsearch{top:3px;right:55px}',l++);css.insertRule('#showimportexport{top:3px;right:29px}',l++);css.insertRule('#showhelp{top:3px;right:3px}',l++);css.insertRule('#calendarcontainer{top:41px;right:3px;left:3px;height:128px}',l++);css.insertRule('#monthcalendar td,#monthcalendar th{width:20px;height:19px}',l++);css.insertRule('#holidays{left:200px;height:100px;width:200px;padding:2px 0px 2px 5px}',l++);css.insertRule('#settings{width:360px}',l++);css.insertRule('#settings .window_frame{height:300px}',l++);css.insertRule('body.top #settings{top:37px;bottom:auto}',l++);css.insertRule('body.right #settings{right:61px;left:auto}',l++);css.insertRule('body.bottom #settings{top:auto;bottom:37px}',l++);css.insertRule('body.left #settings{left:215px;right:auto}',l++);css.insertRule('#settings select,#settings input[type=text],#settings input[type=number],#settings input[type=checkbox]{margin-bottom:4px}',l++);css.insertRule('#settingstab1 select{width:200px}',l++);css.insertRule('#dateandtimeformat{width:195px}',l++);css.insertRule('#settingstab2 input[type=text]{width:165px}',l++);css.insertRule('#definitions{height:50px}',l++);css.insertRule('#search{width:310px}',l++);css.insertRule('body.top #search{top:84px;bottom:auto}',l++);css.insertRule('body.right #search{right:99px;left:auto}',l++);css.insertRule('body.bottom #search{top:auto;bottom:72px}',l++);css.insertRule('body.left #search{left:217px;right:auto}',l++);css.insertRule('#searchtext{top:18px;left:4px;width:244px}',l++);css.insertRule('#dosearch{top:18px;left:257px}',l++);css.insertRule('#searchresults{top:45px;left:3px;width:277px}',l++);css.insertRule('#event{width:350px}',l++);css.insertRule('body.top #event{top:46px;bottom:auto}',l++);css.insertRule('body.right #event{right:71px;left:auto}',l++);css.insertRule('body.bottom #event{top:auto;bottom:46px}',l++);css.insertRule('body.left #event{left:215px;right:auto}',l++);css.insertRule('#event .window_frame{height:300px}',l++);css.insertRule('#event .label{padding-top:3px}',l++);css.insertRule('#title{width:300px}',l++);css.insertRule('#description{width:305px;height:40px}',l++);css.insertRule('#weekpattern label{margin-left:2px;}',l++);css.insertRule('#importexport{width:480px}',l++);css.insertRule('body.right #importexport{right:71px;left:auto}',l++);css.insertRule('body.left #importexport{left:85px;right:auto}',l++);css.insertRule('#importexportcontent{width:435px;height:100px}',l++);css.insertRule('#importexportactionlabel{margin-top:4px}',l++);css.insertRule('#actiondescription{margin-left:190px}',l++);css.insertRule('#about{width:320px}',l++);css.insertRule('body.top #about{top:84px;bottom:auto}',l++);css.insertRule('body.right #about{right:99px;left:auto}',l++);css.insertRule('body.bottom #about{top:auto;bottom:72px}',l++);css.insertRule('body.left #about{left:217px;right:auto}',l++);css.insertRule('body.top #dialog{top:172px;bottom:auto}',l++);css.insertRule('body.right #dialog{right:86px;left:auto}',l++);css.insertRule('body.bottom #dialog{top:auto;bottom:100px}',l++);css.insertRule('body.left #dialog{left:130px;right:auto}',l++);css.insertRule('body.top #reminder{top:80px;bottom:auto}',l++);css.insertRule('body.right #reminder{right:86px;left:auto}',l++);css.insertRule('body.left #reminder{left:180px;right:auto}',l++);appearanceLinkOnLoad=function(){oaol();if(appearance.indexOf('widget')>-1){var css=appearanceLink.sheet,l=css.cssRules.length;css.insertRule('#time{height:18px;overflow:hidden}',l++);css.insertRule('#time_display{font-weight:normal}',l++);css.insertRule('body.top #time_display{background-position:0 -17px}',l++);css.insertRule('body.top #time_right{background-position:0 -17px}',l++);css.insertRule('body.top #time_left{background-position:0 -17px}',l++);css.insertRule('body.top.right #time_display{padding:2px 6px 4px 0}',l++);css.insertRule('body.top.left #time_display{padding:2px 0 4px 6px}',l++);css.insertRule('body.bottom.right #time_display{padding:4px 6px 2px 0}',l++);css.insertRule('body.bottom.left #time_display{padding:4px 0 2px 6px}',l++);css.insertRule('body.right #time_right{width:0}',l++);css.insertRule('body.left #time_left{width:0}',l++)}}" }); - Click OK
- Click Yes in the confirmation window.
You will not overwrite all your current settings and events, even if it says so.
WIDGETIZE
DynaBMan # 16. March 2007, 02:28
I posted a comment on the widget site, but I think this is a better place to ask about what I have in mind.
Is there a way to have a smaller version of the date placement? It would be nice to be able to cut down on the padding to make it smaller. I like the widget colors instead of the ones from XP or Vista, but I would like to make it smaller. Is this possible?
Thanks again for the best widget for Opera.
rkm # 16. March 2007, 03:07
You could try this:
var exportedSettings = new Object({"modification" : "var oaol=appearanceLinkOnLoad;appearanceLinkOnLoad=function(){oaol();if(appearance.indexOf('widget')>-1){var css=appearanceLink.sheet;css.insertRule('#time{height:18px}',36);css.insertRule('#time_display{font-weight:normal}',36);css.insertRule('body.top #time_display{background-position:0 -17px}',36);css.insertRule('body.top #time_right{background-position:0 -17px}',36);css.insertRule('body.top #time_left{background-position:0 -17px}',36);css.insertRule('body.top.right #time_display{padding:2px 6px 4px 0}',36);css.insertRule('body.top.left #time_display{padding:2px 0 4px 6px}',36);css.insertRule('body.bottom.right #time_display{padding:4px 6px 2px 0}',36);css.insertRule('body.bottom.left #time_display{padding:4px 0 2px 6px}',36);css.insertRule('body.right #time_right{width:0}',36);css.insertRule('body.left #time_left{width:0}',36)}}"
});
This makes the date display a lot more similar to that of the Windows skins. You can try it.
I have removed the bold property of the font, because I thought it looked better, and because it uses less space. If you want to keep it, remove "css.insertRule('#time_display{font-weight:normal}',36);" from the code above.
It would also be possible to make it look more like it looked originally - only scaled down - but this would require a little more work.
To remove any modifications, just import:
var exportedSettings = new Object({"modification" : ""
});
DynaBMan # 17. March 2007, 01:40
That is exactly what I had in mind. You are fantastic.
PS: Have you ever thought about making a skin for Opera? I bet it would be great.
endyros # 10. January 2008, 03:57
Anonymous # 12. February 2008, 13:37
I'm trying to run the widget on my Archos 605 WIFI, on the desktop it runs good, but on the Archos is too down the screen and I do not find a way to move it up (so I can see the buttons in the bottom of the widgwet).
Any idea what can I do?
Another question: where's the data stored? can I synchronize the PC with the Archos?