Page Index Toggle Pages: [1] 2 3 4 Send TopicPrint
Very Hot Topic (More than 25 Replies) CSS Buttons 4 YaBB 2.4 (and 2.3.1) (beta 0.1.5) (Read 36681 times)
Carsten
God Member
*****
Offline


...to much YaMS

Posts: 3281
Location: Langå
Joined: Aug 2nd, 2002
Gender: Male
CSS Buttons 4 YaBB 2.4 (and 2.3.1) (beta 0.1.5)
Apr 25th, 2009 at 12:18am
Print Post  
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:

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.





Apr 25th, 2009 at 9:24pm - beta 0.1.1: Added a few missing buttons. All changes are in "/Variables/Menu.def".

Apr 26th, 2009 at 6:32am - beta 0.1.2: fix for script trying to load standard button icons from the ModImages folder. All changes are in "/Sources/Menu.pl"

Apr 29th, 2009 at 10:30pm - beta 0.1.3: fix for input and button style selector and js glitch updating preview window on every mouseup event.

May 1st, 2009 at 10:06pm - beta 0.1.4: fixed a few inline style glitches.

May 12th, 2009 at 9:52pm - beta 0.1.5: very small change in code format for better compatibility with other mods.

May 16th, 2009 at 4:49pm - beta 0.1.5+: no changes, just added yabb 2.3.1 compatible mod file to the package.
« Last Edit: Feb 26th, 2010 at 9:22am by Carsten »  

cssbutton.png ( 167 KB | Downloads )
cssbutton.png

If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.
Back to top
 
IP Logged
 
Derek Bullock
Full Member
***
Offline


I love Camp Oven Cooking

Posts: 184
Location: Brisbane
Joined: Nov 9th, 2007
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #1 - Apr 25th, 2009 at 12:23am
Print Post  
Looks like I am going to have to upgrade to 2.4 soon. Waiting for a couple more 2.4 mods to appear first.  Grin Grin Grin Grin

Thanks Carsten
  

Back to top
WWW  
IP Logged
 
LWS
Senior Member
****
Offline


seek and ye shall find...i
must be BLIND!!

Posts: 285
Location: Southern Ohio
Joined: Feb 25th, 2007
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #2 - Apr 25th, 2009 at 12:45am
Print Post  
excellent! this will be very usefull
  

LoneWebSurfer.com Nothing but YaBB templates
Back to top
WWW  
IP Logged
 
Cable
Junior Member
**
Offline


I love YaBB 1G - SP1.2!

Posts: 97
Joined: Sep 28th, 2007
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #3 - Apr 25th, 2009 at 3:06am
Print Post  
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?

  
Back to top
 
IP Logged
 
Derek Bullock
Full Member
***
Offline


I love Camp Oven Cooking

Posts: 184
Location: Brisbane
Joined: Nov 9th, 2007
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #4 - Apr 25th, 2009 at 5:03am
Print Post  
Carsten wrote on Apr 25th, 2009 at 12:18am:
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
  

Back to top
WWW  
IP Logged
 
pyragony
Junior Member
**
Offline


abgeschlafft und ausgebufft

Posts: 85
Location: Eichenau
Joined: Apr 26th, 2008
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #5 - Apr 25th, 2009 at 10:58am
Print Post  
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: Apr 25th, 2009 at 3:29pm by pyragony »  

Back to top
WWW  
IP Logged
 
Jeff
God Member
*****
Offline


There are no bugs there
are only features

Posts: 2552
Joined: Jan 14th, 2005
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #6 - Apr 25th, 2009 at 11:02am
Print Post  
pyragony wrote on Apr 25th, 2009 at 10:58am:
German and German_Du is the same

Lips Sealed

Quote:
Hier können Sie


better for Du "Hier kannst Du..." Tongue
  

greetings
Jeff
Back to top
WWW  
IP Logged
 
Carsten
God Member
*****
Offline


...to much YaMS

Posts: 3281
Location: Langå
Joined: Aug 2nd, 2002
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #7 - Apr 25th, 2009 at 11:08am
Print Post  
@ 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
Select All
/* 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 */ 

  

If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.
Back to top
 
IP Logged
 
Derek Bullock
Full Member
***
Offline


I love Camp Oven Cooking

Posts: 184
Location: Brisbane
Joined: Nov 9th, 2007
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #8 - Apr 25th, 2009 at 11:10am
Print Post  
Carsten wrote on Apr 25th, 2009 at 11:08am:
@ Derek - what is not included in the package?



The two new graphics you need to create
  

Back to top
WWW  
IP Logged
 
Carsten
God Member
*****
Offline


...to much YaMS

Posts: 3281
Location: Langå
Joined: Aug 2nd, 2002
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #9 - Apr 25th, 2009 at 11:16am
Print Post  
Derek Bullock wrote on Apr 25th, 2009 at 11:10am:
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"
  

If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.
Back to top
 
IP Logged
 
Derek Bullock
Full Member
***
Offline


I love Camp Oven Cooking

Posts: 184
Location: Brisbane
Joined: Nov 9th, 2007
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #10 - Apr 25th, 2009 at 11:42am
Print Post  
@ 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
  

buttons.jpg ( 67 KB | Downloads )
buttons.jpg

Back to top
WWW  
IP Logged
 
Carsten
God Member
*****
Offline


...to much YaMS

Posts: 3281
Location: Langå
Joined: Aug 2nd, 2002
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #11 - Apr 25th, 2009 at 12:06pm
Print Post  
Derek Bullock wrote on Apr 25th, 2009 at 11:42am:
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.
  

csspic.png ( 25 KB | Downloads )
csspic.png

If you knock your head against a brick wall and hear a hollow sound, it's not necessarily coming from the wall.
Back to top
 
IP Logged
 
Derek Bullock
Full Member
***
Offline


I love Camp Oven Cooking

Posts: 184
Location: Brisbane
Joined: Nov 9th, 2007
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #12 - Apr 25th, 2009 at 12:09pm
Print Post  
This is what has happened.  No images appearing on the buttons
  

buttons2.jpg ( 53 KB | Downloads )
buttons2.jpg

Back to top
WWW  
IP Logged
 
Cable
Junior Member
**
Offline


I love YaBB 1G - SP1.2!

Posts: 97
Joined: Sep 28th, 2007
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #13 - Apr 25th, 2009 at 1:07pm
Print Post  
Carsten wrote on Apr 25th, 2009 at 11:08am:
@ 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!


  
Back to top
 
IP Logged
 
pyragony
Junior Member
**
Offline


abgeschlafft und ausgebufft

Posts: 85
Location: Eichenau
Joined: Apr 26th, 2008
Gender: Male
Re: CSS Buttons 4 YaBB 2.4 (beta 0.1)
Reply #14 - Apr 25th, 2009 at 3:28pm
Print Post  
Jeff wrote on Apr 25th, 2009 at 11:02am:
pyragony wrote on Apr 25th, 2009 at 10:58am:
German and German_Du is the same

Lips Sealed

Quote:
Hier können Sie


better for Du "Hier kannst Du..." Tongue


Jepp....it´s better. Many thanks. I corrected it.
  

Back to top
WWW  
IP Logged
 
Page Index Toggle Pages: [1] 2 3 4
Send TopicPrint