1 (edited by ps21 2003-09-11 01:30)

Topic: Skinning Guide

Hi,

I have started work on a skinning guide. If anybody thinks this is a good idea and/or would find it useful let me know and I will finish it within the next day or two. Its nothing spectucular, I've just taken screen captures of various pages of the board and annotated them with the names of relevant styles in the stylesheet. I am also planning to put in some helpful hints etc.

If anybody wants to take a look at what I have got so far you can download the first couple of pages in .pdf format here

EDIT

Finished it subject to checking.
http://www.post21.co.uk/files/PunBBSG101.zip

Re: Skinning Guide

Awesome! This could be very useful. Keep up the good work!

"Programming is like sex: one mistake and you have to support it for the rest of your life."

3

Re: Skinning Guide

Thanks kennel, I will get it done a.s.a.p. Please don't tell me you are going to change the class names in v.1.1 smile

Off topic, this is really a suggestion rather than anything else. Wouldn't it be a good idea to make the board name a separate style. What I have done is to create a class which is .boarditle{} in the stylesheet and then change the relevant part of the main template. Doing it this way means users could for example have a 24px board name in bright organge if they wanted to without messing up anything else.

4

Re: Skinning Guide

Awesome! Yes, please continue your work and go for it!
This would make my modification much easier! Thanks for the effort!

Cheers ~ Arne

Re: Skinning Guide

ps21 wrote:

Off topic, this is really a suggestion rather than anything else. Wouldn't it be a good idea to make the board name a separate style. What I have done is to create a class which is .boarditle{} in the stylesheet and then change the relevant part of the main template. Doing it this way means users could for example have a 24px board name in bright organge if they wanted to without messing up anything else.

Maybe that's a good idea. I'll think about it.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

6

Re: Skinning Guide

Thanks for the encouragement Arne. I have now finished Part 1 i.e. the part dealing with the table elements apart from a little tidying up. I have updated the uploaded file which is at the same link as before.

BTW. If anybody spots any errors could they please let me know.

Re: Skinning Guide

I've added a new class to the style files like you recommended. The class is named puntitle and by default looks like this:

.puntitle {
    font-size: 14px;
    font-weight: bold
}

I've also changed the template files so that the title uses this class. The changes are made for PunBB 1.1.

If you have any other good suggestions for the css stuff, I'd be glad to hear it.

Edit: Oh, and by the way. The additions since the last version look good. Perhaps you should mention something about the image that has to be created for styles? About it being a PNG and what size etc.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

8

Re: Skinning Guide

Kennel wrote:

I've added a new class to the style files like you recommended. The class is named puntitle and by default looks like this:

.puntitle {
    font-size: 14px;
    font-weight: bold
}

I've also changed the template files so that the title uses this class. The changes are made for PunBB 1.1.

If you have any other good suggestions for the css stuff, I'd be glad to hear it.

Edit: Oh, and by the way. The additions since the last version look good. Perhaps you should mention something about the image that has to be created for styles? About it being a PNG and what size etc.

Glad you like it so far. I just spotted a mistake which I have now corrected. I have just worked out your naming system for styles, better late than never smile

I am a bit confused, what do you mean about the image that has to be created for styles? Are you talking about a guide on how to add graphics as backgrounds etc or do you mean the images I am using for the skinning guide?

So far I can't think of any other changes I would make to the CSS. Of course there is some fancy stuff that could be done like turning the menu into rollover buttons just using CSS (no graphics) but thats more something for individuals to do in their own skins.

Now I had better get on and deal with Part 2 which covers the text elements of the board.

9

Re: Skinning Guide

Sweeet....

"You start coding. I'll go find out what they want." - Computer Analyst to Programmer

Re: Skinning Guide

ps21 wrote:

I am a bit confused, what do you mean about the image that has to be created for styles? Are you talking about a guide on how to add graphics as backgrounds etc or do you mean the images I am using for the skinning guide?

No, I'm talking about the images that you can find in /img. Cobalt_new.png, Lithium_new.png, Mercury_new.png etc. If you add a new css file you also have to create an image. It's the new post icon that appears on the index page.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

11

Re: Skinning Guide

Kennel wrote:
No, I'm talking about the images that you can find in /img. Cobalt_new.png, Lithium_new.png, Mercury_new.png etc. If you add a new css file you also have to create an image. It's the new post icon that appears on the index page.

Got it. Will do.

12

Re: Skinning Guide

Mako will probebly get mad at me for this one!? smile

couldent u add a CSS tag for the Input field and the Input buttons (like submit)

i tried it on my pun and its looks pretty fancy smile
it fits the clean look of the punBB

http://www.zetterstrom.info/bb/

i put the punBB up yesterday, so its still in its cradle


Great job on PDF by the way

It takes a big man to cry, but it takes a bigger man to laugh at that man.

Re: Skinning Guide

Ok, I will :)

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Re: Skinning Guide

Ah, now I remember why I chose not to do that earlier. It isn't possible to change the border of <SELECT> elements. It doesn't work in IE and it doesn't work in Mozilla. Opera is the only browser in which it apperas to work.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

15

Re: Skinning Guide

Lol @ Johan.

"You start coding. I'll go find out what they want." - Computer Analyst to Programmer

16

Re: Skinning Guide

Just to let people know the skinning guide is getting done, its just taking longer than I thought. I was delayed by having to work for a living. Anyway, I have altered a few things and added quite a lot. Main thing left to do is to deal with the styles for text links and form elements plus a few bits and pieces. If anybody wants to take a look a latest version is at the same link as before.

Re: Skinning Guide

It looks great. I found two things I would like to comment on:

1. "The trouble is the board fills up the right hand side of the browser."

Doesn't it fill up the left hand side of the browser window? The default alignment is left and if you don't specify the margin thingy, you get a "gap" on the right side.


2. "You now need to open the main.tpl file and find the following line

    <span class="punheadline">{pun_title}</span><br>

Now change it to this

    <span class="puntitle">{pun_title}</span><br>"

A tiny thing here, but the text "Now change it to this" is in the wrong font :)


Otherwise, I think it looks very nice. Do you have any suggestions on how I could improve the style sheets for PunBB? You seem to know you way around this stuff pretty good. I, on the other hand, don't know shit about CSS :) I'm open to suggestions.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

18

Re: Skinning Guide

Thanks Kennel. I have sorted out the errors now and am very nearly finished.

One thing I am a bit stumped on at the moment. There is a class .punhot and also link and hover pseudo classes for punhot. I assume these are for hot topics but I cannot find how to configure a topic as hot and none of the topics on this board show up as hot. Am I missing something obvious.

As for the stylesheet generally, there is nothing I can think of at the moment which needs changing. I think it is probably as small as it can be. The only thing that I might think of adding is a way to style the main menu so it could be made to stand out more. Apart from that I think adding more classes for different board elements is a bad idea as you can end up with a skin which looks inconsistent which rather defeats the whole purpose of using CSS.

Re: Skinning Guide

I can only think of one place where that class is used and that is in admin_users.php when you search for users and the user isn't validated.

<span class="punhot">Not validated</span>

But, since it is only used in one single place, I guess it might as well be removed :)

"Programming is like sex: one mistake and you have to support it for the rest of your life."

20

Re: Skinning Guide

Kennel wrote:

I can only think of one place where that class is used and that is in admin_users.php when you search for users and the user isn't validated.

<span class="punhot">Not validated</span>

But, since it is only used in one single place, I guess it might as well be removed smile

That explains why I couln't find it. Rather than get rid of it why not change it to .punclosed { color: #AAAAAA } since you already have link and hover styles for punclosed. That way you keep the colour differentiation for users that are not validated and you can remove the punhot link and hover styles.

21

Re: Skinning Guide

awesome!!!

22 (edited by Cailean 2004-04-07 03:01)

Re: Skinning Guide

link above is broken...

EDIT:

There is a new topic for the Skinning Guide (renamed Style guide)

Find what you want...  Where you want it... www.truelocal.com