Ever wanted to add a new set of graphic buttons to your YaBB but gave up because it was to much trouble making more than 60 different graphics?

With this mod you'll get the job done by making only 2 - yes TWO - small graphics!!! One left part 20x10 px and one right part 260x20 px in .png or .gif format. Give them the same name except for the last part which must be '_left' and '_right'. Place them directly in the 'yabbfiles/Buttons' folder and - Voila - they will appear in the Style Sheet wysiwyg editor for you to add to your templates.

Format for new button:

UnikeName_left.png (10x20 px)
UnikeName_right.png (260x20 px)


Also added a new extra "Menu.def" to load all 3 menu modes from only one file. The format for adding new buttons to the new "Menu.def" file compared to "old style" is:

emplate-or-mod

For the "Home" button it looks like this:

New Menu.def style:
home,home|img_txt|103|img_txt|103|imgmenu|tmp

Old Menu0.def:
'home' => "<img src=\"$imagesdir/home.$imgext\" alt=\"$img_txt{'103'}\" border=\"0\" /> <span class=\"imgmenu\">$img_txt{'103'}</span>",

Old Menu1.def:
'home' => "<span class=\"imgmenu\">$img_txt{'103'}</span>",

Old Menu2.def:
'home' => "<img src=\"$html_root/Buttons/$button_language/home.$imgext\" alt=\"$img_txt{'103'}\" border=\"0\" />",


Included in the zip package are new 'default.css' and 'yabb21.css' - if you dont want to overwrite your existing .css files you can copy the styles from the 'css_adds.txt' file (also included in the zip) and paste them into your .css file(s).

If the template in use does not have the css-button styles in it the board will automatically load the old menu definitions.

---------------------
Screenshot:


----------------------

Thanks to ThM for German translations of text for Templates.lng:

German_Sie

'buttontext' => 'CSS Buttons',
'buttondescription' => 'Hier können Sie die Position des Icon, den Text innerhalb des Buttons sowie die Hintergrund Grafik für den Button ändern.',
'moveicon1' => 'Icon nach unten setzen um:',
'moveicon2' => 'Icon nach rechts setzen um:',
'iconspace' => 'Icon Abstand zum Text:',
'movetext' => 'Text nach unten setzen um:', 

German_Du

'buttontext' => 'CSS Buttons',
'buttondescription' => 'Hier kannst Du die Position des Icon, den Text innerhalb des Buttons sowie die Hintergrund Grafik für den Button ändern.',
'moveicon1' => 'Icon nach unten setzen um:',
'moveicon2' => 'Icon nach rechts setzen um:',
'iconspace' => 'Icon Abstand zum Text:',
'movetext' => 'Text nach unten setzen um:',  

Thanks you very much.
Work ok. 

Hi Carsten,

it's right, this mod changed only the standard yabb buttons ?

I've installed JetLi's Quick Quote Mod and the button "Quick Quote" in the package don't show in my board.

I changed to the default template and i see the button "Quick Quote"

ok .. thx .. i understand ...

I added this line in menu.def

quick_quote,quick_quote|img_txt|145q|||imgwindowbg|tmp 

but no change in my template ... I tried it more

No success ...

i think it's a little error from me .... i tried it later ... thx for reply ....

Hi Carsten,

with a little help from JetLi now it run's perfect. I have build in the wrong string in Menu.def

now i understand how it works...

Many thanks for your help and the great Mod and thanks also JetLi.

Just ran into a problem myself which some other may run into.  Once the mod has been installed and all files uploaded, there is a chance you might upload the 'default.css' and 'yabb21.css' files (or edit them yourself) to the wrong location.  The result is that the Mod will show as "Installed" on the Admin CP "Installed Mods" tab - but the CSS Buttons section of the Stylesheet menu will not appear.

Simply click on the "source" button at the top of the Edit Style Sheet window, find a suitable place and then enter the code in the 'css_adds.txt' file and hit "save default.css".   This should return you to the WYSIWYG editor with the CSS buttons now showing