Creating Useragent in Comments Themes

27 Jun 2011
23:04

how to do it


Creating themes for the extension couldn't be easier, though it can be time-consuming. It's as easy as creating a few images and a text file and placing them in a directory (which will then go in the /themes directory of the extension. It can be time-consuming as there are over 80 images that can be created.

Themes require three files—two images and one text file:

File TypeFile NameInformation
Unknown OS/Browserunknown.pngIf the translation routine does not recognize an operating system or browser from the useragent string, it will display this image.
Missingmissing.pngIf your theme is missing the image it needs to display, it will display this image instead (unless configured otherwise; see below).
Theme Informationtheme.txtThis file contains information pertinent to the theme, such as the theme's name, creator, and image dimensions. Contents are placed in the file as such:
Name: Default in Grayscale
Key: grayscale
Creator: Geoffrey A. Wagner (Stingray)
Email: geoffrey@mobius-design.net
Date: 2011-06-25
Image: 14x14
Missing: theme

This is explained:

TitleDescription
Name
required
The name of the theme. This information will be displayed in the extension's configuration for a user to select a theme.
Key
required
The internal name of the theme; it cannot contain spaces. This information must be the same as the directory name that all of the theme files are placed in.
Creator:
optional
Your name or however you would like to be recognized as the theme's creator
Email:
optional
Your email address
Date:
optional
The date the theme was created and updated.
Image:
semi-optional
The dimension of the images for your theme; width by height. This line is optional, and if it is missing, the extension will size your images to 14x14; so, if the images in your theme are of a different dimension, especially if they are not square, then it is best to include this line in your theme.txt file.
Missing:
semi-optional
If this line is set to "default", it will show the default theme's image for an image that is missing from your theme. Set it to anything else (or leave the line out entirely) to have the extension show your "missing.png" file for such an image. This setting does not negate the required "missing.png" image file.

These lines do not need to be in this order; they can be in any order you would like.

You are, of course, free to add more information using the same format. At the moment, the extension doesn't do anything with the optional lines or any other information you might want to place in the file, but it may some time later.


Next are the images that can be displayed by the extension—the point of the extension. With database version 20191122.2240, there are 143 images that can be created to represent the information from a useragent as it is initially parsed (some images will be changed as the parsing continues, see below). If any of these images are missing, they will be replaced by your "missing.png" image or the default image stretched or shrunk to your theme's image dimension, based on the "Missing:" line in your "theme.txt" file. These images are as follows:

Supported OSImage NameFor More Information
Androidandroid.pnglink
Apple iPadipad.pnglink
Apple iPhoneiphone.pnglink
Arch Linuxarchlinux.pnglink
BeOS/Zeta-OSbeos.pnglink
BlackBerryblackberry.pnglink
CentOS Linuxcentos.pnglink
Chromium OSchromium.pnglink
Debian Linuxdebian.pnglink
DragonflyBSDdragonflybsd.pnglink
Edubuntu Linuxedubuntu.pnglink
Fedora Linuxfedora.pnglink
FreeBSDfreebsd.pnglink
Gentoo Linuxgentoo.pnglink
Haikuhaiku.pnglink
Kanotix Linuxkanotix.pnglink
Kindle Fireamazonkindlefire.pnglink
Kubuntu Linuxkubuntu.pnglink
Linux Mintmint.pnglink
Mac OS Xmacosx.pnglink
Mac OS X El Capitanmacosx.pnglink
Mac OS X Leopardmacosx.pnglink
Mac OS X Lionmacosx.pnglink
Mac OS X Mavericksmacosx.pnglink
Mac OS X Mountain Lionmacosx.pnglink
Mac OS X Panthermacosx.pnglink
Mac OS X Snow Leopardmacosx.pnglink
Mac OS X Tigermacosx.pnglink
Mac OS X Yosemitemacosx.pnglink
Macintoshmac.pnglink
Mandriva Linuxmandriva.pnglink
MorphOSmorphos.pnglink
NetBSDnetbsd.pnglink
Nintendo 3DS3ds.pnglink
Nintendo DSds.pnglink
Nintendo DSidsi.pnglink
Nintendo Wiiwii.pnglink
Nintendo WiiUwiiu.pnglink
OpenBSDopenbsd.pnglink
PCLinuxOSpclinuxos.pnglink
PalmOSpalmos.pnglink
PlayStation 3ps3.pnglink
PlayStation 4ps4.pnglink
PlayStation Portablepsp.pnglink
PlayStation Vitapsvita.pnglink
Raspberry Piraspberrypi.pnglink
RedHat Linuxredhat.pnglink
SUSE Linuxsuse.pnglink
Slackware Linuxslackware.pnglink
Sun Solarissolaris.pnglink
Symbian OSsymbian.pnglink
Ubuntu Linuxubuntu.pnglink
Ubuntu Linux - Budgieubuntubudgie.pnglink
Unspecified Linuxlinux.pnglink
Unspecified Windowswindows.pnglink
Windows 10win10.pnglink
Windows 2000win2k.pnglink
Windows 3.xwindows3x.pnglink
Windows 7win7.pnglink
Windows 8win8.pnglink
Windows 8.1win8.pnglink
Windows 95win95.pnglink
Windows 98win98.pnglink
Windows CE/Pocket PCwince.pnglink
Windows Millennium Editionwinme.pnglink
Windows Mobilewinmobile.pnglink
Windows NTwinnt.pnglink
Windows Phonewindowsphone.pnglink
Windows Phone 10.0win10.pnglink
Windows Server 2003wins2k3.pnglink
Windows Vistawinvista.pnglink
Windows XPwinxp.pnglink
macOS High Sierramacossierra.pnglink
macOS Sierramacossierra.pnglink
Supported BrowserImage NameFor More Information
AOLaol.pnglink
America Online Browseramericaonlinebrowser.pnglink
Aroraarora.pnglink
Avant Browseravantbrowser.pnglink
Blazerblazer.pnglink
Caminocamino.pnglink
ChromePlus/CoolNovochromeplus.pnglink
Chromium Web Browserchromium-webbrowser.pnglink
Columbuscolumbus.pnglink
CometBirdcometbird.pnglink
Comodo Dragoncomododragon.pnglink
CompuServecompuserve.pnglink
Deepnet Explorerdeepnetexplorer.pnglink
DocZilladoczilla.pnglink
Dolphindolphin.pnglink
Doobledooble.pnglink
ELinkselinks.pnglink
Element Browserelementbrowser.pnglink
Epiphanyepiphany.pnglink
Fennec (Firefox Mobile)fennec.pnglink
Firebird/Phoenixphoenix.pnglink
Firefoxfirefox.pnglink
Flockflock.pnglink
Galeongaleon.pnglink
Google Chromegooglechrome.pnglink
HPSecureWebBrowserhp.pnglink
IceApeiceape.pnglink
IceCaticecat.pnglink
IceWeaseliceweasel.pnglink
Iridiumiridium.pnglink
Ironiron.pnglink
K-Meleonkmeleon.pnglink
KKmankkman.pnglink
Konquerorkonqueror.pnglink
Linkslinks.pnglink
Lunascapelunascape.pnglink
Lynxlynx.pnglink
MS Internet Explorermsie.pnglink
MS Internet Explorer Mobilemsiemob.pnglink
MS Pocket Internet Explorermsiepock.pnglink
MSNTVmsntv.pnglink
Maxthonmaxthon.pnglink
Microsoft Edgemsedge.pnglink
Mini Browserminibrowser.pnglink
Minimominimo.pnglink
Mozilla Suitemozilla.pnglink
Netfrontnetfront.pnglink
Netscape Navigatornetscape.pnglink
Nintendo Browsernintendobrowser.pnglink
OffByOneoffbyone.pnglink
OmniWebomniweb.pnglink
Operaopera.pnglink
Orca Browserorca.pnglink
Origynorigyn.pnglink
Pale Moonpalemoon.pnglink
Powermarks Bookmark Managerpowermarks.pnglink
Prismprism.pnglink
RockMeltrockmelt.pnglink
Safarisafari.pnglink
SeaMonkeyseamonkey.pnglink
Shiirashiira.pnglink
Silksilk.pnglink
Stainlessstainless.pnglink
Sylerasylera.pnglink
Vivaldivivaldi.pnglink
WebPositivewebpositive.pnglink
Xiinoxiino.pnglink
iCabicab.pnglink
w3mw3m.pnglink


There are seven other optional images that replace other images based on versions or types of the software being used (as the parsing of the useragent continues, as mentioned). If any of these images are missing, they will be replaced with your "missing.png" image or the default image stretched or shrunk to yourtheme's image dimension, based on the "Missing:" line in your "theme.txt" file. These images are as follows:

Image TypeImage NameInformation
Ubuntu v10 and upubuntu10.pngThis image replaces the default "ubuntu.png" image for Ubuntu versions 10 or higher, if detected.
Edubuntu v10 and upedubuntu10.pngLike above, but for Edubuntu.
Kubuntu v10 and upkubuntu10.pngLike above, but for Kubuntu.
Android WebKit Browserandroidbrowser.pngThis is the image used for the default WebKit browser used on Android devices (which otherwise is detected as Mobile Safari).
MSIE v7 and v8msie7.pngThis image replaces the default "msie.png" image used for MSIE browsers version 7.x or 8.x.
MSIE v9 and upmsie9.pngThis image replaces the default "msie.png" image for MSIE browsers version 9.x or higher.
Sony Webkit Browsersonywebkitbrowser.pngThis image represents the browser that is used by the PlayStation 4 console.


Finally, there are five other optional images that show the layout engine the browser uses (if it is detected or otherwise known). If any of these images are missing, they will be replaced with your "missing.png" image or the default image stretched or shrunk to yourtheme's image dimension, based on the "Missing:" line in your "theme.txt" file. These images are as follows:

Image TypeImage NameInformation
Webkit Layout Enginewebkit.pngAn image to identify the Webkit layout engine.
KHTML Layout Enginekhtml.pngAn image to indentify the KHTML layout engine.
Gecko Layout Enginegecko.pngAn image to identify the Gecko layout engine.
Presto Layout Enginepresto.pngAn image to indentify the Presto layout engine.
Trident/Tasman Layout Enginetrident.pngAn image to identify the Trident/Tasman layout engine.


Once you have created your theme, put it in an archive (preferably .zip) and attach it to an email to geoffrey@mobius-design.net. Be sure to include a short description in the email. Also, attach an image (no bigger than 100x50, or I will resize it) that shows some of the images in your theme (I would suggest showing the Windows 7, Mac OSX, Unspecified Linux, Firefox, MSIE, and Safari images, at least).



Powered by PivotX - 2.3.10 Gravatars: Globally Recognized Avatars XML: RSS Feed XML: Atom Feed
Valid XHTML 1.0 Transitional Valid CSS 2.1
© MMX Möbius HTML Design Möbius HTML Design
Möbius Hosting Services Möbius Hosting Services