Difference between revisions of "Skins"

From Mibbit Wiki
Jump to: navigation, search
(Made some changes regarding the changes to the widget.)
(new howto)
Line 7: Line 7:
  
 
===For the Widget===
 
===For the Widget===
# Go to [http://widget.mibbit.com/manager/ Widget-Manager] (for your special widget skin)
+
# Go to [http://widget.mibbit.com/manager/ Widget-Manager] (to create your special widget skin)
# Register as, e.g., "skinMyName" (remember your pw!)
+
# Fill username, password in "Create a new chat widget", write them down and keep it safe, click [Register]
 
# Open the "Prefs" page
 
# Open the "Prefs" page
# Optionally (reset and) load an external skin through the "Load A Skin" button near the "Save and Close" button.
+
# Optionally (reset and) load an external skin through the "Load A Skin" button near the "Save and Close" button. Note: only settings created by the new Widget-Manager can be loaded.
# Modify colors and other settings
+
# Modify colors and other settings, click ['''Save''' and close]
# Copy the '''id''' (2nd line, which follows "id=") and click ['''Save''' and close]
+
# Open "Preview", choose the parameters, click the generated widget link for a preview in a new window/tab
# 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]
+
# Copy & paste the link into your web-page (as [[Widget#Use_the_Widget_in_an_Iframe|iframe]] or [[Widget#Use_the_Widget_in_a_Popup|popup]])
 +
 
 +
example: http://widget.mibbit.com/?settings=42c110f3cbbaea489c0b0e40a40e6e18&... ("simple style").
  
example: http://widget.mibbit.com/?settings=c76462e5055bace06e32d325963b39f2&... ("grayish style").
+
See [[Uri_parameters]] for the meanings of the values.
  
 
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)!
Line 32: Line 34:
 
Any tools that are useful for creating a skin shall be listed here.
 
Any tools that are useful for creating a skin shall be listed here.
  
*The GUI widget code creator.[http://mibbit.com/widget.html] (not especially skin related though)
+
*The '''new''' GUI widget code creator.[http://widget.mibbit.com/manager/]  
 
*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/]
  
== List of Skins ==
+
== List of OLD Skins (don't work with widget.mibbit.com) ==
 
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.
  

Revision as of 13:06, 26 November 2008

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


Skins are basically all saved preferences from a user represented by a (Hex-)string of 32 letters (a..f) and ciphers.

Adding Skins

These are the steps needed to create a skin for Mibbit.

For the Widget

  1. Go to Widget-Manager (to create your special widget skin)
  2. Fill username, password in "Create a new chat widget", write them down and keep it safe, click [Register]
  3. Open the "Prefs" page
  4. Optionally (reset and) load an external skin through the "Load A Skin" button near the "Save and Close" button. Note: only settings created by the new Widget-Manager can be loaded.
  5. Modify colors and other settings, click [Save and close]
  6. Open "Preview", choose the parameters, click the generated widget link for a preview in a new window/tab
  7. Copy & paste the link into your web-page (as iframe or popup)

example: http://widget.mibbit.com/?settings=42c110f3cbbaea489c0b0e40a40e6e18&... ("simple style").

See Uri_parameters for the meanings of the values.

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

  1. Go to https://www.mibbit.com/chat/ (for daily use)
  2. Register or login (if you have not done so already)
  3. Open the "Prefs" page
  4. Optionally (reset and) load an external skin through the "Load A Skin" button near the "Save and Close" button.
  5. Modify colors and other settings to your liking.
  6. Click the "Save and Close" button.

Note: 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 skin shall be listed here.

  • The new GUI widget code creator.[1]
  • A tool for selecting color values.[2]
  • A tool for helping find gradients.[3]

List of OLD Skins (don't work with widget.mibbit.com)

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.

Black

  • Settings ID: a36fc852e105e579011f7589c14222f4
  • Description: This is a Black theme requested by some members on my website. I hope you enjoy using this theme.

Black Theme

  • Creator: unixbro


Clean Blue

  • Settings ID: 40d4f6c76550fbd0daaf419a85b2e1e6
  • Creator: mibbit/Axod (Same person)

Blue.png


Nice Textures

  • Settings ID: 22041f31cac0adf2d1959cdc21aed853

Skin2.png

Pastel Blue

  • Settings ID: 90772f4b0ed9e9fc1e4ae12bc47e6c66
  • 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.

MibbitSkin.PNG

  • 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.

Pheonix Theme

  • 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.

Pink Theme

  • Creator: unixbro

PortableApps.com (Red)

  • Settings ID: 3627414e3771f9250fce659187969141
  • Description: Has pictures in it, and

PortableApps

  • Creator: Chris Morgan
    • needs to be debugged (e.g. users vanishing when hovered)

Red

  • Settings ID: 29fdcba523719e5c15e2df228ac6456a
  • Description: This is a red theme requested by the members on my website. I hope you enjoy using this theme.

Red Theme

  • Creator: unixbro


Sandstorm

  • Settings ID: e45b6397f1cdd3f1e3db04091b842551
  • Description: This is a sandstorm theme requested by the members on my website. I hope you enjoy using this theme.

Sandstorm Theme

  • Creator: unixbro

Simple Text

  • Settings ID: 1529ea977baeb4471a913b48465ca96e
  • Description: Has simple colors with it. Greenish-Gray theme.

Talkback

  • Creator: molkmin

Galava

  • Settings ID: 17298af2d1a0148d2fd19b8a7d93879d
  • Description: Brownish colors to go along with the color scheme of Galava.net
  • Image: None Uploaded
  • Creator: Havvy

KGS Network

  • 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