YaBB Community and Support Forum
YaBB Home About YaBB Download YaBB YaBB Support Customize Your Forum Development Contribute to the Project
  Welcome, Guest. Please Login or Register


 
Pages: 1 2 3 
Topic Tools
 
Main Buttons for YaBB 3 (Read 12,252 times)
 May 27th, 2009 at 12:24pm
There are no actions to perform.  
Carsten 
Ex Member


None
Main Buttons for YaBB 3
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
 
 
IP Logged  
 Reply #1 - May 27th, 2009 at 4:59pm
There are no actions to perform.  

JonB 
YaBB Administrator
YaBB Next Team
Operations Team
Beta Testers
Support Team
*****
Offline
Posts: 3,641
Land of the Blazing Sun!


None
Re: Main Buttons for YaBB 3
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.
jonbservergeek  
IP Logged  
 Reply #2 - May 27th, 2009 at 5:29pm
There are no actions to perform.  

Unilat 
Development Team
Theme Team
****
Offline
Posts: 1,047
Columbus Ohio, USA


None
Re: Main Buttons for YaBB 3
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.
 
 
IP Logged  
 Reply #3 - May 27th, 2009 at 6:10pm
There are no actions to perform.  
Carsten 
Ex Member


None
Re: Main Buttons for YaBB 3
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
 
 
IP Logged  
 Reply #4 - May 27th, 2009 at 9:11pm
There are no actions to perform.  

OH Eng 
Past Team Members
Documentation Team
Offline
Posts: 4,026
Pensacola, Florida USA


None
Re: Main Buttons for YaBB 3
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.

 
 
OH Eng  
IP Logged  
 Reply #5 - May 27th, 2009 at 9:29pm
There are no actions to perform.  
Carsten 
Ex Member


None
Re: Main Buttons for YaBB 3
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)
 
IP Logged  
 Reply #6 - May 27th, 2009 at 10:44pm
There are no actions to perform.  

OH Eng 
Past Team Members
Documentation Team
Offline
Posts: 4,026
Pensacola, Florida USA


None
Re: Main Buttons for YaBB 3
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)
 
OH Eng  
IP Logged  
 Reply #7 - May 27th, 2009 at 11:15pm
There are no actions to perform.  

cepheid 
Senior Member
****
Offline
Posts: 516


None
Re: Main Buttons for YaBB 3
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!
 
WWW  
IP Logged  
 Reply #8 - May 27th, 2009 at 11:31pm
There are no actions to perform.  
Carsten 
Ex Member


None
Re: Main Buttons for YaBB 3
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)
 
IP Logged  
 Reply #9 - May 27th, 2009 at 11:33pm
There are no actions to perform.  
Carsten 
Ex Member


None
Re: Main Buttons for YaBB 3
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
 
 
IP Logged  
 Reply #10 - May 27th, 2009 at 11:46pm
There are no actions to perform.  

OH Eng 
Past Team Members
Documentation Team
Offline
Posts: 4,026
Pensacola, Florida USA


None
Re: Main Buttons for YaBB 3
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
 
 
OH Eng  
IP Logged  
 Reply #11 - May 27th, 2009 at 11:59pm
There are no actions to perform.  

cepheid 
Senior Member
****
Offline
Posts: 516


None
Re: Main Buttons for YaBB 3
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.
 
WWW  
IP Logged  
 Reply #12 - May 28th, 2009 at 12:17am
There are no actions to perform.  
Carsten 
Ex Member


None
Re: Main Buttons for YaBB 3
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
 
 
IP Logged  
 Reply #13 - May 28th, 2009 at 12:20am
There are no actions to perform.  
Carsten 
Ex Member


None
Re: Main Buttons for YaBB 3
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
 
 
IP Logged  
 Reply #14 - May 28th, 2009 at 12:38am
There are no actions to perform.  

cepheid 
Senior Member
****
Offline
Posts: 516


None
Re: Main Buttons for YaBB 3
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
 
WWW  
IP Logged  
Pages: 1 2 3 
Topic Tools
 

Get Yet another Bulletin Board at SourceForge.net. Fast, secure and Free Open Source software downloads Support This Project BoardMod - YaBB features and templates YaBB Codex - support on installation and usage YaBB Toolbar for your browser

YaBB Facebook Group Page

Vulnerability Scanner

Valid RSS Valid XHTML Valid CSS Powered by Perl
YaBB Chat and Support Community » Powered by YaBB 3.0 Beta!
YaBB Forum Software © 2000-2011. All Rights Reserved.