HelpHelpSearchSearchMembersMembersCalendarCalendar
Welcome, Guest. Please login or register.

Login with username, password and session length
December 01, 2008, 04:29:13 PM
Please use the support forum for support issues instead of sending me pm's. Thanks.
I will not reply to support issues via pm.
« previous next »
Pages: [1] 2   Go Down
0 Members and 1 Guest are viewing this topic. Topic Tools  
Read November 22, 2006, 08:25:28 PM #0
Zamurick

[TUT]How To: Nav buttons for Aa_New_Damage

  Okay, first off, this isn't a request, it's a tutorial.  I want to thank Daniel15 from the Simple Machines forum for the coding, but I've come up with how to make the button myself Grin.  Another thing, this is my first post because I made this account to help with this.  The blank menu button is attached to this post at the bottom, so download that.  You'll also need to have downloaded the psd files from somewhere on this site, and have installed the text from it.  Open it with your preferred image editor, I use PSP(Paint Shop Pro) 8.  So once you've done that, it will look like this(in PSP 8): 
  You see where it says '100', in the text box on the far left?  Change it from 100 to 1000.  So it looks like this: 
  You might notice that there is a gray square in the top-left corner of the blank menu.  That is the color the text should be.  If you're using PSP 8, select the 'Dropper Tool' option(also called the color picker), and right-click on that gray square.  Make sure you right click or that won't be the color of the text.  Then, left-click on the square right beside(right side, not below) the gray square and use the paint tool to draw over it, so you won't see that gray square anymore.  Now, use the text tool to have the text say what you want it to(e.g., NEW).  Use the text '04b_21', if that is what you named it when you installed the text from the psd files.  Also set the text size to 6.  When you've made the text move it so there are only two squares/pixels of each letter above the black.  This will probably sound very confusing, so it should look like this in PSP 8: 
  Try to center the text as much as you can in the image.  When you do so, you should count the pixels from the far left to the first pixel of the first letter.  Then count the pixels from the last pixel of the last letter, to the 3rd last pixel of the whole image.  DO NOT COUNT THE LAST 2 PIXELS TO EVEN IT OUT, DOING SO WILL MAKE IT LOOK BAD AND QUITE UNEVEN!  Now add the text at the bottom part of the image, lining it up with the top text, but the color should be completely white.  Not the original text's color.  Make sure there are only two pixels/squares above the dark green(notice how the other text has only 2 pixels/squares above the black, this will have only 2 pixels/squares of text above the dark green).  Now, it should look like this in PSP 8: 
  Now, save it as menu_new.gif (if the text on the button is 'NEW'). 
 
    I hope this helped!  If you want to see my MSN button, feel free to drop by my forum at http://www.kimberleyclan.com/forums/index.php!  EDIT: I messed up the pictures, I fixed them now though.  EDIT2:  I removed the code, because most mods that require new buttons don't require the same code, and I keep having to recode for every update.
« Last Edit: July 22, 2008, 06:46:11 PM by m3talc0re »
Offline  
Read November 23, 2006, 11:53:32 PM #1
m3talc0re

Re: [TUT]Making a new navigation button in Aa_New_Damage theme!

Good job, hope this helps some people.


The real hell is your life gone wrong.
Offline  
Read November 24, 2006, 03:12:49 PM #2
Zamurick

Re: [TUT]Making a new navigation button in Aa_New_Damage theme!

  Thank you.  I hope this helps too!  By the way, thanks for making such an awesome theme!
Offline  
Read June 22, 2007, 02:46:18 PM #3
eRott

Re: [TUT]Making a new navigation button in Aa_New_Damage theme!

I know this topic is old, so I apologize. However, I would just like to point out, that you are not supposed to make the font a solid color if I am correct. Your are supposed to set its opacity. I set mine to 60% and its the exact same as the rest. By using the solid color, you are just giving the illusion as though its the same as the rest of the buttons. But if you take a closer look at any of the originals, they are not just solid colors, its white text with its opacity set to 60%. (I used Fireworks, not PS). But thanks for the blank menu button. It really helped.
« Last Edit: June 22, 2007, 02:48:46 PM by eRott »
Offline  
Read July 30, 2007, 05:28:59 PM #4
m3talc0re

Re: [TUT]Making a new navigation button in Aa_New_Damage theme!

Here is a little more to it:
Save as:











To add these, do this:

style.css:

