The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to create seamless buttons?

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

How to create seamless buttons?

Post by Diana on November 8th 2010, 5:09 pm

I've seen forums have buttons that aren't like separated, they're all like in one picture. How to do that?

And how to put rollover buttons in the menu?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Guest on November 8th 2010, 5:37 pm

Hello !

For rollover buttons within your navbar.
You need first to create double buttons (you also can use 2 single buttons but double is better because browser wont have to load additional button while hovering a button)
In my example button is 100 width and 60 height, so each state of button is half of that.
Normal button 100 * 30 pixels
Hover button 100 * 30

Lets go and set up that button (we will set up a "Register" button.)
► Admin Panel
► Tabsheet Display
► Menu Pictures and Colors ► Pics Management ► Advanced mode
► Register : an empty image here -> http://illiweb.com/fa/empty.gif
► Save
Now lets go to your CSS
► Admin Panel
► Tabsheet Display
► Menu Pictures and Colors ► Colors
► Tabsheet CSS Stylesheet
Add the following lines
Code:
#i_icon_mini_register{width:100px; height:30px; background:url("Image'sURL") no-repeat 0 0;}
#i_icon_mini_register:hover{background:url("Image'sURL") no-repeat 0 -30px;}
Explanation
Width and height are the size of a button, else we would display full button with its two states.
no-repeat 0 0 -> position of button into your graphic file (here means button is top and left of our png file.
no-repeat 0 -30px -> Rollover button, we will display the second button

Example of a double button

And its associated css to work properly
Code:
#i_icon_mini_register{width:100px; height:30px; background:url("http://img181.imageshack.us/img181/7426/rollover.png") no-repeat 0 0;}
#i_icon_mini_register:hover{background:url("http://img181.imageshack.us/img181/7426/rollover.png") no-repeat 0 -30px;}

Then you just have to stick all your buttons in a single graphic file to do the same thing
Example -> http://tutoriel-frenzy.forumactif.com/
(Login button not done yet, all other are working and are on a single png file)

Guest
Guest


Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 8th 2010, 7:37 pm

1) How do you make a double button? Can you create two individual buttons and then put them together or does it require a use of some picture editing programme?

2) That is a very nice forum! How did you get the picture to fit the background like that?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Guest on November 8th 2010, 7:44 pm

1/ Yes u create 2 single buttons, and then use a picture editing software like PhotoFiltre or the GIMP to put them on a single .png file.

2/ The graphic theme of my forum was made by Quierra
http://fr.hitskin.com/utilisateurs/quierra-11862-version.htm

And the background is a large file (1680*600)
Centered via css
On smaller monitors you dont see whole background.

Guest
Guest


Back to top Go down

Re: How to create seamless buttons?

Post by Maki1 on November 8th 2010, 7:48 pm

rhe wrote:1) How do you make a double button? Can you create two individual buttons and then put them together or does it require a use of some picture editing programme?

You can request here => http://help.forumotion.com/graphic-requests-f31/

Maki1
Hyperactive

Male Posts : 2529
Reputation : 442
Language : English CSS Stylesheet
Location : The Support forum Section! No support by PM If you need custom theme please contact me!

http://forumdesigners.forumotion.com/

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 8th 2010, 8:11 pm

Nah, it's okay I like making buttons. I'll give it a go.


And, AoF-Neptune, can you please tell me how to centre the image?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Guest on November 8th 2010, 8:16 pm

Just add this in your css stylesheet.

Code:
body  {
background-position:  center;
}

Guest
Guest


Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 16th 2010, 10:03 am

rhe wrote:I've seen forums have buttons that aren't like separated, they're all like in one picture. How to do that?

And if I set the position of the double button does it look/work the same in every browser?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by incredible_fear on November 16th 2010, 11:04 am

yeah,it will work same..

incredible_fear
Active Poster

Male Posts : 1582
Reputation : 131
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 16th 2010, 3:28 pm

