Page Index Toggle Pages: [1] 2 3 
Topic Tools
Very Hot Topic (More than 25 Replies) Main Buttons for YaBB 3 (Read 13,789 times)
Carsten
Ex Member


Main Buttons for YaBB 3
May 27th, 2009 at 12:24pm
Post Tools
Looking at the download page for latest versions of YaBB one sentence seems to catch the eye: No language packs are available specifically for this release!!! The way i see it, one of the major hurdles conserning language packs are that you have to create more than 70 graphic buttons for each language.

Further more - since version 2.0 YaBB has been 'templated' and a lot of eye candy, creative and popular templates has been created - but you'll either have to live with the default buttons - or create another 70+ buttons to match the theme!
What i would like to bring up for discussion here is another, more flexible way to 'generate' the main buttons for YaBB 3 - the CSS way.

Of course i have a modest example of what i'm talking about here:

http://www.boardmod.org/yabb2/YaBB.pl?num=1240618704


And my 'danish' attempt to explain the basics here:

http://www.boardmod.org/yabb2/YaBB.pl?num=1240618704/31#31
  
Back to top
 
IP Logged
 
JonB
YaBB Administrator
YaBB Next Team
Operations Team
Beta Testers
Support Team
*****
Offline



Posts: 3,913
Location: Land of the Blazing Sun!

YaBB 2.6.1
Re: Main Buttons for YaBB 3
Reply #1 - May 27th, 2009 at 4:59pm
Post Tools
I'm going to take a good look at that!

I agree with you and Globus (in http://www.yabbforum.com/community/YaBB.pl?num=1243412914/0#0 )

Removing barriers has to always be the key.

The whole key here is in building a good architecture.

Smiley
« Last Edit: May 27th, 2009 at 5:10pm by JonB »  

I find your lack of faith disturbing.
Back to top
IP Logged
 
Unilat
Development Team
Theme Team
****
Offline



Posts: 1,047
Location: Columbus Ohio, USA
Re: Main Buttons for YaBB 3
Reply #2 - May 27th, 2009 at 5:29pm
Post Tools
I believe this was built into the previous OOP Y3 code that I looked at, so I'm assuming it will be there with this new approach as well.
  
Back to top
 
IP Logged
 
Carsten
Ex Member


Re: Main Buttons for YaBB 3
Reply #3 - May 27th, 2009 at 6:10pm
Post Tools
JonB wrote on May 27th, 2009 at 4:59pm:
Removing barriers has to always be the key.

Exactly  Smiley

Unilat wrote on May 27th, 2009 at 5:29pm:
I believe this was built into the previous OOP Y3 code that I looked at, so I'm assuming it will be there with this new approach as well.

A little research maybe: http://www.yabbforum.com/community/YaBB.pl?num=1242223524
  
Back to top
 
IP Logged
 
OH Eng
Past Team Members
Documentation Team
Offline



Posts: 4,026
Location: Pensacola, Florida USA
Re: Main Buttons for YaBB 3
Reply #4 - May 27th, 2009 at 9:11pm
Post Tools
I think this is awesome as an existing Mod, so good I include support for it with every template I make, even going back and adding it to ones previously released.  I would love to see this incorporated into the basic code.

@Carsten: The one thing I would wish this feature had, and it's probably not worth doing because of how specialized it would be, is the ability to change the spacing on the right side of the button text and perhaps the ability to add another icon on that side.  A good example of this application might be driven's "skull" template, where it might be cool to add a small skull to each button.  But for the general release, I'd be happy to see the way it works now as a standard feature.

  

 
Back to top
 
IP Logged
 
Carsten
Ex Member


Re: Main Buttons for YaBB 3
Reply #5 - May 27th, 2009 at 9:29pm
Post Tools
OH Eng wrote on May 27th, 2009 at 9:11pm:
The one thing I would wish this feature had, and it's probably not worth doing because of how specialized it would be, is the ability to change the spacing on the right side of the button text and perhaps the ability to add another icon on that side.A good example of this application might be driven's "skull" template, where it might be cool to add a small skull to each button.

Your wish is my command - especially when it's such an easy one  Cool

Just change the right padding in the .buttonright selector

from 6px to whatever is needed for the icon (skull  Shocked ) - and then include the skull  Shocked in the 'buttonname_right' graphic part
Code
Select All
.buttonright {
	padding: 0px 30px 0px 0px;
	background-image: url(../../Buttons/Button22_right.png);
} 

  

moreright.png (Attachment deleted)
Back to top
 
IP Logged
 
OH Eng
Past Team Members
Documentation Team
Offline



Posts: 4,026
Location: Pensacola, Florida USA
Re: Main Buttons for YaBB 3
Reply #6 - May 27th, 2009 at 10:44pm
Post Tools
The Danes are 2 for 2!  Thanks very much for that.  Nice that it's css based so you can have it/not have it as the template needs change.

Might even start a new trend.. kind of a mini-logo for buttons similar to a favicon.

« Last Edit: May 27th, 2009 at 11:20pm by OH Eng »  

cabhome.png (Attachment deleted)

 
Back to top
 
IP Logged
 
cepheid
Senior Member
****
Offline



Posts: 516
Re: Main Buttons for YaBB 3
Reply #7 - May 27th, 2009 at 11:15pm
Post Tools
Carsten, I'm amazed - this is an awesome mod and I think I'll be deploying it on my producting 2.4 boards.  But, a question:

Does your CSS automatically resize the _left and _right images to expand vertically if someone uses a larger font?  When the buttons are just images, they don't expand at all; when they are CSS, the text expands, so the background images need to expand along with the text.  Obviously, the right-side image expands horizontally up to 260px, but vertical expansion is also necessary, and this could be accomplished by simply allowing the background to scale as necessary.

One major benefit of this, besides making it super-easy to add localization, is that it also enhances the accessibility of the forum for visually-impaired people, who can now resize the buttons with CSS instead of having to use image zoom (which looks horrible).

In fact... by allowing the button sizes to expand you can also make the button font size customizable in the style sheet, so admins can select their own button font size in advance.

You could also make the icon size customizable within the style sheet, or make it scale with the text size (to preserve the relative icon-to-button aspect).

Awesome mod!
  
Back to top
WWW  
IP Logged
 
Carsten
Ex Member


Re: Main Buttons for YaBB 3
Reply #8 - May 27th, 2009 at 11:31pm
Post Tools
Vertical scaling is a real drag - and using 'full-height' buttons i think will satisfy visually-impaired people too - have a look at the attached shot. The font attributes (size, face, weight, italize, color) are customizable in the wysiwyg editor already - again see attached.
  

cssbuttlarge.png (Attachment deleted)
Back to top
 
IP Logged
 
Carsten
Ex Member


Re: Main Buttons for YaBB 3
Reply #9 - May 27th, 2009 at 11:33pm
Post Tools
OH Eng wrote on May 27th, 2009 at 10:44pm:
Might even start a new trend.. kind of a mini-logo for buttons similar to a favicon.

Getting even more creative Tom  Cheesy
  
Back to top
 
IP Logged
 
OH Eng
Past Team Members
Documentation Team
Offline



Posts: 4,026
Location: Pensacola, Florida USA
Re: Main Buttons for YaBB 3
Reply #10 - May 27th, 2009 at 11:46pm
Post Tools
I think it's in the male DNA... whenever man is confronted with a new tool, he is compelled to use it.  Grin

My wife bought me a new cordless electric drill once and threatened to return it if I didn't stop drilling holes in everything.  She didn't buy the DNA excuse.  Wink Lips Sealed
  

 
Back to top
 
IP Logged
 
cepheid
Senior Member
****
Offline



Posts: 516
Re: Main Buttons for YaBB 3
Reply #11 - May 27th, 2009 at 11:59pm
Post Tools
Quote:
Vertical scaling is a real drag

Well, when CSS3 comes around, that will be quite easy, but until then, you can emulate it with <IMG> tag whose height scales to the div size (height=100%), then enclose the text in floating div above that whose background-color=transparent, so the underlying IMG shows through.

Alternatively, the "easier" way would be to cut the button up into 4 chunks (left_top, left_bottom, etc.) and allow the div's viewport to show as much as necessary, just as you do for horizontal scaling now.  This is easier to code, but harder on the template-maker since it involves extra graphics.

I think the first method could be implemented relatively simply, though, especially the way you've coded things already... if you need a specific example to show what I mean (I don't know if what I said was clear), I'd be happy to provide one.

