Presentation Manager - Scripts & Styles sample code
Add the code below to the Scripts & Style field in your Presentation Manager as a starting point and then update and edit the code as needed.
Copy and paste this code into your Scripts & Styles:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ——— START - Variables ——— */
:root {
--GiftingShippingHeadlineColor: #02172C;
--GiftingShippingLabelColor: #02172C;
--BodyTextColor: #222222;
--OtherTextColor: #222222;
--HeadlineTextColor: #02172C;
--PrimaryButtonColor: #d92644;
--PrimaryButtonColorHover: #DE435D;
--PrimaryButtonTextColor: #ffffff;
--PrimaryButtonTextColorHover: #ffffff;
--SecondaryButtonColor: #ffffff;
--SecondaryButtonColorHover: #f5f5f5;
--SecondaryButtonTextColor: #a2a2a2;
--SecondaryButtonTextColorHover: #a2a2a2;
--NavigationButtonColor: #ffffff;
--NavigationButtonColorHover: #f5f5f5;
--NavigationButtonTextColor: #a2a2a2;
--NavigationButtonTextColorHover: #a2a2a2;
--PricingTextColor: #02172C;
--RuleColor: #a2a2a2;
--CornerRadius: 4px;
--PrimaryFont: 'Montserrat', sans-serif;
--HeadlineFontSize: 32pt; /* h1 */
--SubheadFontSize: 18pt; /* h2 */
--PricingFontSize: 28pt;
--ButtonFontSize: 11pt;
--NavigationButtonFontSize: 8pt;
--BodyFontSize: 11pt; /* p */
--BottomCopyFontSize: 9pt;
--GiftingFontSize: 9pt;
--FontBoldWeight: 700;
--FontMediumWeight: 600;
--FontRegularWeight: 400;
--LetterSpace: 1.5px;
--BorderWidth: 1px;
--CaseTransformation: uppercase;
}
/* ——— END - Variables ——— */
/* ——— START - Link ——— */
/* Visited Link Color */
a, a:visited {
color: var(--PrimaryButtonColor);
}
/* Active Link Color */
a, a:active {
color: var(--PrimaryButtonColor);
}
/* Hover Link Color */
a, a:hover {
color: var(—PrimaryButtonColorHover);
}
/* ——— END - Link ——— */
/* ——— START - Gifting & Shipping Titles ——— */
/* Gifting and Shipping titles - font, size, weight and color */
.shipping__form-heading,.gifting__form-heading {
font-family: var(--PrimaryFont) !important;
font-size: var(--BodyFontSize) !important;
font-weight: var(--FontBoldWeight) !important;
color: var(--GiftingShippingHeadlineColor) !important;
text-transform: var(--CaseTransformation) !important;
}
/* ——— START - Gifting & Shipping Titles ——— */
/* ——— START - Gifting & Shipping Labels ——— */
/* Gifting and Shipping labels - font, size, weight and color */
.shipping__form-label,.gifting__form-label {
font-family: var(--PrimaryFont) !important;
font-size: var(--BodyFontSize) !important;
font-weight: var(--FontRegularWeight) !important;
color: var(--GiftingShippingLabelColor) !important;
}
/* ——— END - Gifting & Shipping Labels ——— */
/* ——— START - Style Address & Questions Titles ——— */
/* Style Address and Questions titles - font, size and color */
.address__title, .questions__question-label {
font-family: var(--PrimaryFont) !important;
font-size: var(--BodyFontSize) !important;
color: var(--OtherTextColor) !important;
text-transform: var(--CaseTransformation) !important;
}
/* ——— END - Style Address & Questions Titles ——— */
/* ——— START - Marketing Opt-In, Cover Cost, Name is same ——— */
/* Style Marketing Opt-In, Cover Cost, Name is same - font, size and color */
.totals__totals,.form-field,.cover-costs__text--multiline,.marketing-communications__label,.checkbox__label,.cover-costs__label {
font-family: var(--PrimaryFont) !important;
font-size: var(--BodyFontSize) !important;
color: var(--OtherTextColor) !important;
}
/* ——— END - Marketing Opt-In, Cover Cost, Name is same ——— */
/* ——— START - Main Body ——— */
/* Style Body - font, size and color */
.p,.payment {
font-family: var(--PrimaryFont) !important;
font-size: var(--BodyFontSize) !important;
color: var(--BodyTextColor) !important;
}
/* ——— END - Main Body ——— */
/* ——— START - H1 ——— */
/* Targeting H1 for a different font style and size */
h1 {
font-family: var(--PrimaryFont) !important;
font-size: var(--HeadlineFontSize) !important;
font-weight: var(--FontBoldWeight) !important;
color: var(--HeadlineTextColor) !important;
}
/* ——— END - H1 ——— */
/* ——— START - H2 ——— */
/* Targeting H2 for a different font style and size */
h2 {
font-family: var(--PrimaryFont) !important;
font-size: var(--SubheadFontSize) !important;
font-weight: var(--FontRegularWeight) !important;
color: var(--HeadlineTextColor) !important;
}
/* ——— END - H2 ——— */
/* ——— START - General System Buttons - modals, verification, login, etc... ——— */
/* Style the General System Buttons - radius, spacing, padding */
.btn,.btn-primary,.thank-you-btn,button,.submit-form-btn {
border-radius: var(--CornerRadius);
letter-spacing: var(--LetterSpace);
font-size: var(--ButtonFontSize) !important;
font-weight: var(--FontMediumWeight);
text-transform: var(--CaseTransformation);
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px !important;
padding-left: 15px !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:focus-within, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: var(--PrimaryButtonColorHover) !important;
border-color: var(--PrimaryButtonColorHover) !important;
color: var(--PrimaryButtonTextColorHover) !important;
}
/* ——— END - General System Buttons - modals, verification, login, etc... ——— */
/* ——— START - Promo Code Field ——— */
/* Style the Promo Code Field */
.pricing-configurations-section .pricing-configuration__promo-field {
border-radius: var(--CornerRadius);
padding-top: 10px;
padding-bottom: 10px;
}
/* ——— END - Promo Code Field ——— */
/* ——— START - Gift Certificate ——— */
/* Style the Gift Certificate data entry field */
.gift-certificates__input, .gift-certificates__button {
border-radius: var(--CornerRadius);
padding-top: 10px;
padding-bottom: 10px;
}
/* Style the Gift Certificate Apply Button */
.gift-certificates__button {
font-weight: var(--FontMediumWeight);
border-radius: var(--CornerRadius);
border-top-left-radius: 0px 0px;
border-bottom-left-radius: 0px 0px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Style a the Gift Certificate Apply Button Hover color */
.gift-certificates__button:hover {
background-color: #d2d2d2;
}
/* ——— END - Gift Certificate ——— */
/* ——— START - Error Messages ——— */
/* Extra spacing for any error messages */
.pricing-configurations-section .pricing-configuration__alert {
padding: 20px;
margin-bottom: 40px;
}
/* ——— END - Error Messages ———*/
/* ——— START - Hide Gifting Buttons and Icons ——— */
/* Hide Gifting Graphics - rarely used but can be done */
/*
.gifting__options {
display: none;
}
*/
/* ——— END - Hide Gifting Buttons and Icons ——— */
/* ——— START - Gift To Myself Button ——— */
/* Style the Gift To Myself Button */
.gifting__option--myself {
display: flex;
justify-content: left;
align-items: center;
font-size: var(--GiftingFontSize);
font-weight: var(--FontMediumWeight);
letter-spacing: var(--LetterSpace);
text-transform: var(--CaseTransformation);
border-radius: var(--CornerRadius);
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
border-width: var(--BorderWidth) !important;
}
/* Style Gift To Myself Button Hover */
.gifting__option--myself:hover {
background-color: var(--SecondaryButtonColorHover);
}
/* Style Gift To Myself Button Active Hover */
.gifting__option--active:hover {
background-color: var(--PrimaryButtonColorHover);
}
/* ——— END - Gift To Myself Button ——— */
/* ——— START - Buy As A Gift Button ——— */
/* Style the Buy As A Gift Button */
.gifting__option--gift {
display: flex;
justify-content: left;
align-items: center;
font-size: var(--GiftingFontSize);
font-weight: var(--FontMediumWeight);
letter-spacing: var(--LetterSpace);
text-transform: var(--CaseTransformation);
border-radius: var(--CornerRadius);
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 13px;
border-width: var(--BorderWidth) !important;
}
/* Style Buy As A Gift Button */
.gifting__option--gift:hover {
background-color: var(--SecondaryButtonColorHover);
}
/* Style Buy As A Gift Button Hover*/
.gifting__option--gift.gifting__option--active:hover {
background-color: var(--PrimaryButtonColorHover);
}
/* Optional - Adjust the space above the text - this may depend on the font used */
.gifting__option span {
margin-top: 0px;
}
/* ——— END - Buy As A Gift Button ——— */
/* ——— START - Horizontal Rule ——— */
/* Style Rule Color */
hr {
color: var(--RuleColor) !important;
}
/* ——— END - Horizontal Rule ——— */
/* ——— START - Pricing Section - Active Button ——— */
/* Primary Button Color */
.btn-primary, .btn-primary:visited {
color: var(--PrimaryButtonTextColor);
background-color: var(--PrimaryButtonColor);
border-color: var(--PrimaryButtonColor);
border-width: var(--BorderWidth) !important;
}
/* Primary Button Hover Color */
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:focus-within, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
color: #ffffff;
background-color: var(--PrimaryButtonColorHover);
border-color: var(--PrimaryButtonColorHover);
border-width: var(--BorderWidth) !important;
color: var(--PrimaryButtonTextColorHover) !important;
}
/* ——— END - Pricing Section - Active Button ——— */
/* ——— START - Pricing Section - Inactive Button ——— */
/* Multiple Buttons - Remaining Button Styling */
.pricing-configurations__option {
border-radius: var(--CornerRadius) !important;
font-weight: var(--FontMediumWeight) !important;
font-size: var(--ButtonFontSize) !important; /* If you want to change this size from 16pt, you need to modify margin for 2 and 3 columns */
margin-right: 7px !important; /* This is set because the Button font size is not 16pt */
margin-left: 7px !important; /*/* This is set because the Button font size is not 16pt */
padding-top: 15px !important;
padding-bottom: 15px !important;
border-width: var(--BorderWidth) !important;
}
/* Multiple Button Remaining Button Styling Hover */
.pricing-configurations__option:hover {
background-color: var(--SecondaryButtonColorHover) !important;
border-width: var(--BorderWidth) !important;
color: var(--SecondaryButtonTextColorHover) !important;
}
/* Multiple Buttons - Selected Button Styling */
.pricing-configurations__option--active {
background-color: var(--PrimaryButtonColor);
border-color: var(--PrimaryButtonColor);
color: var(--PrimaryButtonTextColor);
border-width: var(--BorderWidth) !important;
}
/* Multiple Buttons - Selected Button Styling Hover */
.pricing-configurations__option--active:hover {
background-color: var(--PrimaryButtonColorHover) !important;
border-width: var(--BorderWidth) !important;
color: var(--SecondaryButtonTextColorHover) !important;
}
/* ——— START - Pricing Section - Inactive Button ——— */
/* ——— START - Navigation Buttons ——— */
/* Navigation Outline Button Color */
.btn-navigation, .btn-navigation:visited {
color: var(--NavigationButtonTextColor);
background-color: var(--NavigationButtonColor);
border-color: var(--NavigationButtonTextColor);
border-width: var(--BorderWidth) !important;
font-size: var(--NavigationButtonFontSize) !important;
}
/* Navigation Outline Button Hover Color */
.btn-navigation:hover, .btn-navigation:active, .btn-navigation:focus, .btn-navigation:focus-within, .btn-navigation:not(:disabled):not(.disabled).active, .btn-navigation:not(:disabled):not(.disabled):active, .show>.btn-navigation.dropdown-toggle {
color: var(--NavigationButtonTextColorHover) !important;
background-color: var(--NavigationButtonColorHover);
border-color: var(--NavigationButtonTextColor);
border-width: var(--BorderWidth) !important;
font-size: var(--NavigationButtonFontSize) !important;
}
/* ——— END - Navigation Buttons ——— */
/* ——— START - Price Display Text ——— */
/* Currency, Price, Cents - size, color, weight */
.pricing-configuration__price-cont {
font-size: min(max(calc(var(--PricingFontSize) + 2vw)),52pt) !important;
color: var(--PricingTextColor) !important;
font-weight: var(--FontBoldWeight) !important;
}
/* ——— END - Price Display Text ——— */
/* ——— START - Pay Now or Register Button ——— */
/* May not be needed - Specific styling for the Pay Now or Register Now Button */
.submit-form-btn, .pay-now-btn {
padding-top: 8px !important;
font-weight: 600 !important;
}
/* ——— END - Pay Now or Register Button ——— */
/* ——— START - Fine Print copy below the Pay Buttons ——— */
/* Bottom Form Copy - font, size, weight and color */
.bottom-copy {
font-family: var(--PrimaryFont) !important;
font-size: var(--BottomCopyFontSize) !important;
font-weight: var(--FontRegularWeight) !important;
color: var(--OtherTextColor) !important;
}
/* ——— END - Fine Print copy below the Pay Buttons ——— */
</style>