Difference between revisions of "Skins"
(other domains too) |
(→For the main/full blown Client: no "load skin" any more) |
||
(65 intermediate revisions by 10 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
− | |||
{{articles}} | {{articles}} | ||
− | |||
{{widget}} | {{widget}} | ||
{{RightTOC}} | {{RightTOC}} | ||
− | + | A '''Skin''' is a collection of saved preferences (like colors, fonts etc) which may be assigned to your client. Skin definitions are identified by an ID with a format similar to "5d97d370a6e3c9694b10f0db3b50c122". | |
== Adding Skins == | == Adding Skins == | ||
Line 13: | Line 8: | ||
===For the Widget=== | ===For the Widget=== | ||
− | # | + | # Open the [http://widgetmanager.mibbit.com/ Widget-Manager] in a new tab or window (right-click) to create/edit your special widget skin |
− | # Fill username, password in "Create | + | # Fill username, password etc in "Create your chat widget" (and remember them!), click [Create an account] |
− | # Open the " | + | # Enter your email address etc in "My Account" (in case you forget your pw we can send it there) |
− | # Optionally click the "Skins" | + | # Open the "Settings" page, edit server and #channel and copy & paste the created code into your webpage (see [[Widget#Linking_Through_Iframe|iframe]] or [[Widget#Linking_Through_Popup|popup]]) |
− | + | # Optionally click the "Skins" link and load an external skin (an example or from another widget id, the main client uses a different database) | |
− | # Open | + | # Open the "Preferences" page and modify colours and other settings, click ['''Save all changes'''] (no need to reload the manager) |
− | + | # Open or reload your widget to see the effect of your changes | |
− | + | See also [[Uri parameters]]. | |
− | |||
− | See also | ||
Make sure that if you publish it, not to have any private info in it (like a password in an alias)! | Make sure that if you publish it, not to have any private info in it (like a password in an alias)! | ||
− | ===For the full Client=== | + | ===For the main/full blown Client=== |
− | # Go to | + | # Go to http://chat.mibbit.com/ |
# Create an account or Login (if you have not done so already) | # Create an account or Login (if you have not done so already) | ||
# Open the "Prefs" page | # Open the "Prefs" page | ||
− | |||
# Modify colors and other settings to your liking. | # Modify colors and other settings to your liking. | ||
# Click the "Save and Close" button. | # Click the "Save and Close" button. | ||
Line 42: | Line 34: | ||
*A tool for selecting '''color''' values: http://www.colorpicker.com/ | *A tool for selecting '''color''' values: http://www.colorpicker.com/ | ||
*A tool for helping find '''gradients''': http://meyerweb.com/eric/tools/color-blend/ | *A tool for helping find '''gradients''': http://meyerweb.com/eric/tools/color-blend/ | ||
− | *The GUI '''widget''' skin creator: http:// | + | *The GUI '''widget''' skin creator: http://widgetmanager.mibbit.com/ |
== List of Skins == | == List of Skins == | ||
+ | Note: Don't use those setting IDs directly on your page, create your own account and '''import''' the skin you like instead. Otherwise you won't have control over it (special [[Alias|aliases]], later changes etc.) | ||
+ | |||
+ | |||
Feel free to add your own skins to this list. Just make sure that they are different enough these skins below. Please keep the list alphabetized. Note: at the moment main and widget use different databases (will perhaps be merged later). | Feel free to add your own skins to this list. Just make sure that they are different enough these skins below. Please keep the list alphabetized. Note: at the moment main and widget use different databases (will perhaps be merged later). | ||
Line 50: | Line 45: | ||
*Settings ID: '''6492d2ae4202ac1030e71173a51e488f''' | *Settings ID: '''6492d2ae4202ac1030e71173a51e488f''' | ||
*Description: Default settings before any changes are applied with the addition of larger fonts throughout. | *Description: Default settings before any changes are applied with the addition of larger fonts throughout. | ||
− | *Image: [[Image: | + | *Image: [[Image:mibbit prefs large.png|650px]] |
*Creator: molkmin | *Creator: molkmin | ||
Line 56: | Line 51: | ||
*Settings ID: '''ad9539b735c13c87bd3c86b2a52cadf0''' | *Settings ID: '''ad9539b735c13c87bd3c86b2a52cadf0''' | ||
*Description: The default settings before any changes are applied. To reset your custom prefs back to the default, you may use the "Reset all to defaults" button at the bottom of the preference edit page. | *Description: The default settings before any changes are applied. To reset your custom prefs back to the default, you may use the "Reset all to defaults" button at the bottom of the preference edit page. | ||
− | *Image: [[Image: | + | *Image: [[Image:mibbit prefs default.png|650px]] |
*Creator: molkmin | *Creator: molkmin | ||
+ | |||
+ | === Dubstep.fm === | ||
+ | *Settings ID: '''d6f6dc735592bbda696f4d12074ae17b''' | ||
+ | *Description: A clean and sleek skin based off the color scheme off the Dubstep Internet Radio Station, Dubstep.fm | ||
+ | *Image: http://www.dubstep.fm/images/dubstepfm_mibbit_skin.png | ||
+ | *Creator: DopeLabs / Dubstep.fm | ||
=== Black === | === Black === | ||
*Settings ID: '''a36fc852e105e579011f7589c14222f4''' | *Settings ID: '''a36fc852e105e579011f7589c14222f4''' | ||
*Description: This is a Black theme requested by some members on my website. I hope you enjoy using this theme. | *Description: This is a Black theme requested by some members on my website. I hope you enjoy using this theme. | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs basic black.png|650px]] |
*Creator: unixbro | *Creator: unixbro | ||
===Clean Blue=== | ===Clean Blue=== | ||
*Settings ID: '''40d4f6c76550fbd0daaf419a85b2e1e6''' | *Settings ID: '''40d4f6c76550fbd0daaf419a85b2e1e6''' | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs clean blue.png|650px]] |
*Creator: mibbit/Axod | *Creator: mibbit/Axod | ||
===Nice Textures=== | ===Nice Textures=== | ||
− | *Settings ID: '''22041f31cac0adf2d1959cdc21aed853''' | + | *Settings ID: '''22041f31cac0adf2d1959cdc21aed853''' |
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs textures.png|650px]] |
===Pastel Blue=== | ===Pastel Blue=== | ||
*Settings ID: '''90772f4b0ed9e9fc1e4ae12bc47e6c66''' (main only) | *Settings ID: '''90772f4b0ed9e9fc1e4ae12bc47e6c66''' (main only) | ||
*Description: The image is for the most part, accurate, but changes have been made since then. It incorporates a color closer to blue but between blue and purple to give a smooth and less distracting then white background. | *Description: The image is for the most part, accurate, but changes have been made since then. It incorporates a color closer to blue but between blue and purple to give a smooth and less distracting then white background. | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs pastel blue.png|650px]] |
*Creator: Havvy | *Creator: Havvy | ||
Line 83: | Line 84: | ||
*Settings ID: '''e79edf341a7291ae57738feff858bc16''' | *Settings ID: '''e79edf341a7291ae57738feff858bc16''' | ||
*Description: This is a Phoenix theme requested by the members on my website. I hope you enjoy using this theme. If you use the PHP-Fusion Phoenix theme this skin is for you. | *Description: This is a Phoenix theme requested by the members on my website. I hope you enjoy using this theme. If you use the PHP-Fusion Phoenix theme this skin is for you. | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs phoenix.png|650px]] |
*Creator: unixbro | *Creator: unixbro | ||
Line 89: | Line 90: | ||
*Settings ID: '''5d97d370a6e3c9694b10f0db3b50c122''' | *Settings ID: '''5d97d370a6e3c9694b10f0db3b50c122''' | ||
*Description: This is a pink theme requested by the ladies on my website. I hope you enjoy using this theme. | *Description: This is a pink theme requested by the ladies on my website. I hope you enjoy using this theme. | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs pink.png|650px]] |
*Creator: unixbro | *Creator: unixbro | ||
Line 95: | Line 96: | ||
*Settings ID: '''3627414e3771f9250fce659187969141''' | *Settings ID: '''3627414e3771f9250fce659187969141''' | ||
*Description: Portable Apps theme | *Description: Portable Apps theme | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs portable apps.png|650px]] |
*Creator: Chris Morgan | *Creator: Chris Morgan | ||
Line 101: | Line 102: | ||
*Settings ID: '''29fdcba523719e5c15e2df228ac6456a''' | *Settings ID: '''29fdcba523719e5c15e2df228ac6456a''' | ||
*Description: This is a red theme requested by the members on my website. I hope you enjoy using this theme. | *Description: This is a red theme requested by the members on my website. I hope you enjoy using this theme. | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs red.png|650px]] |
*Creator: unixbro | *Creator: unixbro | ||
Line 107: | Line 108: | ||
*Settings ID: '''e04a79313c47f155f346aa1b25615a06''' | *Settings ID: '''e04a79313c47f155f346aa1b25615a06''' | ||
*Description: This is a light lavender purple and light blue theme. I hope you enjoy using this theme. | *Description: This is a light lavender purple and light blue theme. I hope you enjoy using this theme. | ||
− | *Image: [[Image: | + | *Image: [[Image:mibbit prefs purple.png|650px]] |
*Creator: Ruth | *Creator: Ruth | ||
Line 113: | Line 114: | ||
*Settings ID: '''e45b6397f1cdd3f1e3db04091b842551''' | *Settings ID: '''e45b6397f1cdd3f1e3db04091b842551''' | ||
*Description: This is a sandstorm theme requested by the members on my website. I hope you enjoy using this theme. | *Description: This is a sandstorm theme requested by the members on my website. I hope you enjoy using this theme. | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs sandstorm.png|650px]] |
*Creator: unixbro | *Creator: unixbro | ||
Line 119: | Line 120: | ||
*Settings ID: '''1529ea977baeb4471a913b48465ca96e''' | *Settings ID: '''1529ea977baeb4471a913b48465ca96e''' | ||
*Description: Basic light blue theme with slightly larger fonts with channel tabs on the left side. | *Description: Basic light blue theme with slightly larger fonts with channel tabs on the left side. | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs basic.png|650px]] |
*Creator: molkmin | *Creator: molkmin | ||
Line 125: | Line 126: | ||
*Settings ID: '''17298af2d1a0148d2fd19b8a7d93879d''' | *Settings ID: '''17298af2d1a0148d2fd19b8a7d93879d''' | ||
*Description: Brownish colors to go along with the color scheme of Galava.net | *Description: Brownish colors to go along with the color scheme of Galava.net | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs galava.png|650px]] |
*Creator: Havvy | *Creator: Havvy | ||
Line 131: | Line 132: | ||
*Settings ID: '''eea994908812991289a6478e2c12366f''' | *Settings ID: '''eea994908812991289a6478e2c12366f''' | ||
*Description: Minimalistic red/dark theme. | *Description: Minimalistic red/dark theme. | ||
− | *Image: [[Image: | + | *Image: [[Image:Mibbit prefs darkred.png|650px]] |
*Creator: Andra - MonsterHunterFreedom2.com | *Creator: Andra - MonsterHunterFreedom2.com | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
===Hordes Skin=== | ===Hordes Skin=== | ||
*Settings ID: '''cbcf3df6852520be320feacf5c8d4e49''' | *Settings ID: '''cbcf3df6852520be320feacf5c8d4e49''' | ||
*Description: a theme with the colors of the game "hordes" | *Description: a theme with the colors of the game "hordes" | ||
− | *Image: [[Image: | + | *Image: [[Image:mibbit prefs hordes.png|650px]] |
*Creator: renard7 | *Creator: renard7 | ||
− | [[ | + | |
− | [[ | + | ===Autumn Theme=== |
− | + | *Settings ID: '''c106102763aac9ebcc06fa3a83b4eee0''' | |
− | + | *Description: Has an autumn feel to it, very relaxing. The backgrounds and texts are much easier on your eyes especially if you are sitting in the dark. Please enjoy this skin. | |
+ | *Image: [[File:Toucan-autumn-theme.png|650px]] | ||
+ | *Creator: Toucan | ||
+ | |||
+ | |||
+ | ===Aperture Science Theme=== | ||
+ | *Settings ID: '''1f9ce5440d5895cfc437036a7c45b14c''' | ||
+ | *Description: A theme straight from the Aperture Science Labs. | ||
+ | *Image: [[image:Aperture1.jpg|650px]] | ||
+ | *Notes: ''This theme may still have some bugs in it'' | ||
+ | *Version: 1.0 | ||
+ | *Creator: SuperFast_Oz |
Latest revision as of 22:01, 21 December 2013
Wiki Home | FAQ | Features | IRC Commands | IRC Modes | Widget Information | Widget: WebIRC Server Setup | URI Parameters | Wish List | Registration Information | Mibbit Staff |
Home | Quick Start Guide | Live Mibbit Help
A Skin is a collection of saved preferences (like colors, fonts etc) which may be assigned to your client. Skin definitions are identified by an ID with a format similar to "5d97d370a6e3c9694b10f0db3b50c122".
Adding Skins
These are the steps needed to create a skin for Mibbit.
For the Widget
- Open the Widget-Manager in a new tab or window (right-click) to create/edit your special widget skin
- Fill username, password etc in "Create your chat widget" (and remember them!), click [Create an account]
- Enter your email address etc in "My Account" (in case you forget your pw we can send it there)
- Open the "Settings" page, edit server and #channel and copy & paste the created code into your webpage (see iframe or popup)
- Optionally click the "Skins" link and load an external skin (an example or from another widget id, the main client uses a different database)
- Open the "Preferences" page and modify colours and other settings, click [Save all changes] (no need to reload the manager)
- Open or reload your widget to see the effect of your changes
See also Uri parameters.
Make sure that if you publish it, not to have any private info in it (like a password in an alias)!
For the main/full blown Client
- Go to http://chat.mibbit.com/
- Create an account or Login (if you have not done so already)
- Open the "Prefs" page
- Modify colors and other settings to your liking.
- Click the "Save and Close" button.
Some settings (like "Auto away ...") require a reload to take effect, others (like ...width) need a "/clear". |
Tools
Any tools that are useful for creating a customized skin shall be listed here.
- A tool for selecting color values: http://www.colorpicker.com/
- A tool for helping find gradients: http://meyerweb.com/eric/tools/color-blend/
- The GUI widget skin creator: http://widgetmanager.mibbit.com/
List of Skins
Note: Don't use those setting IDs directly on your page, create your own account and import the skin you like instead. Otherwise you won't have control over it (special aliases, later changes etc.)
Feel free to add your own skins to this list. Just make sure that they are different enough these skins below. Please keep the list alphabetized. Note: at the moment main and widget use different databases (will perhaps be merged later).
Large Fonts
- Settings ID: 6492d2ae4202ac1030e71173a51e488f
- Description: Default settings before any changes are applied with the addition of larger fonts throughout.
- Image:
- Creator: molkmin
Default
- Settings ID: ad9539b735c13c87bd3c86b2a52cadf0
- Description: The default settings before any changes are applied. To reset your custom prefs back to the default, you may use the "Reset all to defaults" button at the bottom of the preference edit page.
- Image:
- Creator: molkmin
Dubstep.fm
- Settings ID: d6f6dc735592bbda696f4d12074ae17b
- Description: A clean and sleek skin based off the color scheme off the Dubstep Internet Radio Station, Dubstep.fm
- Image: http://www.dubstep.fm/images/dubstepfm_mibbit_skin.png
- Creator: DopeLabs / Dubstep.fm
Black
- Settings ID: a36fc852e105e579011f7589c14222f4
- Description: This is a Black theme requested by some members on my website. I hope you enjoy using this theme.
- Image:
- Creator: unixbro
Clean Blue
Nice Textures
Pastel Blue
- Settings ID: 90772f4b0ed9e9fc1e4ae12bc47e6c66 (main only)
- Description: The image is for the most part, accurate, but changes have been made since then. It incorporates a color closer to blue but between blue and purple to give a smooth and less distracting then white background.
- Image:
- Creator: Havvy
Phoenix
- Settings ID: e79edf341a7291ae57738feff858bc16
- Description: This is a Phoenix theme requested by the members on my website. I hope you enjoy using this theme. If you use the PHP-Fusion Phoenix theme this skin is for you.
- Image:
- Creator: unixbro
Pink
- Settings ID: 5d97d370a6e3c9694b10f0db3b50c122
- Description: This is a pink theme requested by the ladies on my website. I hope you enjoy using this theme.
- Image:
- Creator: unixbro
PortableApps.com (Red)
- Settings ID: 3627414e3771f9250fce659187969141
- Description: Portable Apps theme
- Image:
- Creator: Chris Morgan
Red
- Settings ID: 29fdcba523719e5c15e2df228ac6456a
- Description: This is a red theme requested by the members on my website. I hope you enjoy using this theme.
- Image:
- Creator: unixbro
Relaxing Purple Pathos
- Settings ID: e04a79313c47f155f346aa1b25615a06
- Description: This is a light lavender purple and light blue theme. I hope you enjoy using this theme.
- Image:
- Creator: Ruth
Sandstorm
- Settings ID: e45b6397f1cdd3f1e3db04091b842551
- Description: This is a sandstorm theme requested by the members on my website. I hope you enjoy using this theme.
- Image:
- Creator: unixbro
Simple Text
- Settings ID: 1529ea977baeb4471a913b48465ca96e
- Description: Basic light blue theme with slightly larger fonts with channel tabs on the left side.
- Image:
- Creator: molkmin
Galava
- Settings ID: 17298af2d1a0148d2fd19b8a7d93879d
- Description: Brownish colors to go along with the color scheme of Galava.net
- Image:
- Creator: Havvy
Rathalos
- Settings ID: eea994908812991289a6478e2c12366f
- Description: Minimalistic red/dark theme.
- Image: File:Mibbit prefs darkred.png
- Creator: Andra - MonsterHunterFreedom2.com
Hordes Skin
- Settings ID: cbcf3df6852520be320feacf5c8d4e49
- Description: a theme with the colors of the game "hordes"
- Image:
- Creator: renard7
Autumn Theme
- Settings ID: c106102763aac9ebcc06fa3a83b4eee0
- Description: Has an autumn feel to it, very relaxing. The backgrounds and texts are much easier on your eyes especially if you are sitting in the dark. Please enjoy this skin.
- Image:
- Creator: Toucan