With a little CSS magic, you can tailor a promo user to have your desired look and feel. View the below images for examples on the customizable sections of a user/list, then copy and paste the associated CSS code from the right column for easy editing.
Click on the links below to jump to a specific section of user customization:
|
|
Main Nav DEFAULT Background Color & Font Color:
.ds-metro-header .ds-menu-wrapper>ul>li .ds-btn {background-color: #5796BC; color: #fff;}
Main Nav HOVER Background Color & Font Color:
.ds-metro-header .ds-menu-wrapper>ul>li .ds-btn:hover {background-color: #4E85A7; color: #fff;}
a. Dropdown Container Background Color:
.ds-metro-header .ds-menu-wrapper>ul>li .ds-dropdown-menu-container {background-color: #5796BC;}
b. Dropdown Items Background Color & Font Color:
.ds-metro-header .ds-menu-wrapper>ul>li .ds-dropdown-group .ds-dropdown-menu {background-color: #5796BC; color: #fff;} |
|
|
|
|
Upload Cover Image via "Manage Photos" link on right sidebar of user page in Admin.
Hide Page Title:
.ds-listings-header .ds-detail-title {display: none;}
Add Image with Transparent BG to New Promo Description on user record in Admin:
-- a. Upload Image to WYSIWYG (image should be minimum of 1180px wide with transparent bg)
-- b. Click </> on the WYSIWYG and add the text highlighted below to your image link.
<div class="wysiwyg-text-align-center"><b><span><img alt="" src="http://s3.amazonaws.com/dostuff-production/property_assets/10703/bonnaroo-tp-bg.png" style="width: 75%; padding-left: 11%;">
-- c. Click "Update"
By default, description text and links will display with your site's default colors, but you can use Custom CSS to override the defaults:
-- Text Color:
.ds-listings-header .ds-detail-description {color: #fff;}
-- Link Color:
.ds-listings-header .ds-detail-description a {color: #fff;}
Remove top & bottom padding:
.ds-listings-header {padding-top: 0px; padding-bottom: 0px;}
|
BACKGROUND COLOR:
.ds-listing-nav {background-color: #46748F;}
|
ICON COLOR:
.ds-listing-nav .ds-listing-nav-views a.ds-active, .ds-listing-nav .ds-listing-nav-views a:hover {background-color: #ED7A24;} |
SORT-BY DROPDOWN BACKGROUND COLOR:
.ds-listing-nav .chzn-container-single .chzn-single, .chzn-container .chzn-drop {background-color: #ED7A24;}
|
SORT-BY HOVER BACKGROUND COLOR:
.ds-listing-nav .chzn-container-single .chzn-single:hover {background-color: #D37631} |
HIDE FOLLOWERS BUTTON:
.ds-listing-nav .ds-listing-nav-followers {display: none;} |
|
|
a. REMOVE EVENT HERO IMAGES:
.ds-listing .ds-cover-image {background-image: none !important;}
b. APPLY BACKGROUND COLOR:
.ds-listing {background-color: #46748F;}
"PRESENTED BY" FONT COLOR:
.ds-listing .ds-listing-event-title span.ds-byline {color: #999;}
EVENT TITLE FONT COLOR:
.ds-listing .ds-listing-event-title span.ds-listing-event-title-text {color: #f5921c;}
MAP/PERSON/TASTEMAKER ICON COLOR:
.ds-listing .ds-listing-details .ds-icon {color: #f5921c;}
a. TIME & ATTENDEE COUNT FONT COLOR:
.ds-listing .ds-listing-details {color: #999;}
b. HIDE ATTENDEE COUNT & ICON
.ds-listing-attendee-count {display: none;}
VENUE FONT COLOR:
.ds-listing .ds-venue-name, .ds-listing .ds-venue-name a {color: #999;}
GIVEAWAY & EXTRA TEXT FONT COLOR:
.ds-listing .ds-listing-extra {color: #FFF;} |
|
|
APPLY BACKGROUND COLOR - HOVER:
.ds-listing:hover {background-color: #000;}
"PRESENTED BY" FONT COLOR - HOVER:
.ds-listing:hover .ds-listing-event-title span.ds-byline {color: #fff;}
EVENT TITLE FONT COLOR - HOVER:
.ds-listing:hover .ds-listing-event-title span.ds-listing-event-title-text {color: #fff;}
MAP/PERSON/TASTEMAKER ICON COLOR - HOVER:
.ds-listing:hover .ds-listing-details .ds-icon {color: #fff;}
TIME & ATTENDEE COUNT FONT COLOR - HOVER:
.ds-listing:hover .ds-listing-details {color: #fff;}
VENUE FONT COLOR - HOVER:
.ds-listing:hover .ds-venue-name {color: #fff;}
GIVEAWAY & EXTRA TEXT FONT COLOR - HOVER:
.ds-listing:hover .ds-listing-extra {color: #f5921c;} |
|
|
WIN BUTTON DEFAULT:
a.ds-btn-win {background-color: #5796BC; color: #333;}
WIN BUTTON HOVER
a.ds-btn-win:hover {background-color: #447c9d; color: #333;}
BUY BUTTON DEFAULT:
a.ds-buy-tix {background-color: #f5921c; color: #333;}
BUY BUTTON HOVER
a.ds-buy-tix:hover {background-color: #db841b; color: #333;}
ADD BUTTON DEFAULT:
a.ds-btn-ical {background-color: #46748F; color:#333;}
ADD BUTTON HOVER
a.ds-btn-ical:hover {background-color: #3f6981; color:#333;} |
|
| |
DAY OF WEEK TEXT COLOR:
.ds-list-break {color: #999;} |
MONTH / DATE TEXT COLOR:
.ds-list-break .ds-list-break-date {color: #ED7A24;}
|
BACKGROUND COLOR:
.ds-list-break {background-color: #46748F;} |
|
|
REMOVE BRAND ADS:
.ds-module.ds-display-ad {display: none;}
REMOVE "ARTISTS FOLLOWED":
.ds-module.ds-venues-followed {display: none;}
REMOVE "VENUES FOLLOWED":
.ds-module.ds-artists-followed {display: none;}
|
|
|
TO APPLY SOLID COLOR BACKGROUND:
body {background-color: #5796BC;}
TO APPLY IMAGE/SKIN BACKGROUND:
a. image should be minimum of 1000x1250px, high-resolution, with a repeating design.
b. upload image as an asset on our server:
http://admin.dostuffmedia.com/property_assets/new
c. copy new asset URL and replace the URL in the following CSS snippet, then paste updated snippet into New Promo CSS. Note: the URL needs opening/closing single quotation marks inside of the parenthesis.
body {background: url('http://s3.amazonaws.com/dostuff-production/property_assets/10853/bonnaroorepeat-bg.jpg');} |
|
|
|
