How to create seamless buttons?
+3
incredible_fear
Maki1
Diana
7 posters
Page 1 of 2
Page 1 of 2 • 1, 2
How to create seamless buttons?
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?
And how to put rollover buttons in the menu?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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://2img.net/i/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
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
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)
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://2img.net/i/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;}
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
Re: How to create seamless buttons?
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?
2) That is a very nice forum! How did you get the picture to fit the background like that?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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.
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
Re: How to create seamless buttons?
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- Hyperactive
- 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!
Re: How to create seamless buttons?
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?
And, AoF-Neptune, can you please tell me how to centre the image?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
Just add this in your css stylesheet.
- Code:
body {
background-position: center;
}
Guest- Guest
Re: How to create seamless buttons?
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
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
yeah,it will work same..
incredible_fear- Active Poster
- Posts : 1582
Reputation : 133
Language : English
Re: How to create seamless buttons?
Okay. Any idea about the seamless buttons?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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
Re: How to create seamless buttons?
Alright!
Anyone knows how to create seemless buttons?
Anyone knows how to create seemless buttons?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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
Re: How to create seamless buttons?
Er, can you explain please? If I knew what any of that means I would have made the buttons on my own.
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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://2img.net/i/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 linesExplanation
- 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;}
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
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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
- 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!
Re: How to create seamless buttons?
Oh, I think it works now. But how do I know what to put in the css for usergroups, profile etc?
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
Please see on my test forum http://forumshqiptar.forumotion.com/ and tell me how many links you have on your nav bar.
Maki1- Hyperactive
- 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!
Re: How to create seamless buttons?
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?
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
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
This is how I have it
Remember to change width:82px + height:30px
- 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;}
Remember to change width:82px + height:30px
Maki1- Hyperactive
- 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!
Re: How to create seamless buttons?
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?
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
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
Like this
And it will look like this
And it will look like this
Maki1- Hyperactive
- 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!
Re: How to create seamless buttons?
Maki, I understand that!
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;}
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
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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;}
#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
- 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!
Re: How to create seamless buttons?
Okay, thanks. I managed to create the buttons I need and they work.
(Please, mods do not close this thread just yet)
(Please, mods do not close this thread just yet)
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
Great post! Thanks for tipAoF-Neptune wrote:
Tristan- New Member
- Posts : 1
Reputation : 0
Language : English, Ukrainian, Russian
Re: How to create seamless buttons?
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:
Here's an example of what I want:
I want that^ instead of this:
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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
- Posts : 1286
Reputation : 21
Language : English
Re: How to create seamless buttons?
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
- Posts : 1286
Reputation : 21
Language : English
Page 1 of 2 • 1, 2
Similar topics
» Center block is off center
» create your onw buttons and more
» Create and Custom Buttons
» The best free software to create buttons
» Need a CSS code to create a gap between navigation buttons and forums
» create your onw buttons and more
» Create and Custom Buttons
» The best free software to create buttons
» Need a CSS code to create a gap between navigation buttons and forums
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum