|
createdbylaurah
|
June 13, 2021 at 11:28 am
I’m using Divi (Elegant Themes) and added a shortcode in a code module. I would like to style the buttons to match the site. How do I go about that? CSS?
Also, where can I add/change notifications to be emailed when someone registers for our event?
http://campaign.flywheelsites.com/golf-tournament/
Thanks!
Laura
|
|
Tony
|
June 14, 2021 at 4:49 am
Hi Laura,
Yes, you’ll need to use some CSS to style the button to match Divi’s styles.
Is there a button on the site you’d like to match? I can give you an example if so.
Using this selector:
.ticket-selector-submit-btn-wrap {
/*styles
}
Should allow you to style it however you prefer and you can add that in Appearance -> Customize -> Additional CSS.
|
|
createdbylaurah
|
June 15, 2021 at 5:22 am
That would be awesome — yes the “sign up button” if you scroll down on the homepage http://campaign.flywheelsites.com
Thanks!!
Laura
|
|
Tony
|
June 15, 2021 at 5:33 am
Something like this:
.ticket-selector-submit-btn {
float: right;
color: #000105!important;
border-color: rgba(0,0,0,0);
border-radius: 0px;
letter-spacing: 2px;
font-size: 18px;
font-weight: 700!important;
text-transform: uppercase!important;
background-color: #C49331;
}
.ticket-selector-submit-btn:hover {
color: #C49331!important;
background-image: initial;
background-color: #000105;
}
.ticket-selector-submit-btn, .ticket-selector-submit-btn:hover {
padding-top: 15px!important;
padding-right: 50px!important;
padding-bottom: 15px!important;
padding-left: 50px!important;
}
I’ve just copied some of the styles applied to the button you mentioned and assigned them onto the ticket selector button. You may need to make some changes to the above so it fits how you want the button to be output, but it should give you something to work from 🙂
|
|
createdbylaurah
|
June 15, 2021 at 7:20 am
It’s beautiful! Can I also get that for the “Proceed to Payment Button” or can you tell me what I can change? Thank you so much.
|
|
Tony
|
June 15, 2021 at 9:46 am
This should now also apply to the checkout buttons:
.ticket-selector-submit-btn,
.spco-next-step-btn {
float: right;
color: #000105!important;
border-color: rgba(0,0,0,0);
border-radius: 0px;
letter-spacing: 2px;
font-size: 18px;
font-weight: 700!important;
text-transform: uppercase!important;
background-color: #C49331;
}
.ticket-selector-submit-btn:hover,
.spco-next-step-btn:hover {
color: #C49331!important;
background-image: initial;
background-color: #000105;
}
.ticket-selector-submit-btn,
.ticket-selector-submit-btn:hover,
.spco-next-step-btn,
.spco-next-step-btn:hover {
padding-top: 15px!important;
padding-right: 50px!important;
padding-bottom: 15px!important;
padding-left: 50px!important;
}
|
|
createdbylaurah
|
June 15, 2021 at 10:40 am
I really appreciate your help. EE is a perfect solution for what we need. Any chance I could get some CSS for the “View Full Order Confirmation” button, too? : )
This should be it…
Thanks again!
|
|
Tony
|
June 15, 2021 at 10:56 am
Adding
.espresso-thank-you-page-overview-dv .ee-button to the above selectors should target that button.
So
.ticket-selector-submit-btn,
.spco-next-step-btn,
.espresso-thank-you-page-overview-dv .ee-button {
float: right;
color: #000105!important;
border-color: rgba(0,0,0,0);
border-radius: 0px;
letter-spacing: 2px;
font-size: 18px;
font-weight: 700!important;
text-transform: uppercase!important;
background-color: #C49331;
}
.ticket-selector-submit-btn:hover,
.spco-next-step-btn:hover,
.espresso-thank-you-page-overview-dv .ee-button:hover {
color: #C49331!important;
background-image: initial;
background-color: #000105;
}
.ticket-selector-submit-btn,
.ticket-selector-submit-btn:hover,
.spco-next-step-btn,
.spco-next-step-btn:hover,
.espresso-thank-you-page-overview-dv .ee-button,
.espresso-thank-you-page-overview-dv .ee-button:hover {
padding-top: 15px!important;
padding-right: 50px!important;
padding-bottom: 15px!important;
padding-left: 50px!important;
}
|
|
createdbylaurah
|
June 15, 2021 at 10:59 am
Beautiful!! I have a reports question. when I click “All Registrations CSV” report, it load another tab with the data, but not a download. Am I supposed to save that or will it download somewhere?
|
|
Tony
|
June 15, 2021 at 11:02 am
The .csv should download, the above usually means your server has an incorrect MIME type set for .CSV files, or your browser is set to automatically open them. If you test this in another browser do you get the same issue?
When you click the button, does it show another screen with a progress bar or does it instantly open the new tab?
|
|
createdbylaurah
|
June 15, 2021 at 12:44 pm
It shows the progress bar and then opens a new tab. I’ll try another browser. Many thanks!!
|
|
Tony
|
June 16, 2021 at 2:40 am
Ok, so the progress bar means you are (correctly) using the batch export system on your site, so if the same thing happens with another browser you can try adding:
AddType application/ms-excel .csv
to your sites .htaccess file in the root directory or open up a ticket with your host and request they set this up for you. That should tell the server to set .CSV files to download rather than the display on the page.
|
