Custom Users and Lists

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');}



Comments