Creating Forum Skins/Themes

[KMRock]

Previously, say 2-3 years past I designed a few forum themes and used to know my fair share of CSS and basic HTML.

 

I'm just wondering how someone goes about learning to create more advances custom forum themes for say phpBB and MyBB. And if anyone here makes custom themes.

[ridwan sameer]

If you know the basic of CSS and HTML, then the rest is basically practice

And also taking a look at other people's code
You see some themes that are not jsut color changes, but drastic Code changes, take a look at their code and how they did it, implement those into your design
Basically create alot of themes

[KMRock]

Cheers for the info, I'll have to get back into it and see. How long have you been making themes for?

[DarkGizmo]

I've made themes for a few forums but I don't do it regularly. I'm currently creating a theme for Xenforo for my own forums to match my main site more closely. It's coming along well but I did need some help in some areas. I've skinned for IP.Board though (from 1.x to 3.x) as well as vBulletin.

[KMRock]

Oh very nice, sounds like you have some good skills

[dagscot]

Try looking at some themes that you really like and then have a go at reverse engineering them. It can be a challenge but it really improves your coding and gives you a few extra tools in your html/css.

[KMRock]

Nice idea actually thanks for that!

[DarkGizmo]

Yeah. That's a good idea too. Find a theme you really like that you'd like to improve or make a different version of and cannibalize it so to speak. Rip it apart and rebuild it in your own way.

[KMRock]

Isn't that just coping someone else's work though?

[DarkGizmo]

Isn't that just coping someone else's work though?

Well you're not mean't to actualy USE the theme, it's more for practice on how skinning works for the specific platform.

[KMRock]

Ah of course, that works well then cheers .

[Victor Leigh]

I have looked at some articles on skinning themes. There's a term there which I don't fully grasp. It's called slicing. So what do we actually do when we slice? And is the slicing standard or unique to each theme? I mean the size of the slice.

Edited January 13, 2013 by Victor Leigh

[KMRock]

Yeah I have never understood this concept either.

[DarkGizmo]

I think that only applies if you design a theme in Photoshop and not directly in CSS first. I could be wrong, but I don't use 'slicing' or anything like that. I generally dive right in and get into the CSS and begin creating the theme from there.

[simplysidy]

I have looked at some articles on skinning themes. There's a term there which I don't fully grasp. It's called slicing. So what do we actually do when we slice? And is the slicing standard or unique to each theme? I mean the size of the slice.

 

As far as I understand it, this is a brief explanation of what is slicing -

We create a design which we need to be translated into the HTML/CSS so that it can become displayed on a Website. This design can be created using any design Application - Photoshop/GIMP/any other of your preference. Then, we cut out smaller sections of the image so that we can use these images as and when and where we need on the website.

 

As and example, take a look at this site's header (top part). You would see a dark background (on which the Name of the site, the menu etc appear) and just a few pixels beneath that there is a darker gray area where your username appears along with other things. Now, on the image for this site, it would have been a bigger image which would have been sliced into 1px wide and n px tall (and we would have 2 images one each for the header and the username bar). Using CSS these would have been set to background:repeat-x - and without any CSS these would have been n-px wide images. This chopping off of the big image into smaller images is slicing. And these smaller images are displayed to cover areas using the background repeat properties.

 

I know, this is not the best explanation but I think, it helps in having an idea.

[Victor Leigh]

Thank you, Simplysidy. That helps. Now how is the image sliced? Is there some kind of utility to do it automatically? And how are the slices named?

[KMRock]

Ah of course, I've tried to do this before...never worked out too well though haha.

[simplysidy]

Thank you, Simplysidy. That helps. Now how is the image sliced? Is there some kind of utility to do it automatically? And how are the slices named?

In Photoshop (and even in Firewoks) there is a tool called Slice Tool - which helps in marking out the segments that are needed out. You start by plotting out the areas and then export them as the image formats you need. Photoshop also can help you export and create a webpage out of it.

[KMRock]

Yeah photoshop is pretty advanced no days, it's crazy actually!