06-02-2007, 12:46 PM
Here is a great tutorial that was produced by: zaher1988
I think it will be very useful to new themers looking for direction.
Hello there,
If you are into making a new theme, or trying to edit your existing theme. this thread will shed light on the different procedures of that, shedding light on the purpose of each, and the place of each.
Theme consist of :
1. The images
2. The text decoration
3. The general elements
in our tutorial we will pass by these steps
1. Understanding a theme
2. Gathering the needed files
3. Working on images
4. Understanding the theme manager
5. working in the theme manager
6. understanding the Additional CSS Attributes
7. Testing your theme
8. Export your theme
1- Understanding a theme
The theme is made of images, colored text or boxes, backgrounds and many visual elements, so in case you want an astonishing theme, you have to pass by these.
The images are used in a theme, to display the buttons, table header/rows backgrounds, group images, the logo, forum bits etc...
2) Gathering the needed files
As any theme wont be complete by no images, you may need to search of some icons, in case you don't want to make them your self, or in case you want to addition them to any image your working on. So gather many images, for one subject and choose the best, you may fit them somewhere in the forum, and they can add a nice look, for example, the navigation bar has several icons, so why not put your's there instead?
3) Working on images
Any board will have many images, so you will have a huge construction site but this time for images.
Using any software like, Photoshop, Fireworks or The GIMP etc... will make you vision as reality, it will make your work easier, and with a nice result.
So let's start by the logo. A logo will be the 1st thing a user might look at. so a good choice of logo will reflect the whole image of your site, make the logo to fit exactly with your board and the colors that you will use in. A logo should not be too big, yet not to small. The normal size of a logo is 500x100 pixels.
So let's move on to the buttons. The button are found in the ./images/english directory. You may edit them in any software, give them the color you want, or even you may put your own buttons instead.
One more critial and very important element of the theme, is the table header and row etc.. background images, it's very common that they are made like a gradient image, so using a image editing software you may want to edit the existing or start your own. Using the gradient tool will give you this effect. I recommend keeping the dimensions as the original images.
You may also make some gradient colored images and use them somewhere else than the table header or rows, such as the bottom menu, welcome block panel etc....
Now you can make any custom image, that you think you need in your theme, to add it where ever. You will see later how to add it to any place in the board.
4-Understanding the theme manager
The theme manager is found under Admin CP > Themes > Modify / Delete
You may then choose the theme you want to edit by selecting Edit Theme from the drop-down menu and click go beside it.
You may ask your self what's the difference between MyBB Master Style and any other theme.
The MyBB Master Style is applied to all the other theme, so if you add anything to that theme, or edit anything there, that will affect the whole theme. rather if you edit any single ordinary theme, that will only affect it itself.
The theme manager as you will see, consists of many tables each referrs to an element or part of the board.
So let's start explaining the actually element or each title here.
* General Options: this will deal with the name of the theme (not important now)
* Theme Options: here you will need to specify the image directory, where the images are found, also you will choose your logo, table spacing etc..
* Body: this a general customization that will affect those with no class elements, it's actually the body settings.
* Page Container: is the container that contains all the other elements to illustrate more. It's the white box you see at the site borders.
* Content Container: this will deal with the fitting of the things inside the container.
* Top Links Menu: Where the Search, Memberlist, etc links are.
* Welcome Panel: this will affect the welcome block (panel).. Where is says "Welcome, {username} and has the userCP links, etc.
* Tables: this will deal with the tables in general, but doesn't affect that much.
* Table Border: class called "tborder" this will affect anything related to borders
* Table Headers: class="thead" this will affect the header of any table, the header for those who don't know it exactly is the top part of the table
* Table Sub Headers: class="tcat" this will affect the subheaders, for example, the forum bit containing Forum ,Threads, Posts, Last Post information
* Alternating Table Row 1: class="trow1" this will deal with the table rows, such as the row of the forum name, thread name etc....
* Alternating Table Row 2: class="trow2" as the one above, but this deals with the row which is after the 1st
* Shaded Table Row: this will deal with the shaded rows, i think it's only used when you unapprove a certain thread
* Table Row Separator: in case there is a separator between some rows , this will deal with it
* Table Footers: class="tfoot" this is the setting for the table footer, they don't appear always, but for example when browsing a certain thread you may find it at the bottom of the table
* Bottom Links Menu: this will deal with the bottom links menu, which is at the far bottom, having rss syndication, contact us etc...
* Navigation Breadcrumb and active Navigation Breadcrumb are related to the navigation indicator, eg.MyBB Community Forums / MyBB / User Submitted Tutorials .
* Small Text: all text with class of smalltext will follow the settings here
* Large Text: all text with class of largetext will follow this
* Form Elements: all this related to the forms!! such as checkbox, radio buttons, drop-down menus etc..
* MyCode Formatting Toolbar: this will deal with the toolbar background, styles etc...
* Additional CSS: it's where you can make your own classes
As you have read, this explain the role for each part. Each part (table) in that page represent a class. Now in case you want to make your own class, please continue reading.
5- working in the theme manager
Before anything, this manager uses the CSS attributes, so you may need to have little knowledge as this will make it so easy for you, or you might also benefit of the things that you will see in this tutorial, but they don't cover the advanced ones, just the basic, and the needed things.
As a start with the theme manager you may need to name it, which you can find it under General Options.
2nd step
Theme Options
Template Set: This represent the templates that the theme will applied to, many reports are about a theme that shows another template or vice versa, all are because it's not set correctly here.
Image Directory: the directory where your images located. (e.g. images/{ThemeName})
Forum Logo: here you may add the URL for your logo(e.g. images/{ThemeName}logo.gif).
Table Spacing: you could set here the space between the tables.
Content Table Width: you may set here the width of your table.
Inner Table Border Width: this is the width of the borders.
[attachment=342]
I will describe the edit step using the image above, as it's almost all the same
1st you have Main CSS Attributes
That contains:
Background: here you may add the background for that certain class you are working on.
this is a very important part of editing the theme, for example, if you'd like to add the image for the background of a certain class, we will have to follow this code:
#026CB1 url(images/ThemeName/bg.gif) fixed repeat-x
there is no need for the #026CB1, but you can keep it in case you want a certain color to appear if the image took a little bit time to load.
the url(images/thead_bg.gif) is the actual image code, there are some other attributes that will aid you working with image such as
* repeat-x : this will repeat the image Horizontally
* repeat-y: this will repeat the image vertically
* repeat: this will repeat it both sides
* no-repeat: there will be no repeating
* top, center, bottom, value :will set the position of this image.
* left, center, right, value: will set the horizontal position of the image
so the code will then look (e.g. #026CB1 url(images/thead_bg.gif) top left repeat-x).
this is applied mostly to the table headers, rows etc... as there if you look at the image that appears there, you can see it's just a little one, so using the repeating this image will look like a huge.
let's move down
Font Color :this is the font color that will appear in this certain class (E.g. #ffffff)
Font Family: the used font (e.g. Verdana)??
Font Size??: the size (e.g. 12)
Font Style : the style (e.g. underline, line-through, overline, blink)
Font Weight: the thickness of the font (e.g. bold, 100 etc..)
in the links css attributes you can customize the links
Normal Links Background: links not visited
Visited Links Background: visited links
Hovered Links : when the mouse is over.
Each of these has
Background : the background of the text, like a highlighter
Font Color: the color??
Text Decoration: decoration (just like mentioned above)
Now we can continue to the
Extra CSS Attributes
Here, you may modify anything which is not available in the input fields,
in the screen shots you may find an illustration how they should look like, along to some examples.
Now if you look at the bottom of the screen shot you may find Revert Customizations. This will revert any customized class to the original style, it will only appear when you modify that class.
In case you need more help about css attributes, you could google it, or you may use any web editing software such as DreamWeaver, which will really help you to know what to use and how to type them, so you just make them there, and copy them here.
6- understanding the Additional CSS Attributes
At the bottom of the theme manager you can find the Additional CSS Attributes. Here you can make your own classes and use them in your templates.
Let's make a class that will be applied to a certain row in a table.
Any css class starts with a dot "." so let's start
Code:
.myrow {
text-decoration: line-through;
font-weight: 300;
font-family: Arial, Helvetica, sans-serif;
background-color: #990000;
border: thin dotted #009900;
}
This is just a sample you can add what ever attributes you want to it.
Now in case that row has a link, and you want to customize it, then we will have to do this
etc....
always keep the same name, it's not a new class. Now that we have made that very simple new class, you may need to assign it to a certain row.
So in your template manager, select the template you want, then the row or whatever you want to follow this class.
and you just have to add class="myrow"
e.g. applied on a row
Using the additional css attributes, you can make the look you want for any element in your board.
7-Testing your theme
Testing your theme is very important, in case you don't like something you may change it etc..
of course you will have to upload all your images to the ./images directory, or any directory you'd like but in this case, you have make sure to edit the setting mentioned above regarding the image directory, or the images URL.
now as you have upload the needed files, you are now maybe in the theme manager editing other things, so when you finish, and you assign the logo URL, all the table background images etc.. save your theme using the button Update theme at the bottom of the theme manager.
Go to your site, and check all the things you have edited, all the images. If you like the skin, if everything is harmonic, if it's ok, now you can either use it, or in case you want to export it, follow the steps below
8- Export your theme
In the Admin CP >Theme > Modify / Delete
You can find a button called Download a Theme.
Click it, the next page will ask what theme you want to download, and other options, like in case you want to export the customized templates etc... it depends on you.
Click Download Theme
Now here's the problem, even with the latest version of mybb this error still occurs, it's that using Internet Explorer the xml file wont download instead it shows you the code of it.
so if you use Fire Fox, Mozilla Opera, etc...
or
place your mouse in that page to somewhere where there is no pointer, then go to File > Save > name.xml and save it.
but even this way isn't always working, so you can also try to copy and paste the code in a text editor , remove the "-" "+" that will appear, and save it as XML document.
Now that you have exported your theme setting, you have to include the custom images with it and publish it.
I hope this tutorial was helpful.
many regards
I think it will be very useful to new themers looking for direction.
Hello there,
If you are into making a new theme, or trying to edit your existing theme. this thread will shed light on the different procedures of that, shedding light on the purpose of each, and the place of each.
Theme consist of :
1. The images
2. The text decoration
3. The general elements
in our tutorial we will pass by these steps
1. Understanding a theme
2. Gathering the needed files
3. Working on images
4. Understanding the theme manager
5. working in the theme manager
6. understanding the Additional CSS Attributes
7. Testing your theme
8. Export your theme
1- Understanding a theme
The theme is made of images, colored text or boxes, backgrounds and many visual elements, so in case you want an astonishing theme, you have to pass by these.
The images are used in a theme, to display the buttons, table header/rows backgrounds, group images, the logo, forum bits etc...
2) Gathering the needed files
As any theme wont be complete by no images, you may need to search of some icons, in case you don't want to make them your self, or in case you want to addition them to any image your working on. So gather many images, for one subject and choose the best, you may fit them somewhere in the forum, and they can add a nice look, for example, the navigation bar has several icons, so why not put your's there instead?
3) Working on images
Any board will have many images, so you will have a huge construction site but this time for images.
Using any software like, Photoshop, Fireworks or The GIMP etc... will make you vision as reality, it will make your work easier, and with a nice result.
So let's start by the logo. A logo will be the 1st thing a user might look at. so a good choice of logo will reflect the whole image of your site, make the logo to fit exactly with your board and the colors that you will use in. A logo should not be too big, yet not to small. The normal size of a logo is 500x100 pixels.
So let's move on to the buttons. The button are found in the ./images/english directory. You may edit them in any software, give them the color you want, or even you may put your own buttons instead.
One more critial and very important element of the theme, is the table header and row etc.. background images, it's very common that they are made like a gradient image, so using a image editing software you may want to edit the existing or start your own. Using the gradient tool will give you this effect. I recommend keeping the dimensions as the original images.
You may also make some gradient colored images and use them somewhere else than the table header or rows, such as the bottom menu, welcome block panel etc....
Now you can make any custom image, that you think you need in your theme, to add it where ever. You will see later how to add it to any place in the board.
4-Understanding the theme manager
The theme manager is found under Admin CP > Themes > Modify / Delete
You may then choose the theme you want to edit by selecting Edit Theme from the drop-down menu and click go beside it.
You may ask your self what's the difference between MyBB Master Style and any other theme.
The MyBB Master Style is applied to all the other theme, so if you add anything to that theme, or edit anything there, that will affect the whole theme. rather if you edit any single ordinary theme, that will only affect it itself.
The theme manager as you will see, consists of many tables each referrs to an element or part of the board.
So let's start explaining the actually element or each title here.
* General Options: this will deal with the name of the theme (not important now)
* Theme Options: here you will need to specify the image directory, where the images are found, also you will choose your logo, table spacing etc..
* Body: this a general customization that will affect those with no class elements, it's actually the body settings.
* Page Container: is the container that contains all the other elements to illustrate more. It's the white box you see at the site borders.
* Content Container: this will deal with the fitting of the things inside the container.
* Top Links Menu: Where the Search, Memberlist, etc links are.
* Welcome Panel: this will affect the welcome block (panel).. Where is says "Welcome, {username} and has the userCP links, etc.
* Tables: this will deal with the tables in general, but doesn't affect that much.
* Table Border: class called "tborder" this will affect anything related to borders
* Table Headers: class="thead" this will affect the header of any table, the header for those who don't know it exactly is the top part of the table
* Table Sub Headers: class="tcat" this will affect the subheaders, for example, the forum bit containing Forum ,Threads, Posts, Last Post information
* Alternating Table Row 1: class="trow1" this will deal with the table rows, such as the row of the forum name, thread name etc....
* Alternating Table Row 2: class="trow2" as the one above, but this deals with the row which is after the 1st
* Shaded Table Row: this will deal with the shaded rows, i think it's only used when you unapprove a certain thread
* Table Row Separator: in case there is a separator between some rows , this will deal with it
* Table Footers: class="tfoot" this is the setting for the table footer, they don't appear always, but for example when browsing a certain thread you may find it at the bottom of the table
* Bottom Links Menu: this will deal with the bottom links menu, which is at the far bottom, having rss syndication, contact us etc...
* Navigation Breadcrumb and active Navigation Breadcrumb are related to the navigation indicator, eg.MyBB Community Forums / MyBB / User Submitted Tutorials .
* Small Text: all text with class of smalltext will follow the settings here
* Large Text: all text with class of largetext will follow this
* Form Elements: all this related to the forms!! such as checkbox, radio buttons, drop-down menus etc..
* MyCode Formatting Toolbar: this will deal with the toolbar background, styles etc...
* Additional CSS: it's where you can make your own classes
As you have read, this explain the role for each part. Each part (table) in that page represent a class. Now in case you want to make your own class, please continue reading.
5- working in the theme manager
Before anything, this manager uses the CSS attributes, so you may need to have little knowledge as this will make it so easy for you, or you might also benefit of the things that you will see in this tutorial, but they don't cover the advanced ones, just the basic, and the needed things.
As a start with the theme manager you may need to name it, which you can find it under General Options.
2nd step
Theme Options
Template Set: This represent the templates that the theme will applied to, many reports are about a theme that shows another template or vice versa, all are because it's not set correctly here.
Image Directory: the directory where your images located. (e.g. images/{ThemeName})
Forum Logo: here you may add the URL for your logo(e.g. images/{ThemeName}logo.gif).
Table Spacing: you could set here the space between the tables.
Content Table Width: you may set here the width of your table.
Inner Table Border Width: this is the width of the borders.
[attachment=342]
I will describe the edit step using the image above, as it's almost all the same
1st you have Main CSS Attributes
That contains:
Background: here you may add the background for that certain class you are working on.
this is a very important part of editing the theme, for example, if you'd like to add the image for the background of a certain class, we will have to follow this code:
#026CB1 url(images/ThemeName/bg.gif) fixed repeat-x
there is no need for the #026CB1, but you can keep it in case you want a certain color to appear if the image took a little bit time to load.
the url(images/thead_bg.gif) is the actual image code, there are some other attributes that will aid you working with image such as
* repeat-x : this will repeat the image Horizontally
* repeat-y: this will repeat the image vertically
* repeat: this will repeat it both sides
* no-repeat: there will be no repeating
* top, center, bottom, value :will set the position of this image.
* left, center, right, value: will set the horizontal position of the image
so the code will then look (e.g. #026CB1 url(images/thead_bg.gif) top left repeat-x).
this is applied mostly to the table headers, rows etc... as there if you look at the image that appears there, you can see it's just a little one, so using the repeating this image will look like a huge.
let's move down
Font Color :this is the font color that will appear in this certain class (E.g. #ffffff)
Font Family: the used font (e.g. Verdana)??
Font Size??: the size (e.g. 12)
Font Style : the style (e.g. underline, line-through, overline, blink)
Font Weight: the thickness of the font (e.g. bold, 100 etc..)
in the links css attributes you can customize the links
Normal Links Background: links not visited
Visited Links Background: visited links
Hovered Links : when the mouse is over.
Each of these has
Background : the background of the text, like a highlighter
Font Color: the color??
Text Decoration: decoration (just like mentioned above)
Now we can continue to the
Extra CSS Attributes
Here, you may modify anything which is not available in the input fields,
in the screen shots you may find an illustration how they should look like, along to some examples.
Now if you look at the bottom of the screen shot you may find Revert Customizations. This will revert any customized class to the original style, it will only appear when you modify that class.
In case you need more help about css attributes, you could google it, or you may use any web editing software such as DreamWeaver, which will really help you to know what to use and how to type them, so you just make them there, and copy them here.
6- understanding the Additional CSS Attributes
At the bottom of the theme manager you can find the Additional CSS Attributes. Here you can make your own classes and use them in your templates.
Let's make a class that will be applied to a certain row in a table.
Any css class starts with a dot "." so let's start
Code:
.myrow {
text-decoration: line-through;
font-weight: 300;
font-family: Arial, Helvetica, sans-serif;
background-color: #990000;
border: thin dotted #009900;
}
This is just a sample you can add what ever attributes you want to it.
Now in case that row has a link, and you want to customize it, then we will have to do this
Code:
.myrow a:link {
color: #00CCCC;
}
.myrow a:visited {
color: #00CCCC;
}
.myrow a:hover {
color: #00CCCC;
}etc....
always keep the same name, it's not a new class. Now that we have made that very simple new class, you may need to assign it to a certain row.
So in your template manager, select the template you want, then the row or whatever you want to follow this class.
and you just have to add class="myrow"
e.g. applied on a row
Code:
<tr>
<td class="myrow">something here</td>
</tr>Using the additional css attributes, you can make the look you want for any element in your board.
7-Testing your theme
Testing your theme is very important, in case you don't like something you may change it etc..
of course you will have to upload all your images to the ./images directory, or any directory you'd like but in this case, you have make sure to edit the setting mentioned above regarding the image directory, or the images URL.
now as you have upload the needed files, you are now maybe in the theme manager editing other things, so when you finish, and you assign the logo URL, all the table background images etc.. save your theme using the button Update theme at the bottom of the theme manager.
Go to your site, and check all the things you have edited, all the images. If you like the skin, if everything is harmonic, if it's ok, now you can either use it, or in case you want to export it, follow the steps below
8- Export your theme
In the Admin CP >Theme > Modify / Delete
You can find a button called Download a Theme.
Click it, the next page will ask what theme you want to download, and other options, like in case you want to export the customized templates etc... it depends on you.
Click Download Theme
Now here's the problem, even with the latest version of mybb this error still occurs, it's that using Internet Explorer the xml file wont download instead it shows you the code of it.
so if you use Fire Fox, Mozilla Opera, etc...
or
place your mouse in that page to somewhere where there is no pointer, then go to File > Save > name.xml and save it.
but even this way isn't always working, so you can also try to copy and paste the code in a text editor , remove the "-" "+" that will appear, and save it as XML document.
Now that you have exported your theme setting, you have to include the custom images with it and publish it.
I hope this tutorial was helpful.
many regards
