2006-01-10, 04:42 PM
Heloo 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 consiste of :
in our tutorial we will pass by these steps
1- Understanding a theme
The theme is made of images, colored text or boxes, backgrounds and many visual elements, so incase u 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 anytheme wont be complete by no images, you may need to search of some icons, in case u dont 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 to put urs instead?.
3- Working on images
Any board will have many images, so u will have a huge construction site but this time for images.
using any software like, Photoshop, fireworks or gaimp etc... will make you vision as reality, it will make ur work easier, and with a nice result.
also a nice software i heard of but couldn't have the chanse yet to try it , which is MyBB image GDK..
so let's start by the logo. A logo will be the 1st thing a user might look at. so a good choise of logo will reflect the whole image of ur site, make the logo to fit excatly with your board and the colors that u will use in.
so let's move to the buttons, the button are found in the ./images directory. you may edit them in anysoftware, give them the color you want, or even u may put ur own buttons instead.
the group images also an item of the whole theme that u might want to change, of course u can put your own, or edit the existing.
actully u may find the psd of these buttons Here, they were made by Omar.
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 gardient image, so using a image editing software u may wheter to edit the existing or start your own. Using the gardient tool will give u this effect. i recommend keeping the dimensios as the original images.
You may also make some gardient colored images and use them somewhere else than the table header or rows, such as the bottom menu, welcome block etc....
now u can make any custom image, that u think u need in ur them, to add it where ever, u 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 slecting 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 u add anything to that theme, or edit anything there, that will affect the whole theme. rather if u edit any single ordinary theme, that will only affect it,it-self.
the theme manager as u will see, consiste of many tables each refferes to an element or part of the board.
so let's start explaining the actually element or each title here.
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 ur own class, please continue reading.
5- working in the theme manager
before anything, this manager uses the CSS attributes, so u may need to have little knowledge as this will make it so easy for you, or you might also benefit of the things that u will see in this tutorial, but they dont cover the advanced onces, 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.
sec step,Theme Options
Template Set: this represent the templates that the theme will applied to, many reports are about a theme that shows another templare or vice versa, all are because it's not ser correctly here.
Image Directory: the directory where your images located.
Forum Logo: here u may add the URL for your logo(e.g. images/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.
![[Image: attachment.php?aid=2051]](https://camo.mybb.com/151822e43e4f32f077c56d2744d160df19cb1c27/687474703a2f2f636f6d6d756e6974792e6d7962626f6172642e6e65742f6174746163686d656e742e7068703f6169643d32303531)
[attachment=2051]
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 improtant 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/thead_bg.gif)
there is no need for the #026CB1, but u can keep it in case u want a certain color to appear if the image took a little bit time to load.
the url(images/thead_bg.gif) is the actuall image code, there are some other attributes that will aid u working with image such as
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 u look at the image that appears there, u 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 u can customize the links
Normal LinksBackground: links not visited
Visited LinksBackground??: 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 menitoned 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 u may find an illutstration how they should look like,along to some examples.
now if u look at the bottom of the screen shot u may find Revert Customizations this will revert any customized class to the original style, it will only appear when u modify that class.
In case you need more help about css attributes, you could google it, or u may use any web editting software such as dreamweaver, which will really help you to know what to use and how to type them, so u 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 Addditional CSS Attributes,here you can make ur own classes and use them in ur 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
now in case that row has a link, and u want to cutomize it, then we will have to do this
always keep the same name, it's not a new class
know 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 u 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 ur board.
7-Testing your theme
Testing your theme is very important, in case you dont like something u may change it etc..
ofcourse u 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 u finish, and u assing the logo URL, all the table background images etc.. save your theme using the buttom Updated 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 u can whether 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 buttom called Download a Theme
click it, the next page will ask what theme you want to download, and other options, like in case u 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 accurs, it's that using Internet Explorer the xml file wont download instead it shows u the code of it.
so wheter you use Fire Fox, mozzila 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, u have to include the custom images with it and publish it
.
i hope this tutorial was helpfull
many regards
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 consiste of :
- The images
- The text decoration
- The general elements
in our tutorial we will pass by these steps
- Understanding a theme
- Gathering the needed files
- Working on images
- Understanding the theme manager
- working in the theme manager
- understanding the Additional CSS Attributes
- Testing your theme
- Export your theme
1- Understanding a theme
The theme is made of images, colored text or boxes, backgrounds and many visual elements, so incase u 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 anytheme wont be complete by no images, you may need to search of some icons, in case u dont 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 to put urs instead?.
3- Working on images
Any board will have many images, so u will have a huge construction site but this time for images.
using any software like, Photoshop, fireworks or gaimp etc... will make you vision as reality, it will make ur work easier, and with a nice result.
also a nice software i heard of but couldn't have the chanse yet to try it , which is MyBB image GDK..
so let's start by the logo. A logo will be the 1st thing a user might look at. so a good choise of logo will reflect the whole image of ur site, make the logo to fit excatly with your board and the colors that u will use in.
so let's move to the buttons, the button are found in the ./images directory. you may edit them in anysoftware, give them the color you want, or even u may put ur own buttons instead.
the group images also an item of the whole theme that u might want to change, of course u can put your own, or edit the existing.
actully u may find the psd of these buttons Here, they were made by Omar.
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 gardient image, so using a image editing software u may wheter to edit the existing or start your own. Using the gardient tool will give u this effect. i recommend keeping the dimensios as the original images.
You may also make some gardient colored images and use them somewhere else than the table header or rows, such as the bottom menu, welcome block etc....
now u can make any custom image, that u think u need in ur them, to add it where ever, u 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 slecting 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 u add anything to that theme, or edit anything there, that will affect the whole theme. rather if u edit any single ordinary theme, that will only affect it,it-self.
the theme manager as u will see, consiste of many tables each refferes 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 u will need to specify the image directory, where the photos are found, also u will choose ur logo, table spacing etc...
- Body: this a general customzation that will affect those with no class elements, it's actually the body settings
- Page Container: is the conatiner that contains all the other elements, to illustrate more, it's the white box u see at the site borders.
- Content Container: this will deal with the fiting of the things insde the container
- Top Links Menu
- Welcome Panel: this will affect the welcome block (panel)
- 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 anytable, the header for those who dont know it excatly 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.
- 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 u unapprove a certain thread
- Table Row Separator: in case there is a sperator between some rows , this will deal with it
- Table Footers: class="tfoot" this is the setting for the table footer, they dont appear always, but for example when browsing a certain thread u 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 u can make ur 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 ur own class, please continue reading.
5- working in the theme manager
before anything, this manager uses the CSS attributes, so u may need to have little knowledge as this will make it so easy for you, or you might also benefit of the things that u will see in this tutorial, but they dont cover the advanced onces, 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.
sec step,Theme Options
Template Set: this represent the templates that the theme will applied to, many reports are about a theme that shows another templare or vice versa, all are because it's not ser correctly here.
Image Directory: the directory where your images located.
Forum Logo: here u may add the URL for your logo(e.g. images/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=2051]
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 improtant 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/thead_bg.gif)
there is no need for the #026CB1, but u can keep it in case u want a certain color to appear if the image took a little bit time to load.
the url(images/thead_bg.gif) is the actuall image code, there are some other attributes that will aid u working with image such as
- repeat-x : this will repeat the image Horizontaly
- repeat-y: this will repeat the image verticaly
- 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 u look at the image that appears there, u 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 u can customize the links
Normal LinksBackground: links not visited
Visited LinksBackground??: 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 menitoned 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 u may find an illutstration how they should look like,along to some examples.
now if u look at the bottom of the screen shot u may find Revert Customizations this will revert any customized class to the original style, it will only appear when u modify that class.
In case you need more help about css attributes, you could google it, or u may use any web editting software such as dreamweaver, which will really help you to know what to use and how to type them, so u 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 Addditional CSS Attributes,here you can make ur own classes and use them in ur 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
.myrow {
text-decoration: line-through;
font-weight: 300;
font-family: Arial, Helvetica, sans-serif;
background-color: #990000;
border: thin dotted #009900;
}now in case that row has a link, and u want to cutomize it, then we will have to do this
.myrow a:link {
color: #00CCCC;
}
.myrow a:visited {
color: #00CCCC;
}
.myrow a:hover {
color: #00CCCC;
}always keep the same name, it's not a new class
know 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 u want to follow this class.
and you just have to add class="myrow"
e.g. applied on a row
<tr>
<td class="myrow">something here</td>
</tr>using the additional css attributes, you can make the look you want for any element in ur board.
7-Testing your theme
Testing your theme is very important, in case you dont like something u may change it etc..
ofcourse u 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 u finish, and u assing the logo URL, all the table background images etc.. save your theme using the buttom Updated 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 u can whether 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 buttom called Download a Theme
click it, the next page will ask what theme you want to download, and other options, like in case u 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 accurs, it's that using Internet Explorer the xml file wont download instead it shows u the code of it.
so wheter you use Fire Fox, mozzila 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, u have to include the custom images with it and publish it
.i hope this tutorial was helpfull
many regards
heheh
"
Nice tutorial. I hope people will reference it.