Page Index Toggle Pages: 1 [2] 3 
Topic Tools
Very Hot Topic (More than 25 Replies) Main Buttons for YaBB 3 (Read 13,551 times)
cepheid
Senior Member
****
Offline



Posts: 516
Re: Main Buttons for YaBB 3
Reply #18 - Jun 20th, 2009 at 6:50pm
Post Tools
You might also consider trimming extraneous attributes from the img tags, e.g. there's no need for a TITLE attribute on some of them.  I know the ALT attribute must be there for strict XHTML compliance, so that can be left in, assuming YaBB actually is strict XHTML-compliant... but to reduce code size, I do recommend trimming out anything that isn't strictly necessary.

Also, you might consider making the old buttons available as an option, because on some browsers, rendering a few cached images is faster than rendering a whole LOT of spans... the new buttons are much better in terms of localization, customization, and accessibilty, but that does come at the price of a lot of increased HTML (and hence required processing by the client).

It's probably not a big issue, but it's a thought...
« Last Edit: Jun 20th, 2009 at 6:53pm by cepheid »  
Back to top
WWW  
IP Logged
 
deti
Legacy Dev Team
Development Team
****
Offline



Posts: 2,650
Location: Prien am Chiemsee, Germany
Re: Main Buttons for YaBB 3
Reply #17 - Jun 20th, 2009 at 6:27pm
Post Tools
@ Carsten
Can we do something so that the space between the right side of the image has always the same space to the text? At the moment it depends on the width of the image.
« Last Edit: Jun 20th, 2009 at 6:27pm by deti »  

Was immer Du tun kannst
oder erträumst tun zu können,
beginne es.
Kühnheit besitzt Genie,
Macht und magische Kraft.
Beginne es jetzt.
Whatever you can do
or dream you can,
begin it.
Boldness has genius,
power and magic in it.
Begin it now.
J. W. Goethe
Back to top
WWW  
IP Logged
 
deti
Legacy Dev Team
Development Team
****
Offline



Posts: 2,650
Location: Prien am Chiemsee, Germany
Re: Main Buttons for YaBB 3
Reply #16 - Jun 15th, 2009 at 10:14pm
Post Tools
Add of Carstens "CSS Buttons 4 YaBB 2.4"-Mod lightly modified to SVN.

Modification:
When saving the style, the 3 MenuX.def files are written new. This way we don't have to call and run the Menu.pl on every call to YaBB. Everything works as at the moment. If you see a problem doing it so Carsten, let me know. The Menu.pl I put into the admin-dir since it is not used in sources and renamed it to Menudef.pl

All ...Buttons/English/ files I didn't remove jet from SVN - for comparison purpose -, must be done later.

What I noticed is,
- that many images are different from the images we have in the Buttons. I think this should be fixed.
- some images have much space until the text others are going over it. We must find a way to have always the same space between the right end of the image and the first character of the text. I suspect this is a matter of image width. They must all have the same and all images must be aligned right.



I found a little bug in your code:
Code
Select All
	else {
		$button_imgurl = qq~$forumstylesurl/$usestyle~;
		if(!-e ("$forumstylesurl/$usestyle/$button_icon.$imgext")) {
			$button_imgurl = qq~$forumstylesurl/default~;
		}
	} 


Must be $forumstylesdir Wink
  

Was immer Du tun kannst
oder erträumst tun zu können,
beginne es.
Kühnheit besitzt Genie,
Macht und magische Kraft.
Beginne es jetzt.
Whatever you can do
or dream you can,
begin it.
Boldness has genius,
power and magic in it.
Begin it now.
J. W. Goethe
Back to top
WWW  
IP Logged
 
Carsten
Ex Member


Re: Main Buttons for YaBB 3
Reply #15 - May 28th, 2009 at 12:46am
Post Tools
cepheid wrote on May 28th, 2009 at 12:38am:
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.

Yep - that's a plan - check danish time on your world clock - I need my beauty sleep now Smiley
  
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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
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 #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
 
Page Index Toggle Pages: 1 [2] 3 
Topic Tools
 
  « Board Index ‹ Board  ^Top