BoardMod Support Forum - CSS Buttons 4 YaBB 2.4 (and 2.3.1) (beta 0.1.5)

Carsten

Mod Author of the Year 2003

Offline

Posts: 3281

25.04.09 at 01:18:24

Ever wanted to add a new set of graphic buttons to your YaBB template 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 10x20 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.

This also means that you can add different buttons to different templates!!

Format for new button:

UnikName_left.png (10x20 px)
UnikName_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:

hash-key,icon|hash-for-text|key-for-text|hash-for-alt|key-for-alt|backgr-style|t
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=\"$yyhtml_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.

Download CSS Buttons 4 YaBB 2.4

25.04.09 at 22:24:20 - beta 0.1.1: Added a few missing buttons. All changes are in "/Variables/Menu.def".

26.04.09 at 07:32:22 - beta 0.1.2: fix for script trying to load standard button icons from the ModImages folder. All changes are in "/Sources/Menu.pl"

29.04.09 at 23:30:14 - beta 0.1.3: fix for input and button style selector and js glitch updating preview window on every mouseup event.

01.05.09 at 23:06:25 - beta 0.1.4: fixed a few inline style glitches.

12.05.09 at 22:52:20 - beta 0.1.5: very small change in code format for better compatibility with other mods.

16.05.09 at 17:49:57 - beta 0.1.5+: no changes, just added yabb 2.3.1 compatible mod file to the package.

« Last Edit: 26.02.10 at 09:22:32 by Carsten »

IP Logged

cssbutton.png (167 KB | 401 )

If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.

Derek Bullock Fulltime Hacker Offline Posts: 183	Reply #1 - 25.04.09 at 01:23:55 Looks like I am going to have to upgrade to 2.4 soon. Waiting for a couple more 2.4 mods to appear first. Thanks Carsten
	IP Logged

LWS Hacker Expert Offline Posts: 285	Reply #2 - 25.04.09 at 01:45:16 excellent! this will be very usefull
	IP Logged LoneWebSurfer.com Nothing but YaBB templates

Cable

Hacker Wannabe

Offline

Posts: 97

Reply #3 - 25.04.09 at 04:06:29

Carsten - this is EXCELLENT!

Are the color selections (options) for the buttons customizable? Reason I ask is this might be something a template maker might want to provide in with a template set for people who use this Mod. I've just made several new templates each with its own YaBBC button colors. It would be great to be able to provide a color or gradient image to make the Main buttons come out the same.

How would I do that, if it's possible? Is there a specific image file name that I could use to make it show up in the color selections?

IP Logged

Derek Bullock

Fulltime Hacker

Offline

Posts: 183

Reply #4 - 25.04.09 at 06:03:30

Carsten wrote on 25.04.09 at 01:18:24:

With this mod you'll get the job done by making only 2 - yes TWO - small graphics!!! One left part 10x20 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.

This also means that you can add different buttons to different templates!!

Format for new button:

UnikName_left.png (10x20 px)
UnikName_right.png (260x20 px)

Carsten

Can I ask why these are not included in the package.

Thanks

IP Logged

pyragony

Hacker Wannabe

Offline

Posts: 80

Reply #5 - 25.04.09 at 11:58:10

Her are the German Language. German and German_Du is the same.

Quote:

<edit file>
Languages/German/Templates.lng
</edit file>

<search for>
);
</search for>

<add before>
'buttontext' => 'CSS Buttons',
'buttondescription' => 'Hier können Sie die Position der Icons und des Textes in den Buttons und die Hintergrundgraphiken für die Buttons ändern.',
'moveicon1' => 'Icon runter',
'moveicon2' => 'Icon rechts',
'iconspace' => 'Icon leer',
'movetext' => 'Text runter',
</add before>

Quote:

<edit file>
Languages/German_Du/Templates.lng
</edit file>

<search for>
);
</search for>

<add before>
'buttontext' => 'CSS Buttons',
'buttondescription' => 'Hier kannst du die Position der Icons und des Textes in den Buttons und die Hintergrundgraphiken für die Buttons ändern.',
'moveicon1' => 'Icon runter',
'moveicon2' => 'Icon rechts',
'iconspace' => 'Icon leer',
'movetext' => 'Text runter',
</add before>

« Last Edit: 25.04.09 at 16:29:14 by pyragony »

IP Logged

