Difference between revisions of "Themes"

From XMBdocs
(Created page with "{{toc numerate=1}} ===Creating New Themes=== This is a brief outline on how to create a new theme in XMB forums. This is offered up as an explanation of the different fields...")
 
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{toc numerate=1}}
+
==Creating New Themes==
 
 
===Creating New Themes===
 
  
 
This is a brief outline on how to create a new theme in XMB forums. This is offered up as an explanation of the different fields required in the theme
 
This is a brief outline on how to create a new theme in XMB forums. This is offered up as an explanation of the different fields required in the theme
Line 7: Line 5:
 
experience will be the final steps to creating good XMB themes.
 
experience will be the final steps to creating good XMB themes.
  
====Number / Names of the Fields====
+
===Number / Names of the Fields===
 
XMB themes are composed of 21 variables represented by 21 fields, in the Admin Panel / Themes - Details, that the user fills in with the the desired
 
XMB themes are composed of 21 variables represented by 21 fields, in the Admin Panel / Themes - Details, that the user fills in with the the desired
 
colors/sizes/images:
 
colors/sizes/images:
  
1 Name field
+
1 Name field<br />
12 Color fields (3 of these fields can use images for the color variable)
+
12 Color fields (3 of these fields can use images for the color variable)<br />
2 Font size/type fields
+
2 Font size/type fields<br />
2 Directory designations
+
2 Directory designations<br />
1 Main site logo
+
1 Main site logo<br />
 
3 HTML layout variables
 
3 HTML layout variables
  
====Notes====
+
===Notes===
  
  1. All FIELDS MUST BE FILLED - not doing so causes problems!
+
# All FIELDS MUST BE FILLED - not doing so causes problems!
  1. It's best not to alter the existing themes, leave those as is and start a new one. We'll be going over how to do that. While the existing themes can be re-installed it can be problematic if the deleted theme is the default theme - or if any members were using that theme.