Okay. Any idea about the seamless buttons?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Guest on November 17th 2010, 12:11 am

rhe wrote:And if I set the position of the double button does it look/work the same in every browser?

I tried with IE6 and hover button did not appear. But who still have IE6 ??

Guest
Guest


Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 18th 2010, 10:03 pm

Alright! Smile

Anyone knows how to create seemless buttons?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by EverEffects on November 18th 2010, 10:55 pm

If you want seemless buttons work with gmaps or maybe use the same psd for each button.

EverEffects
Forumember

Posts : 105
Reputation : 1
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 19th 2010, 2:07 pm

Er, can you explain please? If I knew what any of that means I would have made the buttons on my own. Wink

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 27th 2010, 2:05 pm

AoF-Neptune wrote:Hello !

For rollover buttons within your navbar.
You need first to create double buttons (you also can use 2 single buttons but double is better because browser wont have to load additional button while hovering a button)
In my example button is 100 width and 60 height, so each state of button is half of that.
Normal button 100 * 30 pixels
Hover button 100 * 30

Lets go and set up that button (we will set up a "Register" button.)
► Admin Panel
► Tabsheet Display
► Menu Pictures and Colors ► Pics Management ► Advanced mode
► Register : an empty image here -> http://illiweb.com/fa/empty.gif
► Save
Now lets go to your CSS
► Admin Panel
► Tabsheet Display
► Menu Pictures and Colors ► Colors
► Tabsheet CSS Stylesheet
Add the following lines
Code:
#i_icon_mini_register{width:100px; height:30px; background:url("Image'sURL") no-repeat 0 0;}
#i_icon_mini_register:hover{background:url("Image'sURL") no-repeat 0 -30px;}
Explanation
Width and height are the size of a button, else we would display full button with its two states.
no-repeat 0 0 -> position of button into your graphic file (here means button is top and left of our png file.
no-repeat 0 -30px -> Rollover button, we will display the second button

Example of a double button

And its associated css to work properly
Code:
#i_icon_mini_register{width:100px; height:30px; background:url("http://img181.imageshack.us/img181/7426/rollover.png") no-repeat 0 0;}
#i_icon_mini_register:hover{background:url("http://img181.imageshack.us/img181/7426/rollover.png") no-repeat 0 -30px;}

Then you just have to stick all your buttons in a single graphic file to do the same thing
Example -> http://tutoriel-frenzy.forumactif.com/
(Login button not done yet, all other are working and are on a single png file)

Okay I finally got to do it and as expected it is not working. How do I get it working?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Maki1 on November 27th 2010, 2:27 pm

rhe wrote:
Okay I finally got to do it and as expected it is not working. How do I get it working?


Ok, I have done this last night and almost took me all night. So you need the css code for what you have on your nav bar and you need to make the images.


Maki1
Hyperactive

Male Posts : 2529
Reputation : 442
Language : English CSS Stylesheet
Location : The Support forum Section! No support by PM If you need custom theme please contact me!

http://forumdesigners.forumotion.com/

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 27th 2010, 2:54 pm

I tested the thing with two separate images and the code and it doesn't work. Nothing shows up.
Oh, I think it works now. But how do I know what to put in the css for usergroups, profile etc?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Maki1 on November 27th 2010, 3:09 pm

Please see on my test forum http://forumshqiptar.forumotion.com/ and tell me how many links you have on your nav bar.

Maki1
Hyperactive

Male Posts : 2529
Reputation : 442
Language : English CSS Stylesheet
Location : The Support forum Section! No support by PM If you need custom theme please contact me!

http://forumdesigners.forumotion.com/

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 27th 2010, 3:12 pm

Nah, it's okay I got it working but I just don't know what to put in the css code.
I have Home, Profile, PM, New PM, Usergroup, Search, Log Out, Log In and wel... Register, but that's done now. What do I need to put in the CSS for these?
Explanation:
#i_icon_mini_register{width:100px; height:30px; background:url("Image'sURL") no-repeat 0 0;}
What do I change that to with my menu buttons?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Maki1 on November 27th 2010, 3:16 pm

This is how I have it

Code:
#i_icon_mini_register{width:82px;height:30px;background:url(http://i65.servimg.com/u/f65/14/65/54/10/regist10.png) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(http://i65.servimg.com/u/f65/14/65/54/10/regist10.png) no-repeat  0 -30px;}



Exclamation Remember to change width:82px + height:30px

Maki1
Hyperactive

Male Posts : 2529
Reputation : 442
Language : English CSS Stylesheet
Location : The Support forum Section! No support by PM If you need custom theme please contact me!

http://forumdesigners.forumotion.com/

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 27th 2010, 3:24 pm

Yeah, I know it's working. I used two different images and it's working but do you know what to put in the css code where to register is for messages, usergroups etc?
I figured the home button out, put index there.

And, Maki, how did you get your buttons to look seamless like that? That they're all so close together?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Maki1 on November 27th 2010, 3:30 pm

Like this



And it will look like this

Maki1
Hyperactive

Male Posts : 2529
Reputation : 442
Language : English CSS Stylesheet
Location : The Support forum Section! No support by PM If you need custom theme please contact me!

http://forumdesigners.forumotion.com/

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 27th 2010, 3:36 pm

Maki, I understand that! Very Happy
But I don't know what to change the register to when inserting the messages button.

See, the code for Register button is this:
#i_icon_mini_register{width:100px; height:30px; background:url("Image'sURL") no-repeat 0 0;}
#i_icon_mini_register:hover{background:url("Image'sURL") no-repeat 0 -30px;}

What is the code for messages, usergroups etc?
#i_icon_mini_WhatGoesInHere?{width:100px; height:30px; background:url("Image'sURL") no-repeat 0 0;}
#i_icon_mini_WhatGoesInHere?:hover{background:url("Image'sURL") no-repeat 0 -30px;}

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Maki1 on November 27th 2010, 3:45 pm

usergroups
#i_icon_mini_groups{width:100px; height:30px; background:url("Image'sURL") no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url("Image'sURL") no-repeat 0 -30px;}

No new message
#i_icon_mini_message{width:90px;height:30px;background:url("Image'sURL") no-repeat 0 0;}
#i_icon_mini_message:hover{background:url("Image'sURL") no-repeat 0 -30px;}

new_message
#i_icon_mini_new_message{width:90px;height:30px;background:url("Image'sURL") no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url("Image'sURL") no-repeat 0 -30px;}

Maki1
Hyperactive

Male Posts : 2529
Reputation : 442
Language : English CSS Stylesheet
Location : The Support forum Section! No support by PM If you need custom theme please contact me!

http://forumdesigners.forumotion.com/

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on November 27th 2010, 7:05 pm

Okay, thanks. I managed to create the buttons I need and they work.

(Please, mods do not close this thread just yet)

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Tristan on November 28th 2010, 7:58 pm

AoF-Neptune wrote:
Great post! Thanks for tip Smile

Tristan
New Member

Posts : 1
Reputation : 0
Language : English, Ukrainian, Russian

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on December 11th 2010, 5:03 pm

Okay, I still don't know how to create the seamless buttons.
Here's an example of what I want:


I want that^ instead of this:

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on December 12th 2010, 1:56 pm

rhe wrote:Okay, I still don't know how to create the seamless buttons.
Here's an example of what I want:


I want that^ instead of this:

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on December 15th 2010, 3:44 pm

rhe wrote:
rhe wrote:Okay, I still don't know how to create the seamless buttons.
Here's an example of what I want:


I want that^ instead of this:

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: How to create seamless buttons?

Post by Diana on December 16th 2010, 2:12 pm

rhe (December 15th 2010, 4:44 pm) wrote:
rhe wrote:
rhe wrote:Okay, I still don't know how to create the seamless buttons.
Here's an example of what I want:


I want that^ instead of this:

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum