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 change ugly Send button?

View previous topic View next topic Go down

Solved How to change ugly Send button?

Post by Tonight on May 31st 2012, 11:23 pm

Hi there!

I want to change those ugly Send and Preview buttons:



Can you help me?
avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by anonymouz17 on June 1st 2012, 6:22 am

just change your Forum skin ^^
avatar
anonymouz17
Forumember

Posts : 138
Reputation : 2
Language : english

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Nera. on June 1st 2012, 10:39 am

Hi,

There's no need to change your forum skin to do that. The send button is customised in this CSS part (that is if you are on BB2 as your profile says):

Code:
input.mainoption {
    background-color: #FAFAFA;
    font-weight: 700;
}

The Preview in this:

Code:
input.liteoption {
    background-color: olive;
    font-weight: 400;
}

For any other details please explain how do you want it to look like.
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Tonight on June 1st 2012, 11:15 am

Can I put a image for that?
avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Nera. on June 1st 2012, 12:21 pm

Yes.

Code:
input.liteoption {
    background-image: url("YOUR IMAGE LINK GOES HERE);
}
input.mainoption {
    background-image: url("YOUR IMAGE LINK GOES HERE);
}
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Tonight on June 1st 2012, 3:36 pm

Sorry, but I'm not sure where to put it... When I put it in CSS, images don't appear.
avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Sanket on June 1st 2012, 9:03 pm

Did you add the image URL in the code?

Your Forum URL?
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2827
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Tonight on June 1st 2012, 11:00 pm

avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Tonight on June 2nd 2012, 10:01 pm

Bump!

Images don't appear.
avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Sanket on June 4th 2012, 12:01 pm

Nera's code should work. Please provide the exact code that you added?
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2827
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Tonight on June 4th 2012, 12:10 pm

Code:
    input.liteoption {
        background-image: url("http://i40.servimg.com/u/f40/17/30/84/56/eelvaa11.png);
    }
    input.mainoption {
        background-image: url("http://i40.servimg.com/u/f40/17/30/84/56/saada11.png);
    }

I added this to CSS stylesheet (bottom)
avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Sanket on June 4th 2012, 12:18 pm

It will add a background image to the button & not change the button to the image url you posted.
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2827
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: How to change ugly Send button?

Post by LGforum on June 5th 2012, 1:37 am

You'll have to specify it as the whole background property rather tha just the background-image property in order to overrule all other background rules.
Code:

    input.liteoption {
        background: url(http://i40.servimg.com/u/f40/17/30/84/56/eelvaa11.png) no-repeat;
    }
    input.mainoption {
        background: url(http://i40.servimg.com/u/f40/17/30/84/56/saada11.png) no-repeat;
    }
avatar
LGforum
Hyperactive

Male Posts : 2262
Reputation : 260
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Tonight on June 5th 2012, 11:32 am

LGforum, thank you for answering my invitation to this topic Smile
But still.. it isn't working, just changes a bit background.
avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by LGforum on June 5th 2012, 1:55 pm

Well the CSS is just example CSS really from Nera... It really depends what you actually want to do to the buttons. How do you want them to look?
avatar
LGforum
Hyperactive

Male Posts : 2262
Reputation : 260
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Tonight on June 5th 2012, 3:06 pm


Like this. I want them to be images.
avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by LGforum on June 5th 2012, 3:51 pm

Ah right, well then you'll need to do this:
Code:

input.liteoption, input.mainoption {
  background: url(http://i40.servimg.com/u/f40/17/30/84/56/saada11.png) no-repeat;
  background-position: top left;
  border: none;
  padding: 0;
  height: 50px;
  width: 130px;
}
(Change '50px' and '130px' til it fits, i just took a rough guess at the size of the image)

Note that this will effect other buttons.
What you should do is not have the text as part the actual image. The image should only be the background. You'll see why, once you put this in your css. Wink
avatar
LGforum
Hyperactive

Male Posts : 2262
Reputation : 260
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Tonight on June 5th 2012, 7:32 pm

Alright, thanks for helping me out. I now better won't use this, because it affected other buttons too Very Happy But thanks!

Solved.
avatar
Tonight
Forumember

Male Posts : 258
Reputation : 69
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: How to change ugly Send button?

Post by Sanket on June 5th 2012, 7:33 pm

Topic Solved & Locked
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2827
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


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