Zetaboards Skinning

Go down

Zetaboards Skinning

Post by Asura on Sun Aug 21, 2011 10:32 am

Hi there, i'm Asura and im here to guide you today on how to code on Zetaboards.

Skinning on Zeta tutorial 1 Introduction and beginning.

Go to ur admin panel and scroll down until you see a button that's named : Themes
Press on that button and the page should pop up, Here you can see the list of skins you have. If your forum is newly born you should have only one skin that is named : "Zeta original".
That's ur standard skin for the moment, do not and i repeat do not edit this skin! If you mess up this skin and you don't have any other normal skins your site will be a disaster.


Skinning on Zeta tutorial 2 The harder part.

Now that you are on the right page click on the button under Zetaboards theme that says "Create a new theme based on Zeta Original"
Now there should be a page popping up that says "Skin name, Theme width, Active and Logo."
Fill in the skin name you wish to desire. Warning the skin name you choose will be seen on the website skin chooses menu. So by example i created a skin named "Test" i made it non active. You can make the skin active and non active if you make it non active the people on your Zetaboard site can't see it and use it. If you put it active people can choose the theme to use and see it. U can make a logo of your skin, like the zetaboard theme has with the page example. You'll need to paste the image link in the code. Replace the green marker Image link with the link of a image. Replace the green marked Name with the name of ur skin.
The code = IMAGE LINK" alt="NAME" />
After that press on "Create new skin"


Skinning on Zeta tutorial 3 The harder part.

Okay to continue on this part you have either had done this before or you have to re read the whole paragraph a few times if your confused. If you confused by ANY part of this step re read the whole whole whole thing. Or else something funny will happen ( Null errors ). Now that you ahve created your skin press on the second option the one after "Edit theme settings" If you quickly looked over this tutorial you probably would have pressed on Edit theme settings, but that's not what you have to do, you have to press on "Edit theme appearance" If you have made any mistakes the previous step with the naming form the skin or w/e you can change it by editing the Theme settings. Now, if you have opened Theme appearance you should have a website popup with the name "Edit CSS".

Skinning on Zeta tutorial 4 Where the students become the teacher.

Okay, this would probably the most hardest part of this guide, since after all even i am not good in this part. Here you have to edit the Appearance and the outlook of the Site. With appearance i mean the picture behind everything, the font colors of everything and whatnot, the only thing you can't change here are the menu buttons. Since there are sooooo many CSS codes on this page i suggest you change one by one and see the effects of it. (There are around 300). Tools to help you with this: Google chrome, yes it helps. Google chrome has many dev tools, i by one have a tool like that. Right click ur zeta page on google chrome and press the last option "Inspect Element" It should sound like that but i'm not sure since my chrome is on a different language then American/English. Hover over the codes that the Chrome popuper shows and save the codes in your mind, go back to ur css page and ctrl+f those codes. After a few tries you should find a single code. This is an alternative way to edit ur codes for the first time, i did it the first time like this. The only free code i will give you is ctrl+f ur css page and search for h2.special {, you should find a code css bar and a image link, that image link is the color/colour the board statistics is. I would like to put all the codes here and what they do but there are more then 300 codes and editting and testing them all takes days and weeks.

Skinning on Zeta tutorial 5 Where it goes downhill with the difficulty.

After many hours of skinning you should stumble upon here, you can relax now. This is easier then the step before. But before continuing you i would like to congratulate you for still following this guide, if you still did and understood everything that would mean your a coder now :p. Go back to the Themes page and click the right option of your skin named "Edit Theme Images" Here you can edit all ur buttons and whatnot, after pressing on the button press the first option that's named "Edit images" Here you can edit all your standard images. Find your custom images or make them and paste them in the codes. After that click on save and go back to ur themes page, scroll all the way downwards and change the favicon into something that fits the site. The favicon is the image next to the tab page, here it's a green text balloon.

Skinning on Zeta Tutorial 6 End.

This is the end of the guide, it may continue some day especially on part 4. Sorry about that i'm even confused about that part since it is so complicated.

Forum Helper

Posts : 7
Money : 2731
Reputation : 1
Join date : 2011-08-21

View user profile

Back to top Go down

Back to top

Permissions in this forum:
You cannot reply to topics in this forum