How to create seamless buttons?

Page 1 of 2 1, 2  Next

Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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 -> https://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
How to create seamless buttons? Rollover
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)
avatar
Guest
Guest


Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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.
avatar
Guest
Guest


Back to top Go down

How to create seamless buttons? Empty 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 => https://help.forumotion.com/graphic-requests-f31/
Maki1
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!

Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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;
}
avatar
Guest
Guest


Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty Re: How to create seamless buttons?

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

yeah,it will work same..
incredible_fear
incredible_fear
Active Poster

Male Posts : 1582
Reputation : 132
Language : English

Back to top Go down

How to create seamless buttons? Empty Re: How to create seamless buttons?

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

Okay. Any idea about the seamless buttons?
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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 ??
avatar
Guest
Guest


Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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
EverEffects
Forumember

Posts : 105
Reputation : 1
Language : English

Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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 -> https://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
How to create seamless buttons? Rollover
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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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
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!

Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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
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!

Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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;}

How to create seamless buttons? Regist10

Exclamation Remember to change width:82px + height:30px
Maki1
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!

Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty Re: How to create seamless buttons?

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

Like this

How to create seamless buttons? Nopm10 How to create seamless buttons? Newpm10

And it will look like this
How to create seamless buttons? Nopm10How to create seamless buttons? Newpm10
Maki1
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!

Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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
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!

Back to top Go down

How to create seamless buttons? Empty 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
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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
avatar
Tristan
New Member

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

Back to top Go down

How to create seamless buttons? Empty 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:
How to create seamless buttons? Seamle10

I want that^ instead of this:
How to create seamless buttons? Instea10
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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:
How to create seamless buttons? Seamle10

I want that^ instead of this:
How to create seamless buttons? Instea10
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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:
How to create seamless buttons? Seamle10

I want that^ instead of this:
How to create seamless buttons? Instea10
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

How to create seamless buttons? Empty 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:
How to create seamless buttons? Seamle10

I want that^ instead of this:
How to create seamless buttons? Instea10
Diana
Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top


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