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?

Tonight
Forumember

Male Posts : 241
Reputation : 63
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 ^^

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.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
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?

Tonight
Forumember

Male Posts : 241
Reputation : 63
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);
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
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.

Tonight
Forumember

Male Posts : 241
Reputation : 63
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?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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


Tonight
Forumember

Male Posts : 241
Reputation : 63
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.

Tonight
Forumember

Male Posts : 241
Reputation : 63
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?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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)

Tonight
Forumember

Male Posts : 241
Reputation : 63
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.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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;
    }

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
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.

Tonight
Forumember

Male Posts : 241
Reputation : 63
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?

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
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.

Tonight
Forumember

Male Posts : 241
Reputation : 63
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

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
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.

Tonight
Forumember

Male Posts : 241
Reputation : 63
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

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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