There seems to be some confusion about how this mod works - so let me try to explain the basics:

Problem to solve: When using "Buttons only" we need more than 70 graphics. If you want a different look of your buttons you'll have to create 70 new graphics. For every language you want to add to your forum you also need 70 new graphics. "CSS Buttons" can do all that with what we already have + 2 new graphics. Meaning we can actually get rid of all the buttons th the "yabbfiles/Buttons/English" folder (and any other language folders too).

Basically a YaBB Button consists of 3 elements:

- an icon
- a text
- a body

The icons and text are different for each button while the body is the same with the exception of the width.

We already have all the icons in the default template folder and all the text in the Menu language file - all we need is a flexible body. This problem is solved by 'breaking' the body graphic into two parts - one left part and one right part - and make them "slide" into the needed size. Now we have all 3 elements and all we need to do is to have the script combine them in the right way. The two body parts are used as background images and the icon and text are placed on top of them and voila: A Button is born.

The button parts must be stored in the "yabbfiles/Buttons" folder (not in a language sub folder!!). To make sure the button parts are combined in correct pairs they must have the same name with different additions "_left" and "_right" - see attached example.

So far so good.

In YaBB we have 3 different menu modes: "Icon + Text", "Text only" and "Buttons Only". These modes are defined in 3 different files: Menu0.def, Menu1.def and Menu2.def. Icons and text are in use in the first two modes and Buttons are used in the third mode. Now that CSS Buttons re-use the same text and icon elements for buttons as the other two modes, why not boile all 3 definition files down to just one - I give you: The "Menu.def" file!!

Now to the 'heavy duty serious' part. This is where my limited english vocabulary comes to it's test. Lets break down one of the existing definitions - The "Home" menu item from the "Menu0.def" file. A Hash structure is used to store the definitions. For speed and read/write reasons i've chosen to format the new definitions using a comma to separate the key and value parts and pipes to separate the value elements.

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

As you can tell the 'key' for this element is 'home' - let's take out that one:

home

Next you see the icon in the img tag used here is "home.gif" ($imgext = 'gif') - we take only the name out as all icons are .gif - and add it to what we already have using a comma as separator as explained above:

home,home

Now we need the text for the menu item. Here it's found inside the span tag: $img_txt{'103'}. To save it in a file read/write friendly format we split it up in two - the name: img_txt and the key: 103 - again we add them to what we have, this time using pipes as already explained:

home,home|img_txt|103

The next information we need is the 'alt/title' text.Very often the same as the menu item text in which case you can leave them out - but not the pipes!! For the example we choose to add them here - same format as the text:

home,home|img_txt|103|img_txt|103

Almost there! We now want the css class for this item - in this case the 'imgmenu' selector - add it:

home,home|img_txt|103|img_txt|103|imgmenu

Finally - pew! We need to tell the script wether this is an item from the existing template or if it comes from a mod: "tmp" for template or "mod" for - guess what...

home,home|img_txt|103|img_txt|103|imgmenu|tmp

If the icon comes from a mod, it's should be stored in a "yabbfiles/ModImages" sub folder. In this case we need to add that sub folder to the the icon name. Example from YaMMS mod where the "map.gif" is stored in the "yamms" sub folder:

membermap,yamms/map|maptxt|01|||imgmenu|mod

In this example the observant reader will notice that the item text alt/title text is the same.

Now we have what could be seen as the lowest common denominator for all 3 menu modes and the "Menu.pl" script will combine the elements according to the selected mode. That's all folks!!

Thanks for the post Carsten... I'm getting it now, it is a rather brilliant Mod.

I was thinking that I might have to add those three lines to Menu.def for extra contact buttons too, but obviously I haven't.

There is a slight conflict with adding new contact buttons/info though...

The CSS Buttons Mod searches and replaces this in Load.pl:

<search for>
		$yimimg = qq~<img src="$yyhtml_root/Buttons/$language/yim.png" alt="${$uid.$user}{'yim'}" title="${$uid.$user}{'yim'}" border="0" />~;
		$aimimg = qq~<img src="$yyhtml_root/Buttons/$language/aim.png" alt="${$uid.$user}{'aim'}" title="${$uid.$user}{'aim'}" border="0" />~;
		$skypeimg = qq~<img src="$yyhtml_root/Buttons/$language/skype.png" alt="${$uid.$user}{'skype'}" title="${$uid.$user}{'skype'}" border="0" />~;
		$myspaceimg = qq~<img src="$yyhtml_root/Buttons/$language/myspace.png" alt="${$uid.$user}{'myspace'}" title="${$uid.$user}{'myspace'}" border="0" />~;
		$facebookimg = qq~<img src="$yyhtml_root/Buttons/$language/facebook.png" alt="${$uid.$user}{'facebook'}" title="${$uid.$user}{'facebook'}" border="0" />~;
		$msnimg = qq~<img src="$yyhtml_root/Buttons/$language/msn.png" style="cursor: pointer" 0,width=340,menubar=no,toolbar=no,scrollbars=no'); return false" alt="$themsnname" title="$themsnname" border="0" />~;
		$gtalkimg = qq~<img src="$yyhtml_root/Buttons/$language/gtalk.png" style="cursor: pointer" ight=80,width=340,menubar=no,toolbar=no,scrollbars=no'); return false" alt="$thegtalkname" title="$thegtalkname" border="0" />~;
		$icqimg = qq~<img src="$yyhtml_root/Buttons/$language/icq.png" alt="${$uid.$user}{'icq'}" title="${$uid.$user}{'icq'}" border="0" />~;
</search for>

<replace>
		if($cssbuttons) {
			$viewstyleleft = qq~style="height: 20px; border: 0px; margin: 1px 1px; background-position: top left; background-repeat: no-repeat; text-decoration: none; font-size: 18px; vertical-align: top; cursor: pointer; display: inline-block;"~;
			$viewstyleright = qq~style="height: 20px; border: 0px; margin: 0px; background-position: top right; background-repeat: no-repeat; text-decoration: none; font-size: 18px; vertical-align: top; display: inline-block;"~;
			$viewstyleimage = qq~height: 20px; border: 0px; margin: 0px; background-repeat: no-repeat; vertical-align: top; text-decoration: none; font-size: 18px; display: inline-block;~;
			$viewstyletext = qq~style="height: 20px; border: 0px; margin: 0px; padding: 0px; text-align: left; text-decoration: none; vertical-align: top; white-space: nowrap; display: inline-block;"~;
			$yimmsgimagedir = $imagesdir; if(!-e("$yimmsgimagedir/yim.gif")) { $yimmsgimagedir = $defaultimagesdir; }
			$aimmsgimagedir = $imagesdir; if(!-e("$aimmsgimagedir/aim.gif")) { $aimmsgimagedir = $defaultimagesdir; }
			$skymsgimagedir = $imagesdir; if(!-e("$skymsgimagedir/skype.gif")) { $skymsgimagedir = $defaultimagesdir; }
			$myspacemsgimagedir = $imagesdir; if(!-e("$myspacemsgimagedir/myspace.gif")) { $myspacemsgimagedir = $defaultimagesdir; }
			$facebookmsgimagedir = $imagesdir; if(!-e("$facebookmsgimagedir/facebook.gif")) { $facebookmsgimagedir = $defaultimagesdir; }
			$msnmsgimagedir = $imagesdir; if(!-e("$msnmsgimagedir/msn3.gif")) { $msnmsgimagedir = $defaultimagesdir; }
			$gtkmsgimagedir = $imagesdir; if(!-e("$gtkmsgimagedir/gtalk2.gif")) { $gtkmsgimagedir = $defaultimagesdir; }
			$icqmsgimagedir = $imagesdir; if(!-e("$icqmsgimagedir/icqadd.gif")) { $icqmsgimagedir = $defaultimagesdir; }
			$yimimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'yim'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($yimmsgimagedir/yim.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>YIM</span></span></span></span>~;
			$aimimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'aim'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($aimmsgimagedir/aim.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>AIM</span></span></span></span>~;
			$skypeimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'skype'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($skymsgimagedir/skype.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Skype</span></span></span></span>~;
			$myspaceimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'myspace'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($myspacemsgimagedir/myspace.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Myspace</span></span></span></span>~;
			$facebookimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'facebook'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($facebookmsgimagedir/facebook.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Facebook</span></span></span></span>~;
			$msnimg = qq~<span class="buttonleft" $viewstyleleft title="$themsnname" 0,width=340,menubar=no,toolbar=no,scrollbars=no'); return false"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($msnmsgimagedir/msn3.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>MSN</span></span></span></span>~;
			$gtalkimg = qq~<span class="buttonleft" $viewstyleleft title="$thegtalkname" ight=80,width=340,menubar=no,toolbar=no,scrollbars=no'); return false"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($gtkmsgimagedir/gtalk2.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Gtalk</span></span></span></span>~;
			$icqimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'icq'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($icqmsgimagedir/icqadd.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>ICQ</span></span></span></span>~;
		}
		else {
			$yimimg = qq~<img src="$yyhtml_root/Buttons/$language/yim.png" alt="${$uid.$user}{'yim'}" title="${$uid.$user}{'yim'}" border="0" />~;
			$aimimg = qq~<img src="$yyhtml_root/Buttons/$language/aim.png" alt="${$uid.$user}{'aim'}" title="${$uid.$user}{'aim'}" border="0" />~;
			$skypeimg = qq~<img src="$yyhtml_root/Buttons/$language/skype.png" alt="${$uid.$user}{'skype'}" title="${$uid.$user}{'skype'}" border="0" />~;
			$myspaceimg = qq~<img src="$yyhtml_root/Buttons/$language/myspace.png" alt="${$uid.$user}{'myspace'}" title="${$uid.$user}{'myspace'}" border="0" />~;
			$facebookimg = qq~<img src="$yyhtml_root/Buttons/$language/facebook.png" alt="${$uid.$user}{'facebook'}" title="${$uid.$user}{'facebook'}" border="0" />~;
			$msnimg = qq~<img src="$yyhtml_root/Buttons/$language/msn.png" style="cursor: pointer" 0,width=340,menubar=no,toolbar=no,scrollbars=no'); return false" alt="$themsnname" title="$themsnname" border="0" />~;
			$gtalkimg = qq~<img src="$yyhtml_root/Buttons/$language/gtalk.png" style="cursor: pointer" ight=80,width=340,menubar=no,toolbar=no,scrollbars=no'); return false" alt="$thegtalkname" title="$thegtalkname" border="0" />~;
			$icqimg = qq~<img src="$yyhtml_root/Buttons/$language/icq.png" alt="${$uid.$user}{'icq'}" title="${$uid.$user}{'icq'}" border="0" />~;
		}
</replace> 

Because there has to be a new line added for each new contact info, the YouTube, Twitter, XFire etc Mods can't find the line searched for in Load.pl because your Mod indents them further for the else statement. It might not look as readable, but if you changed that step to the following, then it wouldn't conflict with Contact Mods, and all I would have to do is make a one step patch for each Contact Mod to add a line for the CSS Buttons (rather than a whole separate Mod to make them compatible).

<search for>
		$yimimg = qq~<img src="$yyhtml_root/Buttons/$language/yim.png" alt="${$uid.$user}{'yim'}" title="${$uid.$user}{'yim'}" border="0" />~;
		$aimimg = qq~<img src="$yyhtml_root/Buttons/$language/aim.png" alt="${$uid.$user}{'aim'}" title="${$uid.$user}{'aim'}" border="0" />~;
		$skypeimg = qq~<img src="$yyhtml_root/Buttons/$language/skype.png" alt="${$uid.$user}{'skype'}" title="${$uid.$user}{'skype'}" border="0" />~;
		$myspaceimg = qq~<img src="$yyhtml_root/Buttons/$language/myspace.png" alt="${$uid.$user}{'myspace'}" title="${$uid.$user}{'myspace'}" border="0" />~;
		$facebookimg = qq~<img src="$yyhtml_root/Buttons/$language/facebook.png" alt="${$uid.$user}{'facebook'}" title="${$uid.$user}{'facebook'}" border="0" />~;
		$msnimg = qq~<img src="$yyhtml_root/Buttons/$language/msn.png" style="cursor: pointer" 0,width=340,menubar=no,toolbar=no,scrollbars=no'); return false" alt="$themsnname" title="$themsnname" border="0" />~;
		$gtalkimg = qq~<img src="$yyhtml_root/Buttons/$language/gtalk.png" style="cursor: pointer" ight=80,width=340,menubar=no,toolbar=no,scrollbars=no'); return false" alt="$thegtalkname" title="$thegtalkname" border="0" />~;
		$icqimg = qq~<img src="$yyhtml_root/Buttons/$language/icq.png" alt="${$uid.$user}{'icq'}" title="${$uid.$user}{'icq'}" border="0" />~;
</search for>

<replace>
	if($cssbuttons) {
		$viewstyleleft = qq~style="height: 20px; border: 0px; margin: 1px 1px; background-position: top left; background-repeat: no-repeat; text-decoration: none; font-size: 18px; vertical-align: top; cursor: pointer; display: inline-block;"~;
		$viewstyleright = qq~style="height: 20px; border: 0px; margin: 0px; background-position: top right; background-repeat: no-repeat; text-decoration: none; font-size: 18px; vertical-align: top; display: inline-block;"~;
		$viewstyleimage = qq~height: 20px; border: 0px; margin: 0px; background-repeat: no-repeat; vertical-align: top; text-decoration: none; font-size: 18px; display: inline-block;~;
		$viewstyletext = qq~style="height: 20px; border: 0px; margin: 0px; padding: 0px; text-align: left; text-decoration: none; vertical-align: top; white-space: nowrap; display: inline-block;"~;
		$yimmsgimagedir = $imagesdir; if(!-e("$yimmsgimagedir/yim.gif")) { $yimmsgimagedir = $defaultimagesdir; }
		$aimmsgimagedir = $imagesdir; if(!-e("$aimmsgimagedir/aim.gif")) { $aimmsgimagedir = $defaultimagesdir; }
		$skymsgimagedir = $imagesdir; if(!-e("$skymsgimagedir/skype.gif")) { $skymsgimagedir = $defaultimagesdir; }
		$myspacemsgimagedir = $imagesdir; if(!-e("$myspacemsgimagedir/myspace.gif")) { $myspacemsgimagedir = $defaultimagesdir; }
		$facebookmsgimagedir = $imagesdir; if(!-e("$facebookmsgimagedir/facebook.gif")) { $facebookmsgimagedir = $defaultimagesdir; }
		$msnmsgimagedir = $imagesdir; if(!-e("$msnmsgimagedir/msn3.gif")) { $msnmsgimagedir = $defaultimagesdir; }
		$gtkmsgimagedir = $imagesdir; if(!-e("$gtkmsgimagedir/gtalk2.gif")) { $gtkmsgimagedir = $defaultimagesdir; }
		$icqmsgimagedir = $imagesdir; if(!-e("$icqmsgimagedir/icqadd.gif")) { $icqmsgimagedir = $defaultimagesdir; }
		$yimimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'yim'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($yimmsgimagedir/yim.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>YIM</span></span></span></span>~;
		$aimimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'aim'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($aimmsgimagedir/aim.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>AIM</span></span></span></span>~;
		$skypeimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'skype'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($skymsgimagedir/skype.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Skype</span></span></span></span>~;
		$myspaceimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'myspace'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($myspacemsgimagedir/myspace.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Myspace</span></span></span></span>~;
		$facebookimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'facebook'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($facebookmsgimagedir/facebook.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Facebook</span></span></span></span>~;
		$msnimg = qq~<span class="buttonleft" $viewstyleleft title="$themsnname" 0,width=340,menubar=no,toolbar=no,scrollbars=no'); return false"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($msnmsgimagedir/msn3.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>MSN</span></span></span></span>~;
		$gtalkimg = qq~<span class="buttonleft" $viewstyleleft title="$thegtalkname" ight=80,width=340,menubar=no,toolbar=no,scrollbars=no'); return false"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($gtkmsgimagedir/gtalk2.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Gtalk</span></span></span></span>~;
		$icqimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'icq'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($icqmsgimagedir/icqadd.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>ICQ</span></span></span></span>~;
	}
	else {
		$yimimg = qq~<img src="$yyhtml_root/Buttons/$language/yim.png" alt="${$uid.$user}{'yim'}" title="${$uid.$user}{'yim'}" border="0" />~;
		$aimimg = qq~<img src="$yyhtml_root/Buttons/$language/aim.png" alt="${$uid.$user}{'aim'}" title="${$uid.$user}{'aim'}" border="0" />~;
		$skypeimg = qq~<img src="$yyhtml_root/Buttons/$language/skype.png" alt="${$uid.$user}{'skype'}" title="${$uid.$user}{'skype'}" border="0" />~;
		$myspaceimg = qq~<img src="$yyhtml_root/Buttons/$language/myspace.png" alt="${$uid.$user}{'myspace'}" title="${$uid.$user}{'myspace'}" border="0" />~;
		$facebookimg = qq~<img src="$yyhtml_root/Buttons/$language/facebook.png" alt="${$uid.$user}{'facebook'}" title="${$uid.$user}{'facebook'}" border="0" />~;
		$msnimg = qq~<img src="$yyhtml_root/Buttons/$language/msn.png" style="cursor: pointer" 0,width=340,menubar=no,toolbar=no,scrollbars=no'); return false" alt="$themsnname" title="$themsnname" border="0" />~;
		$gtalkimg = qq~<img src="$yyhtml_root/Buttons/$language/gtalk.png" style="cursor: pointer" ight=80,width=340,menubar=no,toolbar=no,scrollbars=no'); return false" alt="$thegtalkname" title="$thegtalkname" border="0" />~;
		$icqimg = qq~<img src="$yyhtml_root/Buttons/$language/icq.png" alt="${$uid.$user}{'icq'}" title="${$uid.$user}{'icq'}" border="0" />~;
	}
</replace> 

Does that make sense?

Cool. Thanks.

Before I make the patches though, would you mind just verifying that I am adding these two lines to your code correctly. It is working (so I'm guessing so), just want reassuring I'm doing the right thing...

For example, the Twitter Mod will have the images stored in ModImages/Twitter... So, is this the right way to do it?

For your added code in Load.pl:

<search for>
	$facebookmsgimagedir = $imagesdir; if(!-e("$facebookmsgimagedir/facebook.gif")) { $facebookmsgimagedir = $defaultimagesdir; }
</search for>

<add after>
        $twittermsgimagedir = $modimgurl; if(!-e("$twittermsgimagedir/Twitter/twitter.gif")) { $twittermsgimagedir = $modimgurl; }
<add after> 

<search for>
         $facebookimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'facebook'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($facebookmsgimagedir/facebook.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Facebook</span></span></span></span>~;
</search for>

<add after>
         $twitterimg = qq~<span class="buttonleft" $viewstyleleft title="${$uid.$user}{'twitter'}"><span class="buttonright" $viewstyleright><span class="buttonimage" style="background-image: url($twittermsgimagedir/Twitter/twitter.gif); $viewstyleimage"><span class="buttontext" $viewstyletext>Twitter</span></span></span></span>~;
</add after> 

On the first line I'm not 100% sure where is should be defaulting back to, '$defaultimagesdir' or '$modimgurl'...

Forgive me if I'm being dumb.

Ah, right. Got ya. Thanks (Again!)

I am getting an 'Illegal division by zero' error when using '$modimgurl/Twitter' for some reason though.

I think the best thing to do is for me to place the images in their default directories (I can't see any real reason to store them in ModImages anyway, just for contact icons).

I'll change the contact Mods to suit this.

Great!

For my own reference and interest, what exactly does 'qq~' mean? Is is sort of like putting something in quotes?

Right, cheers!

I really should go through some tutorials one day, I've just enjoyed looking and learning bits from the YaBB code. Bit of a copy and paster.

hi

thx for this great mod!

i have some probs with the syntax of the ircmod:

'chatirc' => "<img src=\"$modimgurl/ChatIRC/irc.$imgext\" alt=\"$img_txt{'chatirc'}\" title=\"$img_txt{'chatirc'}\" border=\"0\" /> <span class=\"imgmenu\">$img_txt{'chatirc'}</span>", 

and my try dosn't work:

chatirc,ChatIRC/irc|imgmenu|chatirc|||imgmenu|mod 

pls help

greets, zak