1 Topic by Paul (edited by ps21 2003-12-31 03:46)

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Topic: Buttons with CSS

I am been playing around with the stylesheet trying to come up with some buttons for PunBB just using CSS, no graphics. The aim was to come up with a class which could be attached to an <a> tag , would accomodate different font sizes and different numbers of characters. That was the easy bit. The hard bit was getting it to look similar in all browsers (anybody still using IE5 should be shot - its a real dog).

If you are interested, take a look at
http://www.post21.co.uk/forum
Could you make sure you hit the link to the first forum as there are a couple of additional styles on the next page.

I have been able to test in IE5(win), IE5.5(win), IE6(win), Opera 7, Mozilla 1.4 and Firebird 0.7. I anybody out there is using IE5(Mac) would they please have a look. Similarly, anybody using Linux. The only reasonably modern browser which I know is likely to have problems is Opera 6.

If people are interested in this sort of thing I will post the stylesheet changes and instructions. The buttons can be styled to have a 3D effect and mimic push buttons.

2 Reply by Elijah2

  • Elijah2
  • Guest

Re: Buttons with CSS

If people are interested in this sort of thing I will post the stylesheet changes and instructions. The buttons can be styled to have a 3D effect and mimic push buttons.

I'm interested! Please post the code and instructions wink


I just want to say thank you to Kennel for making such an awesome forum!!!!! I can't wait until version 1.1. Keep up the awesome work! smile

3 Reply by Joey

  • Joey
  • Senior Member
  • Offline
  • Registered: 2003-09-04
  • Posts: 371

Re: Buttons with CSS

Not bad smile

Colours are...for an acquired taste, but as a concept its good

4 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Buttons with CSS

JoeWesthead wrote:

Not bad smile

Colours are...for an acquired taste, but as a concept its good

The colours are irrelevant, its only a test. The idea is that everbody can modify the colours, sizes borders etc to suit their own board.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Buttons with CSS

I really like it and I can imagine a lot of people will install such a "mod".

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

Rickard's Website

6 Reply by Joey

  • Joey
  • Senior Member
  • Offline
  • Registered: 2003-09-04
  • Posts: 371

Re: Buttons with CSS

That was my point ps21 smile - "as a concept its good"

7 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Buttons with CSS

Kennel wrote:

I really like it and I can imagine a lot of people will install such a "mod".

I wasn't sure whether to label this as modding or skinning. In the end I decided it came under the category of skinning because it is purely cosmetic. I will post the stylesheet alterations and some instructions as soon  as v1.1 is  released.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Buttons with CSS

ps21 wrote:

Kennel wrote:

I really like it and I can imagine a lot of people will install such a "mod".

I wasn't sure whether to label this as modding or skinning. In the end I decided it came under the category of skinning because it is purely cosmetic. I will post the stylesheet alterations and some instructions as soon  as v1.1 is  released.

Maybe I should add a CSS class to links that are usually buttons in other forums?

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

Rickard's Website

9 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Buttons with CSS

Kennel wrote:
[Maybe I should add a CSS class to links that are usually buttons in other forums?

Maybe on the "Post new topic" and "Post reply" links so they could be styled to stand out more from general links. Otherwise I think I would leave things as they are.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Buttons with CSS

Yeah. I was also thinking of the links in posts: "E-mail", "Website", "Report" etc.

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

Rickard's Website

11 Reply by Paul (edited by ps21 2004-01-02 02:23)

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Buttons with CSS

Latest developments. I decided that trying to come up with a single class which also covered the main navigation was not a good idea so I have come up with a separate system for main navigation.

Take a look here
http://post21.co.uk/forum

I rewrote the function in common.php which generates the navbar and added the appropriate styles to the stylesheet. The navbar can either be configured to look like buttons or like a solid navigation menu. I can be positioned anywhere (with a bit of fiddling) and can even be stacked vertically if required.

Based on code by Jeffrey Zeldman/Listamatic.

Now back to sorting the buttons out.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Buttons with CSS

I like it. However, I think you've made buttons of the things I like as regular links. I know it was only a test, but still. It would be nice to see how it would look if the "Post reply", "Post new topic", "Report", "Delete" etc. were buttons.

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

Rickard's Website

13 Reply by Joey

  • Joey
  • Senior Member
  • Offline
  • Registered: 2003-09-04
  • Posts: 371

Re: Buttons with CSS

So how can I start using this?

  • Registered: 2004-03-26
  • Posts: 7

Re: Buttons with CSS

Here is a great example on how to create buttons using pure css:

http://www.dylangreene.com/blog.asp?blogID=91

Smaller than a .png or .gif and more recognizable by search spiders.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Buttons with CSS

Dobbson: Those are nice.

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

Rickard's Website

16 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Buttons with CSS

Also take a look here
http://www.pixy.cz/blogg/clanky/cssinlinebuttons/
http://www.notestips.com/80256B3A007F2692/1/NAMO5LV2NN
http://www.gtmcknight.com/buttons/
http://www.sovavsiti.cz/css/w3c_buttons.html

17 Reply by Skye

  • Skye
  • Member
  • Offline
  • Registered: 2004-04-03
  • Posts: 49

Re: Buttons with CSS

Please dont do this...since it does not work in a lot of browsers perfectly. I would prefer that you just use CSS to style form buttons, and make all of the text links like "Report," "Quote," "Post reply," "E-mail," "Website" among others an html form button, then style them with CSS.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Buttons with CSS

Skye: Don't worry. The links will appear as they do today.

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

Rickard's Website

19 Reply by Skye

  • Skye
  • Member
  • Offline
  • Registered: 2004-04-03
  • Posts: 49

Re: Buttons with CSS

Rickard wrote:

Skye: Don't worry. The links will appear as they do today.

No, I am saying that change is good, but not how the original suggestion wanted it.

Read my post more thoroughly.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Buttons with CSS

Hmm. I'm not sure I understand what you mean. Do you mean I should replace the links (Report, Delete etc) with <button>'s?

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

Rickard's Website

21 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Buttons with CSS

He is suggesting that you replace links with form buttons like the submit button. Not a good idea. CSS buttons/rollovers may be flakey but they can be added (or removed) by editing a few lines of the stylesheet if thats what the user wants. Form buttons are embedded in the markup so require editing the php files to remove them.