Editing Skins

Jump to: navigation, search

Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
{{articles}}
 
{{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".  
+
Skins are basically all saved preferences from a user represented by a (Hex-)string of 32 letters (a..f) and ciphers.  
  
 
== Adding Skins ==
 
== Adding Skins ==
 +
 
These are the steps needed to create a skin for Mibbit.
 
These are the steps needed to create a skin for Mibbit.
  
===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 etc in "Create your chat widget" (and remember them!), click [Create an account]
+
# Go to http://mibbit.com/chat/ (for your special widget skin)
# Enter your email address etc in "My Account" (in case you forget your pw we can send it there)
+
# Register as, e.g., "skinMyName" (remember your pw!)
# 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]])
+
# Open the "Prefs" page
# Optionally click the "Skins" link and load an external skin (an example or from another widget id, the main client uses a different database)
+
# Optionally load an external skin through the "Load A Skin" button near the "Save and Close" button.
# Open the "Preferences" page and modify colours and other settings, click ['''Save all changes'''] (no need to reload the manager)
+
# Modify colors and other settings
# Open or reload your widget to see the effect of your changes
+
# Copy the '''id''' (2nd line, which follows "id=") and click ['''Save''' and close]
 +
# Use the id (from the "Prefs" page) for your own skin in the widget's [[Uri_parameters | uri]] "&settings=" or in the [http://mibbit.com/widget.html Widget-Creator]
  
See also [[Uri parameters]].
+
example: http://embed.mibbit.com/?settings=c76462e5055bace06e32d325963b39f2&... ("grayish style").
  
 
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 main/full blown Client===
+
=== For the full Client ===
# Go to http://chat.mibbit.com/
+
 
# Create an account or Login (if you have not done so already)
+
# Go to https://www.mibbit.com/chat/ (for daily use)
 +
# Register or login (if you have not done so already)
 
# Open the "Prefs" page
 
# Open the "Prefs" page
 +
# Optionally load an external skin through the "Load A Skin" button near the "Save and Close" button.
 
# 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.
  
{{notice|Some settings (like "Auto away ...") require a reload to take effect, others (like ...width) need a "/clear".}}
+
Note: some settings (like "Auto away ...") require a reload to take effect, others (like ...width) need a "/clear".
 +
 
 +
=== Tools ===
  
===Tools===
+
Any tools that are useful for creating a skin shall be listed here.
Any tools that are useful for creating a customized skin shall be listed here.
 
  
*A tool for selecting '''color''' valueshttp://www.colorpicker.com/
+
*The GUI widget code creator.[http://mibbit.com/widget.html] (not especially skin related though)
*A tool for helping find '''gradients''':  http://meyerweb.com/eric/tools/color-blend/
+
*A tool for selecting color values.[http://www.colorpicker.com/]
*The GUI '''widget''' skin creator:  http://widgetmanager.mibbit.com/
+
*A tool for helping find gradients.[http://meyerweb.com/eric/tools/color-blend/]
  
 
== 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.
  
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).
+
=== Clean Blue ===
  
=== Large Fonts ===
+
*Settings ID:  '''40d4f6c76550fbd0daaf419a85b2e1e6'''
*Settings ID:  '''6492d2ae4202ac1030e71173a51e488f'''
+
*Creator: mibbit/Axod (Same person)
*Description: Default settings before any changes are applied with the addition of larger fonts throughout.
 
*Image: [[Image:mibbit prefs large.png|650px]]
 
*Creator: molkmin
 
  
=== Default ===
+
[[Image:blue.png]]
*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:  [[Image:mibbit prefs default.png|650px]]
 
*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: [[Image:Mibbit prefs basic black.png|650px]]
 
*Creator:  unixbro
 
  
===Clean Blue===
+
=== Nice Textures ===
*Settings ID:  '''40d4f6c76550fbd0daaf419a85b2e1e6'''
 
*Image: [[Image:Mibbit prefs clean blue.png|650px]]
 
*Creator:  mibbit/Axod
 
  
===Nice Textures===
 
 
*Settings ID:  '''22041f31cac0adf2d1959cdc21aed853'''
 
*Settings ID:  '''22041f31cac0adf2d1959cdc21aed853'''
*Image: [[Image:Mibbit prefs textures.png|650px]]
+
[[Image:skin2.png]]
 +
 
 +
=== Pastel Blue ===
  
===Pastel Blue===
+
*Settings ID:  '''90772f4b0ed9e9fc1e4ae12bc47e6c66'''
*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:Mibbit prefs pastel blue.png|650px]]
+
*Image[http://wiki.mibbit.com/images/3/37/MibbitSkin.PNG]:  Not shown here for size reasons.
 
*Creator:  Havvy
 
*Creator:  Havvy
  
=== Phoenix ===
+
=== PortableApps.com (Red) ===
*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: [[Image:Mibbit prefs phoenix.png|650px]]
 
*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: [[Image:Mibbit prefs pink.png|650px]]
 
*Creator:  unixbro
 
  
===PortableApps.com (Red)===
 
 
*Settings ID:  '''3627414e3771f9250fce659187969141'''
 
*Settings ID:  '''3627414e3771f9250fce659187969141'''
*Description:  Portable Apps theme
+
*Description:  Has pictures in it, and
*Image: [[Image:Mibbit prefs portable apps.png|650px]]
+
*Image[http://wiki.mibbit.com/images/6/6b/Skin_PortableApps.png] Not shown for size reasons.
 
*Creator:  Chris Morgan
 
*Creator:  Chris Morgan
 +
** needs to be debugged (e.g. users vanishing when hovered)
  
=== Red ===
+
=== Simple Text ===
*Settings ID:  '''29fdcba523719e5c15e2df228ac6456a'''
 
*Description:  This is a red theme requested by the members on my website. I hope you enjoy using this theme.
 
*Image: [[Image:Mibbit prefs red.png|650px]]
 
*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: [[Image:mibbit prefs purple.png|650px]]
 
*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: [[Image:Mibbit prefs sandstorm.png|650px]]
 
*Creator:  unixbro
 
  
===Simple Text===
 
 
*Settings ID:  '''1529ea977baeb4471a913b48465ca96e'''
 
*Settings ID:  '''1529ea977baeb4471a913b48465ca96e'''
*Description:  Basic light blue theme with slightly larger fonts with channel tabs on the left side.
+
*Description:  Has simple colors with it.  Greenish-Gray theme.
*Image: [[Image:Mibbit prefs basic.png|650px]]
+
*Image:[http://wiki.mibbit.com/images/1/12/TalkBack.png] Not shown for size reasons.
 
*Creator:  molkmin
 
*Creator:  molkmin
  
===Galava===
+
=== Galava ===
 +
 
 
*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:Mibbit prefs galava.png|650px]]
+
*Image: None Uploaded
 
*Creator:  Havvy
 
*Creator:  Havvy
  
===Rathalos===
+
=== KGS Network ===
*Settings ID:  '''eea994908812991289a6478e2c12366f'''
 
*Description:  Minimalistic red/dark theme.
 
*Image: [[Image:Mibbit prefs darkred.png|650px]]
 
*Creator:  Andra - MonsterHunterFreedom2.com
 
 
 
===Hordes Skin===
 
*Settings ID:  '''cbcf3df6852520be320feacf5c8d4e49'''
 
*Description:  a theme with the colors of the game "hordes"
 
*Image: [[Image:mibbit prefs hordes.png|650px]]
 
*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
 
  
 +
*Settings ID:  '''2629f7cf876735e197d9752bc27b15cd'''
 +
*Description:  Made to imitate Xat Flash Client at the KGS Network website.  Very dark, and currently incomplete.  Hopefully it'll be used.
 +
*Image:  None Uploaded
 +
*Creator:  Havvy
  
===Aperture Science Theme===
+
[[Category:Preferences]]
*Settings ID: '''1f9ce5440d5895cfc437036a7c45b14c'''
+
[[Category:How To]]
*Description: A theme straight from the Aperture Science Labs.
+
[[Category:Lists]]
*Image: [[image:Aperture1.jpg|650px]]
+
[[Category:Widget]]
*Notes: ''This theme may still have some bugs in it''
+
{{articles}} <!-- this is the nav bar -->
*Version: 1.0
 
*Creator: SuperFast_Oz
 

Hey there. Thanks for contributing to the documentation for Mibbit. We hope you'll stick around. Just to let you know, that, by adding your ideas, you are releasing them under the $2. If you don't want your edits to be edited and redistributed mercilessly, then don't submit it here. You need to also make sure that you wrote this yourself. Please don't submit copyrighted work here. It causes headaches for us at Mibbit HQ.

Cancel Editing help (opens in new window)