Quote:
using 'full-height' buttons i think will satisfy visually-impaired people too - have a look at the attached shot.

By "full-height" you mean making the font large?  The problem is that you're then limited to 16pt (maybe 18pt) and no larger, since anything bigger will overflow the 20px button height.  That would hopefully be enough, but some people are really visually impaired... Smiley

It's not critical obviously - the forum got along just fine without it for years - but I think it would be a good addition, and it should be not too difficult to implement via the above.
  
Back to top
WWW  
IP Logged
 
Carsten
Ex Member


Re: Main Buttons for YaBB 3
Reply #12 - May 28th, 2009 at 12:17am
Post Tools
All suggestions are welcome.

But trust me - i've tested a lot of different approaches, including some with vertical scaling, before i chose the method i use now. It's not so much the 'way' it could be done that is the problem. The two main considerations was - to keep the amount of code necessary down to the lowest possible level considering the number of buttons on some pages - and still keep the different elements of each button together under all circumstances e.g. when a long row of buttons has to wrap if you resize the window. So far i think this is the best solution.

But - convince me...  Wink
  
Back to top
 
IP Logged
 
Carsten
Ex Member


Re: Main Buttons for YaBB 3
Reply #13 - May 28th, 2009 at 12:20am
Post Tools
cepheid wrote on May 27th, 2009 at 11:59pm:
By "full-height" you mean making the font large?

By 'full-height' buttons i mean buttons that are 20 px heigh and visible from top to bottom - hmm  Tongue
  
Back to top
 
IP Logged
 
cepheid
Senior Member
****
Offline



Posts: 516
Re: Main Buttons for YaBB 3
Reply #14 - May 28th, 2009 at 12:38am
Post Tools
Quote:
By 'full-height' buttons i mean buttons that are 20 px heigh and visible from top to bottom - hmm

Right, but that's basically just the current button, right? Smiley

I understand wanting to keep the code size down and as simple as possible, though I think that either of my two approaches above should be relatively OK in terms of added code - they aren't very complex and they only add one or two additional tags to the HTML (per button).  They should not affect wrapping or other design elements; the enhancements will really only affect vertical scaling when using a large font.

Rather than argue about it here, I'll try to work up a mod to your mod that allows vertical scaling; you can take a look and, if you like it, incorporate it into your mod.  If you don't like it, we can toss it. Smiley
  
Back to top
WWW  
IP Logged
 
Page Index Toggle Pages: [1] 2 3 
Topic Tools
 
  « Board Index ‹ Board  ^Top