Use Custom CSS to Customize Your Event Page

​Ticketbud's custom CSS feature allows you to customize your event page to suit your needs, brand and preferences. With Custom CSS you can do such things as:

  • Change the color of buttons
  • Change the layout of your event page
  • Hide the banner image
  • Remove social media buttons 
  • And much much more!


Here are some handy code snippets that you can insert into your custom CSS. All code is entered in the "Custom CSS" section of the "edit" page for your event. The option is under the subheading "Design" on the right-hand side of the page.

  • Change the color of the 'Buy Now' button



.btn.btn-success {
color: #HEXCOLOR;
background: #HEXCOLOR;
border: 3px solid #HEXCOLOR
}


NOTE: The command "HEXCOLOR" above, refers to a particular code that corresponds to a certain color. For example, #009ee0 corresponds to a particular shade of light blue. Follow this link (http://ow.ly/G7hMF) to get started finding some cool colors and their corresponding hex codes.

  • Change the color of right column on event page 

Custom online event page on Ticketbud

.right-col {
background-color: #9b59b6;
}

#event-wrapper .main.vevent.new {
background: #9b59b6;
}

Change the HEX color code to the desired color.

  • Remove social media buttons
#social_module {
display: none;
}

  • Remove Contact Event Organizer
.row.contact {
display: none;
} 

  • Remove Event Description
.details {
display: none;
}

  • Put the description about the tickets
    <script type="text/javascript">
                        $(document).ready(function() {
                             setTimeout(function() {
                                  $('.icon-info-sign').click();
                                  $('.row.details').insertBefore('.row.tickets');
                                  $('h3:contains("Event Description")').hide();
                             }, 1000);
                        });
      </script> 

These are just some examples of what you can do with your event page to adjust it to the way you want it to look. 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.