Scroll to the very bottom of the css file and add this code:
Code:
.main-navigation li.mainNav-**button name**
{
 width:47px; /**width of the button**/
 background: url(images/menu_**button name**.gif) 0 -18px no-repeat;
}
.main-navigation li.mainNav-**button name** a
{
 width:47px; /**width of the button**/
 background: url(images/menu_**button name**.gif) 0 0 no-repeat;
}
.main-navigation li.mainNav-**button name** a:hover
{
 background: transparent;
}

Then in the index.template.php, go to the bottom where the tabs are made and add this to them where you want them to appear:
Code:
// Show the [**button name**] button.
echo ($current_action=='**button name**' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="mainNav-**button name**"><a href="', $scripturl, '**url here**">**button name**</a></li>' , $current_action == '**button name**' ? '' : '';
« Last Edit: April 01, 2008, 09:32:26 PM by m3talc0re »

The real hell is your life gone wrong.
Offline  
Read January 21, 2008, 03:56:20 AM #5
Shokat

Re: [TUT]How To: Nav buttons for Aa_New_Damage

Heya, just a quick question Smiley

I have followed all these instructions, and used the menu_blank.gif file provided. The buttons work as intended, even taking me to the correct place on the website. I have one small problem in that I cannot seem to make the spacers around the buttons appear. When I save the menu_blank.gif as such, a spacer will not appear around the button the same like all the other buttons in the menu backgrounds folder. I can actually see the spacers, or what appears to be a spacer, around each button in the file browser. I'm using CS3, is there anything I should be doing? Or saving the file as something different?

thanks for the wonderful layout Smiley
Offline  
Read February 03, 2008, 04:00:31 PM #6
m3talc0re

Re: [TUT]How To: Nav buttons for Aa_New_Damage

Are you giving the buttons the correct width in the css? Make sure of that.


The real hell is your life gone wrong.
Offline  
Read April 19, 2008, 09:01:41 PM #7
Violat3r

Re: [TUT]How To: Nav buttons for Aa_New_Damage

Hey m3tal, im adding a new mod to my forums and needed a new button, so i made this one:


If you feel like it, go ahead and pop it up there for everyone to use.



Offline  
Read May 10, 2008, 09:28:33 AM #8
jefpoyi

Re: [TUT]How To: Nav buttons for Aa_New_Damage

is this for free?
Offline  
Read May 10, 2008, 02:17:17 PM #9
m3talc0re

Re: [TUT]How To: Nav buttons for Aa_New_Damage

Is what for free? Them Aa_New_Damage theme? The buttons above? Yea...


The real hell is your life gone wrong.
Offline  
Read June 02, 2008, 06:17:21 AM #10
cn92

Re: [TUT]How To: Nav buttons for Aa_New_Damage

You are BIG.
Congratulation m8s.

Very very useful
Offline  
Read June 07, 2008, 07:44:02 PM #11
concorde

Re: [TUT]How To: Nav buttons for Aa_New_Damage

I got the button on successfully but it is in a constant state of glow, how do i get it to stop glowing? help?

ok nvrmind i got it ... awesome tut thanks for it!
« Last Edit: June 07, 2008, 07:47:07 PM by concorde »

Offline  
Read June 07, 2008, 08:32:01 PM #12
Violat3r

Re: [TUT]How To: Nav buttons for Aa_New_Damage

lol glad you got it working, but just cause im curious: what was the problem? was there just a CSS error, or was the CSS exactly as written and the image was swapped (i.e. the "hover" effect on top instead of the bottom)?



Offline  
Read June 07, 2008, 09:41:41 PM #13
m3talc0re

Re: [TUT]How To: Nav buttons for Aa_New_Damage

Just so you all know, Aa New Damage v2 is about to be publicly available... Tongue

Demo: http://www.webtechnica.net/demoforum/index.php?theme=30


The real hell is your life gone wrong.
Offline  
Read June 09, 2008, 12:00:06 AM #14
Violat3r

Re: [TUT]How To: Nav buttons for Aa_New_Damage

omg omg omg omg omg omg omg omg omg omg omg omg omg omg omg omg omg omg omg LOL!!! That looks AWESOME!!!!!!!!!!!!!!!!!! I cannot friggin WAIIIIITTTT!!!!!



Offline  
Pages: [1] 2   Go Up
Jump to:  

Theme by Webtechnica.net
MySQL PHP Powered by SMF 1.1.6 | SMF © 2006-2008, Simple Machines LLC XHTML 1.0 CSS