../Window(s) webview/Appearance
WebView: appearance
It was said previously that the .htt (HyperTextTemplates) files were very much like any html file. This is true, in most aspects. The major difference is the presence of "objects" (with special CLSIDs for those of you who know what that means) available to improve the look or the functionalities.
Three are most noticeable: the folder icon preview (at the top left), the preview thumbnail (for jpegs, gifs), and the most important: the FileList, which is, basically the "interactive"/normal part, with the icons, different views etc...
Unfortunately most of the look of the FileList cannot be changed, we are limited to applying a background image and changing the colors (check here on how to do that), but with .htt files it's possible to have a bit more control like the view type etc..
So, we are finally only able to edit everything "around" the FileList :
It was said previously that the .htt (HyperTextTemplates) files were very much like any html file. This is true, in most aspects. The major difference is the presence of "objects" (with special CLSIDs for those of you who know what that means) available to improve the look or the functionalities.
Three are most noticeable: the folder icon preview (at the top left), the preview thumbnail (for jpegs, gifs), and the most important: the FileList, which is, basically the "interactive"/normal part, with the icons, different views etc...
Unfortunately most of the look of the FileList cannot be changed, we are limited to applying a background image and changing the colors (check here on how to do that), but with .htt files it's possible to have a bit more control like the view type etc..
So, we are finally only able to edit everything "around" the FileList :
The web view is split in 2 or 3 parts, depending if you are running 2k/Me or 98.
There is the FileList as said previously, but also the "left info panel" (Panel), which could be considered the main evolution from basic view as it is where all the infos are shown and occupies about 30% (or 200px) of the view, and finally if you are running 98 the MiniBanner that shows on top of the view where the window is so small that the panel would occupy too much; it's about 30px tall.
Now for what is shown when you open the .htt files with notepad (when choosing customize this folder-> create or modify an HTML document) it's this way:
First the style sheets in a language called css (cascading style sheets) between <style> </style> [those are called html "tags" btw, <tag> is the beginning and </tag> is the end, more basic info here.]
They are the easiest way to change the look, and you should know the basics if you plan on doing cool things. You can learn a bit at a lot of places, check the basic synthax at W3 schools.
Also, find a quick reference and a color code and names at the same place. A good download even if it's not updated anymore is the HTMlib. See also the system colors at WebFx.
Then there is the script part between <script> </script> This part if not customized is in Javascript and mostly controls how the info about the selected files is retrieved then shown. It occupies about 70% of the htt file or is sometimes linked to an external .js file for common webviews. When you just want to fiddle a bit you probably won't need to go there (there are exceptions though). However if you think you are up to the challenge check this page.
Finally, the page's body between <body> </body> This is where the content should be written, but because the style sheets already control most of the appearance it's main purpose for us is for adding new elements.
There is the FileList as said previously, but also the "left info panel" (Panel), which could be considered the main evolution from basic view as it is where all the infos are shown and occupies about 30% (or 200px) of the view, and finally if you are running 98 the MiniBanner that shows on top of the view where the window is so small that the panel would occupy too much; it's about 30px tall.
Now for what is shown when you open the .htt files with notepad (when choosing customize this folder-> create or modify an HTML document) it's this way:
First the style sheets in a language called css (cascading style sheets) between <style> </style> [those are called html "tags" btw, <tag> is the beginning and </tag> is the end, more basic info here.]
They are the easiest way to change the look, and you should know the basics if you plan on doing cool things. You can learn a bit at a lot of places, check the basic synthax at W3 schools.
Also, find a quick reference and a color code and names at the same place. A good download even if it's not updated anymore is the HTMlib. See also the system colors at WebFx.
Then there is the script part between <script> </script> This part if not customized is in Javascript and mostly controls how the info about the selected files is retrieved then shown. It occupies about 70% of the htt file or is sometimes linked to an external .js file for common webviews. When you just want to fiddle a bit you probably won't need to go there (there are exceptions though). However if you think you are up to the challenge check this page.
Finally, the page's body between <body> </body> This is where the content should be written, but because the style sheets already control most of the appearance it's main purpose for us is for adding new elements.
Instead of simply replacing the wvleft and wvline files in your windir/web folder you could modify the .htt file to link to different files. That would let you customize specific folders like My Documents for example.
Changing the background picture:
To change this image (named wvleft .bmp or .gif), go to the end of the file, to the line: <!-- start left info panel -->
<div id=Panel style="background: white URL(file://%TEMPLATEDIR%\wvleft.bmp) no-repeat"> or:
<div id=Panel style="background: window URL(file://%TEMPLATEDIR%/wvleft.gif) no-repeat left top">
for ME/2k. Then replace %TEMPLATEDIR%\wvleft.* with your file's path.
If your picture has a special background color you can also replace white or window with a simple color or a hex value.
No-repeat can be replaced by repeat,
repeat-x and
repeat-y, meaning repeat everywhere, repeat horizontally and repeat vertically.
Left top is the position of the background image, it can also be a pixel value. Other values can be found here.
Changing the line:
Go to the line: <p class=LogoLine><img src="%TEMPLATEDIR%\wvline.gif" width=100% height=1px> or: <img id=LogoLine src="wvline.gif"> on ME/2k.
And replace %TEMPLATEDIR%\wvline.* with your image's path.
You probably noticed that you can also change the width and height of the "LogoLine", if you are using ME/2k it's somewhere else : at the beginning of the file, between <style> and </style>:
#LogoLine {width: 100%; height: 2px; margin-top: 4px; vertical-align: top}
Changing the background picture:
To change this image (named wvleft .bmp or .gif), go to the end of the file, to the line: <!-- start left info panel -->
<div id=Panel style="background: white URL(file://%TEMPLATEDIR%\wvleft.bmp) no-repeat"> or:
<div id=Panel style="background: window URL(file://%TEMPLATEDIR%/wvleft.gif) no-repeat left top">
for ME/2k. Then replace %TEMPLATEDIR%\wvleft.* with your file's path.
If your picture has a special background color you can also replace white or window with a simple color or a hex value.
No-repeat can be replaced by repeat,
repeat-x and
repeat-y, meaning repeat everywhere, repeat horizontally and repeat vertically.
Left top is the position of the background image, it can also be a pixel value. Other values can be found here.
Changing the line:
Go to the line: <p class=LogoLine><img src="%TEMPLATEDIR%\wvline.gif" width=100% height=1px> or: <img id=LogoLine src="wvline.gif"> on ME/2k.
And replace %TEMPLATEDIR%\wvline.* with your image's path.
You probably noticed that you can also change the width and height of the "LogoLine", if you are using ME/2k it's somewhere else : at the beginning of the file, between <style> and </style>:
#LogoLine {width: 100%; height: 2px; margin-top: 4px; vertical-align: top}
Changing the text aspect:
The #FolderName
(p.Title in win98) line in the style sheet controls the folder's title appearance. You can edit the text size and font ("menu" or "verdana" by default): font: 13pt/13pt menu; and the font-style (bold, normal, lighter): font-weight: bold or anything else in here. The body line controls every other text and follows the same rules.
Editing specific elements:
#FileList is the icon area, but isn't really accessible through css, so don't think cool things like background-color will work in it. But you should use height, width, left and top properties in conjuction with scripting to resize it.
#Thumbnail can let you define the Thumbnail size.
In winMe, #Corner is the upper Panel part and #Details is the lower one.
In win98, #PieChart is the pie chart info about drives in My computer (only shown in mycomp.htt).
Editing other elements:
For the other things you'll maybe need to experiment a bit, and you'll see margins and padding are commonly used. Margins are used to redefine the space around any elements, while padding is the space inside elements.
Also check the Frequently Asked Questions here.
The #FolderName
(p.Title in win98) line in the style sheet controls the folder's title appearance. You can edit the text size and font ("menu" or "verdana" by default): font: 13pt/13pt menu; and the font-style (bold, normal, lighter): font-weight: bold or anything else in here. The body line controls every other text and follows the same rules.
Editing specific elements:
#FileList is the icon area, but isn't really accessible through css, so don't think cool things like background-color will work in it. But you should use height, width, left and top properties in conjuction with scripting to resize it.
#Thumbnail can let you define the Thumbnail size.
In winMe, #Corner is the upper Panel part and #Details is the lower one.
In win98, #PieChart is the pie chart info about drives in My computer (only shown in mycomp.htt).
Editing other elements:
For the other things you'll maybe need to experiment a bit, and you'll see margins and padding are commonly used. Margins are used to redefine the space around any elements, while padding is the space inside elements.
Also check the Frequently Asked Questions here.