+
# It's best not to alter the existing themes, leave those as is and start a new one. We'll be going over how to do that. While the existing themes can be re-installed it can be problematic if the deleted theme is the default theme - or if any members were using that theme.
  1. Never use an apostrophe ( ' ) in the theme name!! Never! This causes all kinds of grief.  You may want to "personalize" your theme by naming it "Handy Andy's Theme". Don't do it - find another way of showing the author/object of the theme.  I've also seen some problems arise with other special characters used in the "Name" field so avoid trouble by keeping it simple.
+
# Never use an apostrophe ( ' ) in the theme name!! Never! This causes all kinds of grief.  You may want to "personalize" your theme by naming it "Handy Andy's Theme". Don't do it - find another way of showing the author/object of the theme.  I've also seen some problems arise with other special characters used in the "Name" field so avoid trouble by keeping it simple.
  1. When creating new themes, or modifying existing themes always use the "#" prefix with your color codes.  Example: use #ff0000 not ff0000- the reason for this is that while most of you probably surf the web using Internet Explorer or similar browsers (browsers using the IE engine) you would never know that your themes are not being displayed in the "Gecko" browsers (Netscape, Mozilla, Firebird).  Without getting too technical .... IE is much more forgiving of the omission of the "#" while the Gecko browsers won't tolerate the same omission. And while the majority of your members may use Interent Explorer... who wants that rogue Mozilla user, who happens by, thinking you must be devoid of any creative talents
+
# When creating new themes, or modifying existing themes always use the "#" prefix with your color codes.  Example: use #ff0000 not ff0000- the reason for this is that while most of you probably surf the web using Internet Explorer or similar browsers (browsers using the IE engine) you would never know that your themes are not being displayed in the "Gecko" browsers (Netscape, Mozilla, Firebird).  Without getting too technical .... IE is much more forgiving of the omission of the "#" while the Gecko browsers won't tolerate the same omission. And while the majority of your members may use Interent Explorer... who wants that rogue Mozilla user, who happens by, thinking you must be devoid of any creative talents
  1. If you go to the Administration Panel / Themes page and click on any of the existing theme's "Details" link you will see how that theme is constructed. It's a good idea to do this to familiarize yourself with the layout and theme components.
+
# If you go to the Administration Panel / Themes page and click on any of the existing theme's "Details" link you will see how that theme is constructed. It's a good idea to do this to familiarize yourself with the layout and theme components.
  
====Let's start a new theme====
+
===Let's start a new theme===
  
Go to Administration Panel / Themes
+
Go to Administration Panel / Themes<br />
Here you will see a list of all of the installed themes for your forum.
+
Here you will see a list of all of the installed themes for your forum.<br />
At the bottom of the Theme list is a "New Theme" link - clicking this link will take you to a blank theme page that you will fill out with the
+
At the bottom of the Theme list is a "New Theme" link - clicking this link will take you to a blank theme page that you will fill out with the<br />
colors/images/specifications of your choice.
+
colors/images/specifications of your choice.<br />
 
Let's go over the fields one by one.
 
Let's go over the fields one by one.
  
====The Fields====
+
===The Fields===
  
=====Theme Name==
+
====Theme Name====
 
This is where you will title your new theme. Please remember that you should never use an apostrophe
 
This is where you will title your new theme. Please remember that you should never use an apostrophe
 
in the theme name (See Notes above).
 
in the theme name (See Notes above).
  
=====Background==
+
====Background====
 
(Enter a hex code or an image name): This is the background color or a tiling image that will be used
 
(Enter a hex code or an image name): This is the background color or a tiling image that will be used
 
on all pages. If you are confused as to exactly what this means use the "Details" of an existing theme to see how the background is used.
 
on all pages. If you are confused as to exactly what this means use the "Details" of an existing theme to see how the background is used.
 
Here are some guidelines for the use of tiling images as the background:
 
Here are some guidelines for the use of tiling images as the background:
  1. Don't use a background image that is too big. The people that visit your page don't want to wait forever for a 200K graphic just to fill the background. Many paint programs offer the means for optimizing your images within the "Save" dialog. Generally .jpg and .gif images are the best for the web.
+
# Don't use a background image that is too big. The people that visit your page don't want to wait forever for a 200K graphic just to fill the background. Many paint programs offer the means for optimizing your images within the "Save" dialog. Generally .jpg and .gif images are the best for the web.
  1. Keep the background unobtrusive. Most web page background images should be muted, so that the text of the page can be read.
+
# Keep the background unobtrusive. Most web page background images should be muted, so that the text of the page can be read.
  1. Use contrast wisely. Make sure that the text of your web page, especially links, contrast with the background image. Choose colors so that they coordinate rather than clash.
+
# Use contrast wisely. Make sure that the text of your web page, especially links, contrast with the background image. Choose colors so that they coordinate rather than clash.
  1. Avoid unsightly artifacts. Use tiling images that don't show visible seams or weird dithering effect.
+
# Avoid unsightly artifacts. Use tiling images that don't show visible seams or weird dithering effect.
  
 
TIP - The web is a great resource for locating tilable background images. Use http://www.google.com and search for "web backgrounds" or similar keywords.
 
TIP - The web is a great resource for locating tilable background images. Use http://www.google.com and search for "web backgrounds" or similar keywords.
  
=====Alternating Colour #1==
+
====Alternating Colour #1====
 
These are the colors that will be alternated in the forums. The best way to understand how this works is to use the "Details" link for one of the existing themes and observe how the 2 colors are used.
 
These are the colors that will be alternated in the forums. The best way to understand how this works is to use the "Details" link for one of the existing themes and observe how the 2 colors are used.
  
=====Alternating Colour #2==
+
====Alternating Colour #2====
 
These are the colors that will be alternated in the forums. The best way to understand how this works is to use the "Details" link for one of the existing themes and observe how the 2 colors are used.
 
These are the colors that will be alternated in the forums. The best way to understand how this works is to use the "Details" link for one of the existing themes and observe how the 2 colors are used.
  
=====Link Colour==
+
====Link Colour====
 
This sets the color all of your links will be. This includes the forum titles, navigation links,
 
This sets the color all of your links will be. This includes the forum titles, navigation links,
 
Who's Online links, etc.... This requires a color hex code; i.e. #ff0000 (red)
 
Who's Online links, etc.... This requires a color hex code; i.e. #ff0000 (red)
  
=====Border Colour==
+
====Border Colour====
 
This sets the color of the border that will surround your forum tables. This is dependent on
 
This sets the color of the border that will surround your forum tables. This is dependent on
 
Field #14 for the border width.
 
Field #14 for the border width.
  
=====Header Colour==
+
====Header Colour====
 
This is the color of the "headers" i.e. The bar across the the forums list on the index page (the
 
This is the color of the "headers" i.e. The bar across the the forums list on the index page (the
 
one that says "Forum: Topics: Posts: Last Post: ) and the header menu bar where your main links are located. There are some other instances of
 
one that says "Forum: Topics: Posts: Last Post: ) and the header menu bar where your main links are located. There are some other instances of
 
the "header" color, again I suggest using the "Details" of an existing theme to familiarize yourself with where this color will occur.
 
the "header" color, again I suggest using the "Details" of an existing theme to familiarize yourself with where this color will occur.
  
=====Header Text Color==
+
====Header Text Color====
 
This sets the color of the text used in the headers. Make sure that you use a color that will
 
This sets the color of the text used in the headers. Make sure that you use a color that will
 
be visible with Field# 7.
 
be visible with Field# 7.
  
=====Top Table Color==
+
====Top Table Color====
 
(Enter a hex code or an image name): - The top table is the area where the main logo is as well as
 
(Enter a hex code or an image name): - The top table is the area where the main logo is as well as
 
the "Last Active", "New u2u Message", and "Login / Logout links" - you may also use an image here as a background instead of a color.
 
the "Last Active", "New u2u Message", and "Login / Logout links" - you may also use an image here as a background instead of a color.
  
=====Category Color==
+
====Category Color====
 
(Enter a hex code or an image name): - the category bars are the bars above the forums when you
 
(Enter a hex code or an image name): - the category bars are the bars above the forums when you
 
create them in the Administration Panel / Forums page. You can also use an image for these.
 
create them in the Administration Panel / Forums page. You can also use an image for these.
  
=====Category Text Color==
+
====Category Text Color====
 
This sets the color of the text used in the category bars.
 
This sets the color of the text used in the category bars.
  
=====Table Text Color==
+
====Table Text Color====
 
This set the text for "forum descriptions, Who's Online key, text in the news ticker, Stats
 
This set the text for "forum descriptions, Who's Online key, text in the news ticker, Stats
 
titles, Member List numbers, Status, Date, , etc...
 
titles, Member List numbers, Status, Date, , etc...
  
=====Text Color==
+
====Text Color====
 
This sets the color of the "Posts Subjects, navagation titles, Copyright text, Last Active and
 
This sets the color of the "Posts Subjects, navagation titles, Copyright text, Last Active and
 
Welcome text, etc....
 
Welcome text, etc....
  
=====Border Width==
+
====Border Width====
 
This sets the size of the border measured in pixels. 1 being the "thinnest" and increasing
 
This sets the size of the border measured in pixels. 1 being the "thinnest" and increasing
 
proportionately with the higher number.
 
proportionately with the higher number.
  
=====Table Width==
+
====Table Width====
 
This is the over width of the forum tables - or - how wide your forums will expand across the
 
This is the over width of the forum tables - or - how wide your forums will expand across the
 
screen. This can be set in percentage (100%) or in pixels (600).
 
screen. This can be set in percentage (100%) or in pixels (600).
  
=====Table Spacing==
+
====Table Spacing====
 
This is an html table value and controls the amount of spacing between the individal cells in each
 
This is an html table value and controls the amount of spacing between the individal cells in each
 
table.
 
table.
  
=====Font==
+
====Font====
 
This field allow you to enter a font family. An example of a font family would be "Verdana" or "Comic
 
This field allow you to enter a font family. An example of a font family would be "Verdana" or "Comic
 
Sans". A note about this - whatever font you specify here will need to be installed on the user's PC or it will not display correctly - if the user
 
Sans". A note about this - whatever font you specify here will need to be installed on the user's PC or it will not display correctly - if the user
Line 111: Line 109:
 
mind it's best to keep the "Font" simple. Most systems have the Verdana or Arial font installed so it's a good choice here.
 
mind it's best to keep the "Font" simple. Most systems have the Verdana or Arial font installed so it's a good choice here.
  
=====Big Font==
+
====Big Font====
 
A bit of a misleading name - this is the "size" designation of the text, including the links. There
 
A bit of a misleading name - this is the "size" designation of the text, including the links. There
 
are few places that are not affected by this field's value; like the "Last Post" column of each forum is one example of an exception. This field will
 
are few places that are not affected by this field's value; like the "Last Post" column of each forum is one example of an exception. This field will
 
accept the desired font size in px (pixels) or pt (points) an example of each would be: 12px or 7pt.
 
accept the desired font size in px (pixels) or pt (points) an example of each would be: 12px or 7pt.
  
=====Board Logo URL==
+
====Board Logo URL====
 
This is the main forum logo, the banner located in the upper left corner of the header. If you
 
This is the main forum logo, the banner located in the upper left corner of the header. If you
 
have a custom logo you will enter the file name (example: forumlogo.gif) here. Only the file name as the directory is hard coded as the theme's image
 
have a custom logo you will enter the file name (example: forumlogo.gif) here. Only the file name as the directory is hard coded as the theme's image
Line 124: Line 122:
 
""http://www.wherever.com/avatar.swf,80,40""
 
""http://www.wherever.com/avatar.swf,80,40""
  
=====Image Directory==
+
====Image Directory====
 
Each theme must have a directory in which the images for that theme are stored. If you create a
 
Each theme must have a directory in which the images for that theme are stored. If you create a
 
new theme you will need to either: use an existing theme's image folder for the images or, if you are using "custom" images for this new theme, create
 
new theme you will need to either: use an existing theme's image folder for the images or, if you are using "custom" images for this new theme, create
Line 133: Line 131:
 
creating a new theme called "Neo" then you may want to name the new image directory "neo" as well. This is where all of the new theme's images will be
 
creating a new theme called "Neo" then you may want to name the new image directory "neo" as well. This is where all of the new theme's images will be
 
uploaded.
 
uploaded.
 +
 
NOTE: It is a good policy to always use lower case letters for all images and folders - some browsers (albeit the older ones) do not do well with
 
NOTE: It is a good policy to always use lower case letters for all images and folders - some browsers (albeit the older ones) do not do well with
 
upper case letters for file names.
 
upper case letters for file names.
  
=====Smilie Directory==
+
====Smilie Directory====
 
This is the path to the smilies folder. If you want to create a new set of smilies and have
 
This is the path to the smilies folder. If you want to create a new set of smilies and have
 
them in a different folder - you would enter this new set's folder name here. Otherwise this should be set to the default smilie folder
 
them in a different folder - you would enter this new set's folder name here. Otherwise this should be set to the default smilie folder
 
(images/smilies). See the How To on "Adding New / Additional Smilies" for info on using multiple smilie sets.
 
(images/smilies). See the How To on "Adding New / Additional Smilies" for info on using multiple smilie sets.
  
===Installing Addon Themes===
+
===Conclusion===
  1. Download the theme you like and unpack it using your favourite unpacker program such as Winzip or Winrar etc.
+
That concludes the rundown on the 21 fields required to complete a new theme. I hope this helps to explain the process a little better than the available documentation and gets you on your way to creating some great themes. :)
  1. Copy the extracted complete folder of the images etc to the forums sub-folder called "images" by ftp.
+
 
  1. Go to "Administration Panel" and click "Themes". Scroll down to the "Import Theme:" area and then click the browse button. Browse to the theme you downloaded to your hard drive and select the theme file which should already be called something like this example: ""XMB+Corporate.xmb""
+
If you find a descrepancy in the above "How To" please send me a u2u and I'll review and correct if necessary.
  1. Click the button called "Import Theme into XMB"
+
 
  1. Go to your "Control Panel" and "Edit Profile" and select the new theme from the drop down menu under Edit Profile - Options: Theme: Save your change.
+
Thanks<br />
 +
Daf
 +
==Installing Addon Themes==
 +
# Download the theme you like and unpack it using your favorite unpacker program such as Winzip or Winrar etc.
 +
# Copy the extracted complete folder of the images etc to the forums sub-folder called "images" by ftp.
 +
# Go to "Administration Panel" and click "Themes". Scroll down to the "Import Theme:" area and then click the browse button. Browse to the theme you downloaded to your hard drive and select the theme file which should already be called something like this example: ""XMB+Corporate.xmb""
 +
# Click the button called "Import Theme into XMB"
 +
# Go to your "Control Panel" and "Edit Profile" and select the new theme from the drop down menu under Edit Profile - Options: Theme: Save your change.
 +
 
 +
[[Category:Administration Panel]]

Latest revision as of 12:25, 8 September 2020

Creating New Themes

This is a brief outline on how to create a new theme in XMB forums. This is offered up as an explanation of the different fields required in the theme creation dialog only. After familiarizing yourself with the different components you will be ready to start the creation process. Practice and experience will be the final steps to creating good XMB themes.

Number / Names of the Fields

XMB themes are composed of 21 variables represented by 21 fields, in the Admin Panel / Themes - Details, that the user fills in with the the desired colors/sizes/images:

1 Name field
12 Color fields (3 of these fields can use images for the color variable)
2 Font size/type fields
2 Directory designations
1 Main site logo
3 HTML layout variables

Notes

  1. All FIELDS MUST BE FILLED - not doing so causes problems!
  2. It's best not to alter the existing themes, leave those as is and start a new one. We'll be going over how to do that. While the existing themes can be re-installed it can be problematic if the deleted theme is the default theme - or if any members were using that theme.
  3. Never use an apostrophe ( ' ) in the theme name!! Never! This causes all kinds of grief. You may want to "personalize" your theme by naming it "Handy Andy's Theme". Don't do it - find another way of showing the author/object of the theme. I've also seen some problems arise with other special characters used in the "Name" field so avoid trouble by keeping it simple.
  4. When creating new themes, or modifying existing themes always use the "#" prefix with your color codes. Example: use #ff0000 not ff0000- the reason for this is that while most of you probably surf the web using Internet Explorer or similar browsers (browsers using the IE engine) you would never know that your themes are not being displayed in the "Gecko" browsers (Netscape, Mozilla, Firebird). Without getting too technical .... IE is much more forgiving of the omission of the "#" while the Gecko browsers won't tolerate the same omission. And while the majority of your members may use Interent Explorer... who wants that rogue Mozilla user, who happens by, thinking you must be devoid of any creative talents
  5. If you go to the Administration Panel / Themes page and click on any of the existing theme's "Details" link you will see how that theme is constructed. It's a good idea to do this to familiarize yourself with the layout and theme components.

Let's start a new theme

Go to Administration Panel / Themes
Here you will see a list of all of the installed themes for your forum.
At the bottom of the Theme list is a "New Theme" link - clicking this link will take you to a blank theme page that you will fill out with the
colors/images/specifications of your choice.
Let's go over the fields one by one.

The Fields

Theme Name

This is where you will title your new theme. Please remember that you should never use an apostrophe in the theme name (See Notes above).

Background

(Enter a hex code or an image name): This is the background color or a tiling image that will be used on all pages. If you are confused as to exactly what this means use the "Details" of an existing theme to see how the background is used. Here are some guidelines for the use of tiling images as the background:

  1. Don't use a background image that is too big. The people that visit your page don't want to wait forever for a 200K graphic just to fill the background. Many paint programs offer the means for optimizing your images within the "Save" dialog. Generally .jpg and .gif images are the best for the web.
  2. Keep the background unobtrusive. Most web page background images should be muted, so that the text of the page can be read.
  3. Use contrast wisely. Make sure that the text of your web page, especially links, contrast with the background image. Choose colors so that they coordinate rather than clash.
  4. Avoid unsightly artifacts. Use tiling images that don't show visible seams or weird dithering effect.

TIP - The web is a great resource for locating tilable background images. Use http://www.google.com and search for "web backgrounds" or similar keywords.

Alternating Colour #1

These are the colors that will be alternated in the forums. The best way to understand how this works is to use the "Details" link for one of the existing themes and observe how the 2 colors are used.

Alternating Colour #2

These are the colors that will be alternated in the forums. The best way to understand how this works is to use the "Details" link for one of the existing themes and observe how the 2 colors are used.

Link Colour

This sets the color all of your links will be. This includes the forum titles, navigation links, Who's Online links, etc.... This requires a color hex code; i.e. #ff0000 (red)

Border Colour

This sets the color of the border that will surround your forum tables. This is dependent on Field #14 for the border width.

Header Colour

This is the color of the "headers" i.e. The bar across the the forums list on the index page (the one that says "Forum: Topics: Posts: Last Post: ) and the header menu bar where your main links are located. There are some other instances of the "header" color, again I suggest using the "Details" of an existing theme to familiarize yourself with where this color will occur.

Header Text Color

This sets the color of the text used in the headers. Make sure that you use a color that will be visible with Field# 7.

Top Table Color

(Enter a hex code or an image name): - The top table is the area where the main logo is as well as the "Last Active", "New u2u Message", and "Login / Logout links" - you may also use an image here as a background instead of a color.

Category Color

(Enter a hex code or an image name): - the category bars are the bars above the forums when you create them in the Administration Panel / Forums page. You can also use an image for these.

Category Text Color

This sets the color of the text used in the category bars.

Table Text Color

This set the text for "forum descriptions, Who's Online key, text in the news ticker, Stats titles, Member List numbers, Status, Date, , etc...

Text Color

This sets the color of the "Posts Subjects, navagation titles, Copyright text, Last Active and Welcome text, etc....

Border Width

This sets the size of the border measured in pixels. 1 being the "thinnest" and increasing proportionately with the higher number.

Table Width

This is the over width of the forum tables - or - how wide your forums will expand across the screen. This can be set in percentage (100%) or in pixels (600).

Table Spacing

This is an html table value and controls the amount of spacing between the individal cells in each table.

Font

This field allow you to enter a font family. An example of a font family would be "Verdana" or "Comic Sans". A note about this - whatever font you specify here will need to be installed on the user's PC or it will not display correctly - if the user does not have the font that you specify their system will substitute their "default" Windows font for the one you have in that field. So with that in mind it's best to keep the "Font" simple. Most systems have the Verdana or Arial font installed so it's a good choice here.

Big Font

A bit of a misleading name - this is the "size" designation of the text, including the links. There are few places that are not affected by this field's value; like the "Last Post" column of each forum is one example of an exception. This field will accept the desired font size in px (pixels) or pt (points) an example of each would be: 12px or 7pt.

Board Logo URL

This is the main forum logo, the banner located in the upper left corner of the header. If you have a custom logo you will enter the file name (example: forumlogo.gif) here. Only the file name as the directory is hard coded as the theme's image folder in the forum's "image" directory. You'll notice that this has the additional instructions that read: [(Enter a hex code, a flash movie or an image name): To use a Flash movie as avatar, separate its url, width, and height by commas - like so: ""http://www.wherever.com/avatar.swf,80,40""

Image Directory

Each theme must have a directory in which the images for that theme are stored. If you create a new theme you will need to either: use an existing theme's image folder for the images or, if you are using "custom" images for this new theme, create a new image folder to store the "custom" images. Whichever method you choose to use you must specify the image folder here.

If you do have custom images you want to use, then you need to create new image folder on your server - and this folder must be within the forum's image directory. It must be in with the other theme folders - this is important as Field #20 is set to read from this location only. So if you are creating a new theme called "Neo" then you may want to name the new image directory "neo" as well. This is where all of the new theme's images will be uploaded.

NOTE: It is a good policy to always use lower case letters for all images and folders - some browsers (albeit the older ones) do not do well with upper case letters for file names.

Smilie Directory

This is the path to the smilies folder. If you want to create a new set of smilies and have them in a different folder - you would enter this new set's folder name here. Otherwise this should be set to the default smilie folder (images/smilies). See the How To on "Adding New / Additional Smilies" for info on using multiple smilie sets.

Conclusion

That concludes the rundown on the 21 fields required to complete a new theme. I hope this helps to explain the process a little better than the available documentation and gets you on your way to creating some great themes. :)

If you find a descrepancy in the above "How To" please send me a u2u and I'll review and correct if necessary.

Thanks
Daf

Installing Addon Themes

  1. Download the theme you like and unpack it using your favorite unpacker program such as Winzip or Winrar etc.
  2. Copy the extracted complete folder of the images etc to the forums sub-folder called "images" by ftp.
  3. Go to "Administration Panel" and click "Themes". Scroll down to the "Import Theme:" area and then click the browse button. Browse to the theme you downloaded to your hard drive and select the theme file which should already be called something like this example: ""XMB+Corporate.xmb""
  4. Click the button called "Import Theme into XMB"
  5. Go to your "Control Panel" and "Edit Profile" and select the new theme from the drop down menu under Edit Profile - Options: Theme: Save your change.