2

Some users may want to display Price Set options as standard buttons rather than as radio buttons.

I am sharing my CSS for this below.

See how it looks here (Joomla).

3

These styles change Radio buttons and checkboxes in Civi Price Sets into colored toggle buttons. Make this a separate file from your primary civi-custom.css so that these styles can be applied to individual price sets, rather than globally: i.e. for donation pages, but not for event registrations.

Add the following link tag <link rel="stylesheet" type="text/css" href="[path-to-civi-custom-css-directory]/civi-button-inputs.css"> to the source text anywhere on the page, such as

  • the Contribution Page description (to deploy these styles only on that one Contribution Page) or
  • the Price Set (for all pages that use that price set). The Price Set Settings Pre-help is a sensible location for this, though if you don't have visible text in the pre-help section, there will be an empty div styled as your .help class). An alternate location in the Price Set is the pre-help for any field, which is less likely to have a visible empty div.

/* lines up top of all new buttons */
#priceset.crm-section  div.content { 
    padding-top: 0px;}  

/* prevents various sections from overlapping or wrapping weirdly if the description includes
images or divs, not a bad candidate for basic Civi css */
#crm-container.crm-public .crm-section, .crm-section {
    display: flow-root;}

/* Styling the buttons */
.price-set-option-content input[type="radio"],
.price-set-option-content input[type="radio"] + label,
.price-set-option-content input[type="checkbox"],
.price-set-option-content input[type="checkbox"] + label {
    float:left;
    width:180px;
    margin:4px;
    background-color:#e9e1ef;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;      
    padding:13px 6px;}

/* Styling the labels */
.price-set-option-content label,
.price-set-option-content label span,
.price-set-option-content input[type="checkbox"] + label {
    text-align:center;
    font-size: 32px;
    display:block;}

/* make Total Amount same size as button text */
#crm-container.crm-public .calc-value { 
    font-size: 32px;}

/* Alternate text styles for the amounts, if both labels and amounts are shown for a field
(don't want everything to be large) */
.price-set-option-content input[type="radio"] + label .crm-price-amount-amount {
    font-size: 16px;}

/* puts the normal input controls out of sight */
.price-set-option-content input[type="radio"],
.price-set-option-content input[type="checkbox"],
span.crm-price-amount-label-separator {
    position:fixed;
    top:-50px;}

/* Style for hovered item */
.price-set-option-content input[type="radio"]:hover + label,
.price-set-option-content input[type="radio"]:hover + label .crm-price-amount-amount,
.price-set-option-content input[type="checkbox"]:hover + label {
    background-color:#eee6f4;}

/* Style for selected item */
.price-set-option-content input[type="radio"]:checked + label,
.price-set-option-content input[type="radio"]:checked + label .crm-price-amount-amount,
.price-set-option-content input[type="checkbox"]:checked + label {
    background-color:#663399;
    color:#fff !important;}
  • Thanks for sharing this example! I'm not sure what steps you took to do the imagery but looks great. You can use the .extra templating system (civicrm.org/blog/dave-greenberg/…) and put this code at [your_custom_dir]/CRM/Contribute/Form/Contribution/Main.tpl to effect only contribution pages. – Andy Burns 2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.