Vampirefreaks Buttons

[ Button Classes ] [ Affecting All Buttons ] [ Writing Your Own Buttons ] [ Hiding Buttons ] [ Decorating Buttons ]

Like most of the stuff on your VF page, each button (or input) has its own class, a sort of ID by which it can be referred to when you want to change or hide it.
Nb there is one slight difference between button classes and table/ image etc classes on your profile- for buttons, the class is attached to the form the button is in and not the button itself, so you need to add "input" after the class to do anything to it other than hiding, otherwise the invisible form (and not the button) is all that will be affected. With hiding, the class alone will suffice because hiding the form also hides everything in it.
If this makes no sense, don't worry, just copy and paste the full class with the input bit- that will always work.



As well as having their own individual classes, the buttons are in 3 separate tables, which is handy if you want to hide 2 or 3 together without writing out each buttons separate class. These are the groups.



To change things about any button, you can just refer to it by its class, for instance, to make the report button red, the code would be:



Remember, if all you want to do is hide the button, you can skip the input part if you like:



And if you want to hide a bunch of buttons together, you can use their group class-

A note for the lazy- If you want to affect every button on your page in exactly the same way, you can do away with the classes and simply apply your styles to input. This will affect every button on your page, for instance:


Will give them all a red background, or:


will hide them all. Remember, input is NOT a class. There is no dot before it, and hiding all inputs is only a good idea if you don't want custom buttons of your own- it will hide all buttons- VFs, yours, and the little round buttons on your rate bar.

If you want to change the text on your buttons, you have to hide the originals and write your own in. Here's the code for each button:

Hiding buttons is done by applying display: none; to the button(s) you want to hide. You can hide individual buttons by referring to them by their class [ click here for all buttons classes ] like this:



Or if you want to remove a few at once, referring to them by their [ group class ] is quicker:



Finally, to get rid of them all, you can use


(removes ALL inputs including custom ones and the little round buttons on the rate bar)

If you just want to remove VFs buttons use:

You can give your buttons backgrounds, borders, colors, text styles.. in fact just about anything! Let's use the report button as an example. To apply a border:



Or how about a background:



You could even use a background image:


[ More on backgrounds and borders ]

To affect more than one button at once, you could just apply your styles to input (this affects all buttons):



Or, if you just want to affect two or three, don't forget that they have [ group classes ] too. This code would make only the comment, and rate & comment buttons blue: