Customized Event Pages

Examples: 

CUSTOM FONTS

TO USE A CUSTOM FONT, YOU'LL NEED TO FIRST DOWNLOAD THE FONT FILES, UPLOAD THEM TO RADMIN PROPERTY ASSETS THEN USE THE ASSET URLs IN A SNIPPET OF @font-face CSS AT THE TOP OF THE PAGE'S CUSTOM CSS BLOCK.  HERE'S ANOTHER DOC ON JUST THAT PROCESS. 
@font-face {
    font-family: 'thirsty_script';
    src: url('https://dostuff-assets.s3.amazonaws.com/property_asset/46461/thirstyscriptextrabolddemo-webfont.woff2') format('woff2'),
         url('https://dostuff-assets.s3.amazonaws.com/property_asset/46462/thirstyscriptextrabolddemo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');


PAGE:

MAIN BODY BACKGROUND:
body {
    background: #cea54b !important;
}

HIDE ADS:
LEADERBOARD:
html #ds-leaderboard-ad {display:none !important}

TOP RIGHT BRAND AD:
html div#ds-sidebar-ad {display:none !important}

SIDEBAR FEATURED EVENTS:
html .ds-sidebar .ds-featured-events {display:none !important}

FOOTER FEATURED EVENTS & VENUES:
html footer .ds-event-details-features {display:none !important}


SIDEBAR:



FOOTER FEATURED EVENT & VENUES:

FOOTER FEATURED EVENT AREA

CENTER ALIGN EVERYTHING IN THE HEADER AREA:
.ds-event-detail-main.section {
    text-align: center;
}
.ds-event-detail .ds-event-detail-main .ds-venue-name h2,
.ds-event-detail .ds-event-detail-main .ds-venue-name, 
.ds-event-detail .ds-event-detail-main .ds-influencer-count {
    float: none;
    display:inline-block;
}


BUTTON ICON COLOR:
html .ds-btn .ds-icon-bg {
color:#fff;
}

CHANGE COVER PHOTO OVERLAY COLOR:
html .ds-event-detail .ds-event-detail-main .ds-cover-image:after {
background:#02422a !important;
    opacity: .6 !important;
}

PRESENTED BY:
.ds-event-detail .ds-event-detail-main .ds-event-title span.byLine {
    text-transform: none;
    font-weight: normal;
    color: #f7bd39;
    text-shadow: 1px 1px 0px #f9e5b4; 
}

EVENT TITLE:
.ds-event-detail .ds-event-detail-main .ds-event-title span.ds-event-title-text {   
font-family:'Oswald',sans-serif;
font-weight:700;
color: #f7bd39;
    text-shadow: 1px 1px 0px #f9e5b4;
}

VENUE NAME, DATE, TIME, TICKET INFO, ATTENDEE COUNT:
.ds-event-detail .ds-event-detail-main .ds-venue-name a, 
.ds-event-detail .ds-event-detail-main .ds-ticket-info, 
.ds-event-detail .ds-event-detail-main .ds-event-time, 
.ds-event-detail .ds-event-detail-main .ds-event-date, 
.ds-event-detail .ds-event-detail-main .ds-attendee-count .ds-attendee-count-text {
    color: #f9e5b2 !important;
    font-family: 'Oswald';
}

HIDE TASTEMAKER ICONS:
html ul.ds-tastemakers {
display: none !important;
}

HIDE INFLUENCER COUNT:
.ds-influencer-count {
    display: none;
}

VENUE AND TASTEMAKER ICON COLOR
.ds-event-detail .ds-event-detail-main .ds-venue-name .ds-icon, 
.ds-event-detail .ds-event-detail-main .ds-attendee-count .ds-icon, 
.ds-event-detail .ds-event-detail-main .ds-influencer-count .ds-icon {
    color: #f7bd39;
}


EVENT CTA BUTTON TOOLBAR

HIDE NUMBER OF VOTES ON UPVOTE BUTTON (just display icons with text "VOTE" and "VOTED")
span.ds-icon-text {display: none;}
span.ds-upvote-default {color: transparent;}
span.ds-upvote-default .ds-icon {color: #fff !important;}
span.ds-upvote-active,span.ds-upvote-default {position:relative;}
span.ds-upvote-active:before,span.ds-upvote-default:before {display:inline-block;color:#FFF;position:absolute;left:1.75em;}
span.ds-upvote-default:before {content:'VOTE';}
span.ds-upvote-active:before {content:'VOTED';}


EVENT DESCRIPTION AREA:

EVENT DESCRIPTION DEFAULT TEXT:
.ds-feed-header-body-inner div#ds-custom-page-content .ds-event-description-inner p,
.ds-feed-header-body-inner div#ds-custom-page-content .ds-event-description-inner p span,
.ds-feed-header-body-inner div#ds-custom-page-content .ds-event-description-inner span,
.ds-feed-header-body-inner div#ds-custom-page-content .ds-event-description-inner div {
}

EVENT DESCRIPTION "bold" BUTTON:
.ds-feed-header-body-inner div#ds-custom-page-content .ds-event-description-inner b {
}

EVENT DESCRIPTION "H1" BUTTON:
.ds-feed-header-body-inner div#ds-custom-page-content .ds-event-description-inner h3 {
}

EVENT DESCRIPTION "H2" BUTTON:
.ds-feed-header-body-inner div#ds-custom-page-content .ds-event-description-inner h4 {
} 

EVENT DESCRIPTION LINKS:
.ds-feed-header-body-inner div#ds-custom-page-content .ds-event-description-inner a {
}

EVENT DESCRIPTION PADDING:
html .ds-event-detail .ds-feed .ds-feed-header .ds-feed-header-body {
}

SHOW FULL DESCRIPTION AT ALL TIMES (NO "MORE" / "LESS" LINKS)
.ds-feed-header-body .ds-feed-header-body-inner {
    display: none;
}
.ds-feed-header-body .ds-feed-header-body-inner:first-child {
    display: block !important;
}
.ds-feed-header-body .ds-feed-header-body-inner:first-child a {
    display: none;
}
.ds-feed-header-body .ds-feed-header-body-inner:first-child div#ds-custom-page-content a {
    display: inline;
}

COVER PHOTO:

POSITION COVER PHOTO IN SPOT OTHER THAN CENTERED HORIZONTALLY AND VERTICALLY.  FIRST NUMBER IN THE CSS BELOW IS THE HORIZONTAL POSITION (0% = ALWAYS SHOW LEFT SIDE OF IMAGE, 100% = ALWAYS SHOW RIGHT SIDE OF IMAGE). SECOND NUMBER IS THE VERTICAL POSITION (0% = ALWAYS SHOW TOP OF IMAGE, 100% = ALWAYS SHOW BOTTOM OF IMAGE).
.has-new-nav .ds-event-detail .ds-event-detail-main .ds-cover-image {
    background-position: 50% 100% !important; 
}


GIVEAWAY / RSVP OFFER TEXT
.ds-event-detail .ds-event-detail-utility .ds-utility-nav .ds-event-extra {
    display: block;
    padding: 0;
    margin: 0;
    text-align: center;
}

.ds-listing-nav, .ds-event-detail .ds-event-detail-utility {
    background: rgb(249, 229, 179) !important;
}

.ds-event-detail .ds-event-detail-utility .ds-utility-nav .ds-event-extra {
    color: #c22028;
    font-family: 'Oswald';
    letter-spacing: 1px;
}

.ds-utility-nav .ds-btn.ds-btn-large {
    background-color: #bf232b;
    background-image: -webkit-linear-gradient(top,#d2353d,#bf232b);
    background-image: linear-gradient(top,#d2353d,#c53727);
    background-image: -webkit-linear-gradient(to bottom,#d2353d,#bf232b);
    background-image: linear-gradient(to bottom,#d2353d,#bf232b) !important;
    border: 1px solid TRANSPARENT;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-family: 'Oswald',sans-serif;
    font-size: 1.5rem;
    padding: 20px;
    border-radius: 5px;
}
.ds-feed-poster-image {
    padding: 1rem;
    background: #f9e5b1;
}
.ds-utility-nav .ds-btn.ds-btn-large:hover {
    background-color: #bf232b;
    background-image: -webkit-linear-gradient(top,#da3c44,#bf232b);
    background-image: linear-gradient(top,#da3c44,#bf232b);
    background-image: -webkit-linear-gradient(to bottom,#da3c44,#bf232b);
    background-image: linear-gradient(to bottom,#da3c44,#bf232b) !important;
    border: 1px solid #b0281a;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-family: 'Oswald',sans-serif;
    font-size: 1.5rem;
    padding: 20px;
    border-radius: 5px;
}


div#ds-custom-page-content {
    background: #f9e5b2;
    padding: 1rem;
}


#ds-custom-page-content h4 {
    font-family: 'thirsty_script';
    text-transform: none;
    font-weight: normal;
    color: #02422a;
    font-size: 2.5em;
    line-height: 2;
    margin: 0 auto .5rem;
    border-bottom: 5px solid #e19913;
}


RSVP / GIVEAWAY ENTRY FORM

.ds-event-detail .ds-event-detail-form .ds-close-bar {
    background: #c0222a;
}

.ds-bg-dark {
    background: #f9e5b1;
}

#event-rsvp .ds-close-bar-inner, #event-giveaway .ds-close-bar-inner, .ds-event-detail-form .ds-close-bar-inner {
    font-family: 'Oswald',sans-serif;
    color: #f9e5b0;
}

form .ds-form-section label {
    color: #02422a;
}

form input:active, form input:focus, form input[type="password"]:active, form input[type="password"]:focus, form textarea:active, form textarea:focus, form .chzn-container-single .chzn-single:active, form .chzn-container-single .chzn-single:focus,
form input, form input[type="password"], form textarea, form .chzn-container-single .chzn-single {
    background: #fff;
    border: none;
    color: #000;
}

CHANGE STYLES OF SUBMIT BUTTON ON GIVEAWAY OR RSVP MODAL:
default:
button.ds-btn.ds-btn-medium {
    background-color: #bf232b;
    border: 1px solid TRANSPARENT;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-family: 'Oswald',sans-serif;
    font-size: 1.5rem;
    padding: 20px;
    border-radius: 5px;
}

hover:
button.ds-btn.ds-btn-medium:hover {
    background-color: #da3c44;
    border: 1px solid #b0281a;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-family: 'Oswald',sans-serif;
    font-size: 1.5rem;
    padding: 20px;
    border-radius: 5px;
}

CHANGE COLOR OF SUPPORTING TEXT ON GIVEAWAY & RSVP MODAL
.ds-bg-dark p {
    color: #000;
}

ADD SMALLER TEXT BELOW THE GIVEAWAY TEXT (does not apply to app):
.ds-close-bar-inner:after,
.ds-event-extra:after {
    content:'No Purchase Necessary. Entrants must be 21 or older to enter or win.';
    display:block;
    font-size:.7em;
    text-transform:none;
    font-weight:normal;
    letter-spacing:0;
}

Comments