CSS Help!

[Nacho!]

Hope you guys can help me out

I need a CSS code to modify the "Preview" and "Send" buttons on my Forumotion Forum. I want the same colors and design.

http://www.thefacebookforum.net/

I want them to look like this


And when the mouse is hover, like this


Thanks!

 

[ChatBox]

What's the image links?

 

[Nacho!]

Those were tajen out from Facebook. You can find some with the same style all over the page 🙂

Thanks

 

[Dasher]

a:hover, div.[YOUR DIV (HEADER, ETC.) a:hover  {
background-image:url('u/f61/13/71/71/19/presse10.png');

With that you have to divide the images into two images though. 😛

 

[Nacho!]

No, no, there's a way to modify them without needing any pictures. The background, font, font color and stuff can be added with CSS. I just don't know the code

 

[Dasher]

a:hover, div.[YOUR DIV (HEADER, ETC.) a:hover  {
background-image:url('u/f61/13/71/71/19/presse10.png');

With that you have to divide the images into two images though. 😛

That's the only way I know, try google?

 

[ChatBox]

You need to add :hover to make it hover. 😉 Unless you use a background colour.

 

[Nacho!]

I got a similar code to modify them, this one

a.button1, a.button2, input.button1, input.button2 {color: #000000; background: #d9d9d9; border: 1px outset #696969; -moz-border-radius: 2px; -webkit-border-radius: 2px;}
a.button1:hover, a.button2:hover, input.button1:hover, input.button2:hover {color: #273682; border:1px inset #a3a3a3;}[/img]

That modfies all the buttons on my forum, not what I want exactly. This CSS modifies my buttons, I believe

/* Input Button Form---------------------------------------------------------*/
input.button1, input.button2, button.button2 {
	 font-size: 1em;
	 }
a.button1, input.button1 {
	font-weight: bold;
	border: 1px solid #666666;
	}
a.button2, input.button2, button.button2 {
	border: 1px solid #BCBCBC;
	}
a.button1, input.button1, a.button2, input.button2, button.button2 {
	width: auto !important;
	padding: 2px 3px;
	font-family: Tahoma;
	color: #000000;
	background-repeat: repeat-x;
	background-color: #FAFAFA;
	background-image: url('http://illiweb.com/fa/prosilver/bg_button.gif');
	background-position: top;
	overflow: visible;
	}
body:last-child a.button1, input.button1, a.button2, input.button2, button.button2 {
	 
/* Opera does not see this */
padding: 1px 0;
	}
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
	border: 1px solid #00ffff;
	color: #00ffff;
	background-position: 0 100%;
	}
a.button1:link, a.button1:visited, a.button1:active, a.button2:link, a.button2:visited, a.button2:active {
	color: #00010d;
	text-decoration: none;
	padding: 2px 8px;
	line-height: 250%;
	vertical-align: text-bottom;
	background-position: 0 1px;
	}
* html input.button1, * html input.button2, * html button.button2 {
	padding-bottom: 0;
	margin-bottom: 1px;
	}
* html button.button2 {
	height: 24px;
	padding-right: 3px;
	padding-left: 3px;
	}
* html button.button2 img {
	 vertical-align: middle;
	 }
* html button.button2 {
	height: 24px;
	padding-right: 3px;
	padding-left: 3px;
	}
* html button.button2 img {
	 vertical-align: middle;
	 }

So it'd be needed to change colors, font, font color, etc.

 

[shamzblueworld]

try this tut man, this will work. http://www.webartzforum.com/tutorials-f ... 5.htm#5511

 

[Nacho!]

Thanks, although that just gives it a border when hovering..

Anyone else please?

 

[ChatBox]

You could edit it to not have the border.

 

[Nacho!]

Can anyone build up the code please? Will pay 500 FP Cash 🙂

 

[Dasher]

a:hover, div.[name of CSS that it will be hovering EXAMPLE: header] a:hover  {
background-image:url('URL TO IMAGE');

With that you have to divide the images into two images though. 😛

That's the only way I know, try google?

 

[ChatBox]

Something like this? http://www.learnwebdesignonline.com/men ... uttons.htm

 

[Nacho!]

Chatbox, that's better. If someone can please build up the code for me using that data I'll pay you 500 FP Cash.

Here's the code I was given at another Support forum. Just needs to be edited.

input[type="submit"].button2 {
background : url(BACKGROUND IMAGE URL) repeat !important;
border : 1px solid #CCC;
}
input[type="submit"].button2:hover {
background : url(BACKGROUND IMAGE URL) repeat !important;
border : 1px solid #000;
}

 

[Dasher]

I'll do it, I need image links though. 😉 add em on MSn

[email protected]

 

[Nacho!]

Sorry, don't have MSN on this computer. What links?

 

[ChatBox]

You need links to some sort of images so the images can go into the css and then they can hover.

 

[Deleted member 4320]

I think I know what your after, I think what you need is the use of image sprites, if you still need help with this, post back here, but make sure the images you have arn't just copied off Facebook otherwise I wont help.

 

[Nacho!]

They're not.

A guy at another Forum could make this http://ajberri.com/css/facebook/

If you click on "Download" you can get the .css file with the code.

The problem is I need someone to make that work using this code:

/* For preview button */
input[name="preview"].button2 {
    background : #226FB3;
    border : 1px solid #333;
    color : #fff;
    font-weight : bold;
    font-size : 13px;
    padding : 3px;
    }
/* For post button */
input[name="post"].button2 {
    background : #EEE;
    border : 1px solid #333;
    color : #333;
    font-weight : bold;
    font-size : 13px;
    padding : 3px;
    }

And also add the hover

And no, it's not copying. Also Facebook hasn't its codes copyrighted 🙂