Jeff Moderator Offline Posts: 2552	Reply #6 - 25.04.09 at 12:02:27 pyragony wrote on 25.04.09 at 11:58:10: German and German_Du is the same Quote: Hier können Sie better for Du "Hier kannst Du..."
	IP Logged greetings Jeff

Carsten

Mod Author of the Year 2003

Offline

Posts: 3281

Reply #7 - 25.04.09 at 12:08:08

@ driven - thanks, hope so Wink

@ Derek - what is not included in the package?

@ Cable and all - let's take your nice "Brick & Chrome" template. To include a button for that template all you need to do is create two "partial" button graphics: Left part "chrome_left.png" (10x20 px) and right part "chrome_right.png" (260x20 px) - then place them directly in the "yabbfiles/Buttons" folder (not in a language sub-folder). For example have a look at the sample buttons included in the package.

Now, in your templates .css file include this:
Code:

/* Soft coded css buttons */
.buttonleft {
	padding: 0px 0px 0px 6px;
	background-image: url(../../Buttons/chrome_left.png);
}
.buttonright {
	padding: 0px 6px 0px 0px;
	background-image: url(../../Buttons/chrome_right.png);
}
.buttonimage {
	padding: 0px 0px 0px 25px;
	background-position: 0px 0px;
}
.buttontext {
	position: relative;
	top: 5px;
	left: 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	font-weight: normal;
	font-style: normal;
}
/* Soft coded css buttons end */

IP Logged

If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.

Derek Bullock Fulltime Hacker Offline Posts: 183	Reply #8 - 25.04.09 at 12:10:37 Carsten wrote on 25.04.09 at 12:08:08: @ Derek - what is not included in the package? The two new graphics you need to create
	IP Logged

Carsten

Mod Author of the Year 2003

Offline

Posts: 3281

Reply #9 - 25.04.09 at 12:16:35

Derek Bullock wrote on 25.04.09 at 12:10:37:

The two new graphics you need to create

Ah, ok - i see what you mean. Included in the package are 10 (x2) sample buttons - the once you see in the wysiwyg editor. They are located in the "yabbfiles/Buttons" folder. "UnikName" was only for explaining the format of new buttons that you create yourself. Wink

Take the "WaterBlue" button - it's made out of "WaterBlue_left.png" and "WaterBlue_right.png"

IP Logged

If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.

Derek Bullock Fulltime Hacker Offline Posts: 183	Reply #10 - 25.04.09 at 12:42:20 @ Carsten Thank you for that explanation. Am I right in assuming that this will remove the image from the buttons as seen in pic below
	IP Logged buttons.jpg (67 KB \| 297 )

Carsten Mod Author of the Year 2003 Offline Posts: 3281	Reply #11 - 25.04.09 at 13:06:29 Derek Bullock wrote on 25.04.09 at 12:42:20: Am I right in assuming that this will remove the image from the buttons as seen in pic below Nope - the standard icons are used as images in the buttons - as in attached pic.
	IP Logged csspic.png (25 KB \| 295 ) If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.

Derek Bullock Fulltime Hacker Offline Posts: 183	Reply #12 - 25.04.09 at 13:09:19 This is what has happened. No images appearing on the buttons
	IP Logged buttons2.jpg (53 KB \| 302 )

Cable

Hacker Wannabe

Offline

Posts: 97

Reply #13 - 25.04.09 at 14:07:30

Carsten wrote on 25.04.09 at 12:08:08:

@ Cable and all - let's take your nice "Brick & Chrome" template. To include a button for that template all you need to do is create two "partial" button graphics: Left part "chrome_left.png" (10x20 px) and right part "chrome_right.png" (260x20 px) - then place them directly in the "yabbfiles/Buttons" folder (not in a language sub-folder). For example have a look at the sample buttons included in the package.

Now, in your templates .css file include this:

Wow, could it be any easier? That's really good news.

I am going to revise all my templates to be compatible with this mod. I think it will work for all of them but I will have to check the images for Armor_Plate since it has "rivets" in them that I wouldn't want repeated across the button. But I'm sure I can make something that works.

Thanks!

IP Logged

pyragony Hacker Wannabe Offline Posts: 80	Reply #14 - 25.04.09 at 16:28:21 Jeff wrote on 25.04.09 at 12:02:27: pyragony wrote on 25.04.09 at 11:58:10: German and German_Du is the same Quote: Hier können Sie better for Du "Hier kannst Du..." Jepp....it´s better. Many thanks. I corrected it.
	IP Logged