[Silver_Brick]

Q.How To Customize Your Mybb Forum Theme ?
Ans.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.

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 lets start and rock

.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 example you can add what ever attributes you want to it.

now in case that row has a link, and you 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 Big Grin.

i hope this tutorial was helpfull

-SilverBrick & zaher1988 Of MYBB Community