Custom Users & Listings Update

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. 

We will go over different code for different listing card styles as well as the option of just using an image in the header rather then a background photo and text.

Check out CSS Tricks if you are stuck or want to know more about CSS properties. The CSS Properties section of this page is great. 


Standard Listing Card & Header Style




1. Header Background Image & Overlay
Add desired background photo to the user. Size photo at 1200px wide by 450px high. 
Use this code to edit the background overlay color and opacity. 

.ds-listings-header .ds-cover-image:after {
background#000000 !important;
opacity.6 !important;
}



2. Header Title
You can adjust the font size using pixels or ems, play around, see what works. Letter spacing adds extra space between letters, not always need but for certain fonts it makes things more legible. 

.ds-listings-header .ds-detail-title {
font-family"balboa-plus-primary";
font-size4.5em !important;
letter-spacing8px;
text-aligncenter;
color#ffffff;
}


3. Description Text
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: #ffffff; text-align: center;} 
-- Link Color: 
.ds-listings-header .ds-detail-description a {color: #fff000;} 

4. Listing Nav View
To change the background color of the active view. 
a.ds-btn.ds-btn-large.ds-ga-event.ds-view-list.ds-active {
  1. background-color#F3B96B;
}

5. Past/Upcoming Events Dropdown
--Main background color & dropdown
.ds-listing-nav .chzn-container-single .chzn-single, .chzn-container .chzn-drop {
background-color#F3B96B;
}

6. Follow User Button 
--Change the main background color:
.ds-follow span.ds-follow-active .ds-btn.ds-bg-follow.ds-follow span.ds-follow-default .ds-btn.ds-bg-follow.ds-follow span.ds-follow-active .ds-follow-hover.ds-follow span.ds-follow-default .ds-follow-hover {
  1. background-color#bbbbbb;
}

--Change "+" button:
.ds-follow span.ds-follow-active .ds-bg-follow-acc, .ds-follow span.ds-follow-default .ds-bg-follow-acc {
  1. background-color#f3b96b;
}
--Change "+" button on hover: 
.ds-follow span.ds-follow-default:hover .ds-bg-follow-acc {
  1. background-color#f12317;
}

7. Listing Date Break
--Change the background color: 
.ds-list-break {
  1. background-color#011D21;
}
--Change day color
.ds-list-break .ds-list-break-date-english{
color: #ffffff;
}
--Change date color
.ds-list-break .ds-list-break-date {
  1. color#bbbbbb;
}

8. Event Card Overlay
--Change the background overlay with a subtle gradient: 
.ds-listing {
  1. backgroundlinear-gradient(rgba(0, 76, 67, 0.69),rgba(0, 38, 60, 0.67));
}
--Change the background overlay opacity on hover(you can also add a different background color or just how dark it gets): 
.ds-listing:hover {
opacity: .8; 
}

8a. Presenter Text
html .ds-listing .ds-listing-event-title span.ds-byline {
  1. color#ffffff;
}

8b. Event Title Text
span.ds-listing-event-title-text {
  1. color#ffffff;
}

8c. Listing card icons
.ds-listing .ds-listing-details .ds-icon {
  1. color#368E83;
}

8d. Listing card venue and time
html .ds-listing .ds-venue-name a, .ds-event-time.dtstart {
  1. color#ffffff !important;
}

8e. Listing card extra text
html .ds-listing .ds-listing-extra {
  1. color#ffffff;
}

9.  Buttons
--Change upvote button background: 
.ds-btn-container-upvote .ds-btn {
  1. background-color#0254a0;
}
--Change buy button background: 
a.ds-buy-tix {
  1. background-color#e43626;
}
--Change Win button background: 
a.ds-btn-win {
  1. background-color#00C4B9;
}
--Change RSVP button background: 
a.ds-btn-rsvp {
background-color: #ffc600;
}


Standard Listing Card & Header Image instead of text


1. Header Background Image 
If you are using just an image with text on it, please note edges of the image might get cut off based on browser size.  Make sure any text is pretty central on the image to avoid this. 
--Upload desired image in the cover image field in radmin and hide the title with this code:
h1.ds-detail-title {
  1. displaynone;
}





2. Listing Nav BG
.ds-listing-nav {
  1. background-color#9e1f63;
}

3. Listing Nav View
---Update the background color to be the same as the listing nav bg and change the color of the icons. 
html .ds-listing-nav .ds-listing-nav-views a.ds-active{
background-color: #9e1f63;
color: #fbb03b !important;
}

4. Past/Upcoming Events Dropdown
--Main background color & dropdown. 
.chzn-container-single .chzn-single { background-color: transparent; } .chzn-container-single .chzn-single:hover { background-color: #9e1f63; } .chzn-container .chzn-drop { background-color: #9e1f63; }

5. Follow User Button 
--Change the main background color:
.ds-follow span.ds-follow-active .ds-btn.ds-bg-follow.ds-follow span.ds-follow-default .ds-btn.ds-bg-follow.ds-follow span.ds-follow-active .ds-follow-hover.ds-follow span.ds-follow-default .ds-follow-hover {
  1. background-color#bbbbbb;
}
--Change "+" button:
.ds-follow span.ds-follow-active .ds-bg-follow-acc, .ds-follow span.ds-follow-default .ds-bg-follow-acc {
  1. background-color#f3b96b;
}
--Change "+" button on hover: 
.ds-follow span.ds-follow-default:hover .ds-bg-follow-acc {
  1. background-color#f12317;
}

6. Listing Date Break
--Change the background color: 
.ds-list-break {
  1. background-color#011D21;
}
--Change day color
.ds-list-break .ds-list-break-date-english{
color: #ffffff;
}
--Change date color
.ds-list-break .ds-list-break-date {
  1. color#bbbbbb;
}

7a. Presenter Text
html .ds-listing .ds-listing-event-title span.ds-byline {
  1. color#ffffff;
}

7b. Event Title Text
span.ds-listing-event-title-text {
  1. color#fbb03b;
    1. text-shadow-2px 2px 0 #000;
}

7c. Listing card icons
.ds-listing .ds-listing-details .ds-icon {
  1. color#368E83;
}

7d. Listing card venue and time
html .ds-listing .ds-venue-name a, .ds-event-time.dtstart {
  1. color#ffffff !important;
}

7e. Listing card extra text
html .ds-listing .ds-listing-extra {
  1. color#fbb03b;
}

8.  Buttons
--Change upvote button background: 
.ds-btn-container-upvote .ds-btn {
  1. background-color#0254a0;
}
--Change buy button background: 
a.ds-buy-tix {
  1. background-color#e43626;
}
--Change Win button background: 
a.ds-btn-win {
  1. background-color#00C4B9;
}
--Change RSVP button background: 
a.ds-btn-rsvp {
background-color: #ffc600;
}

9.  Main Page BG color
--Change the BG color of the entire body: 
body{
background-color: #161642;
}

Text Under Image Listing Card style



1. Header Background Image 
To create the above look or something similar there are 2 parts. There is a background gradient, and an opaque image over the gradient. In this case the image is in place where some of you might have a default texture over your images. This is the same way we add in those textures. 
--To add a gradient to the header, this is replacing where your normal cover image would be (if you want just a background color, leave out the linear-gradient): 
.ds-listings-header .ds-cover-image {
  1. background-color#1a4b81 !important;
  2. background-imagelinear-gradient(#1a4b81,rgba(45, 131, 224, 0.68),rgba(53, 249, 170, 0.68)) !important;
}
--To add an image, this is replacing the overlay. You will need to upload the image in the image uploader under site design and use that url: 
.ds-listings-header .ds-cover-image:after {
backgroundurl(https://dostuff-assets.s3.amazonaws.com/property_asset/41018/header-bg.png) !important;
background-sizecover !important;
background-repeatno-repeat !important;
opacity0.15 !important;
background-positioncenter center !important;
}

  1. 2. Header Title
  2. .ds-listings-header .ds-detail-title {
    1. font-weightbold !important;
    2. font-size4.25em !important;
    3. font-familygtamericablack--condensed;
    4. color#ffffff;
    5. text-shadow2px 2px 0 #1a4b81;
    }

3. Header Description Text
 .ds-detail-description.ds-promo-description {
  1. font-weightnormal !important;
  2. font-family"gtamerica--condensed", sans-serif;
  3. color#ffffff !important;
}

4. Listing Nav View
---Update the background color to be the same as the listing nav bg and change the color of the icons. 
html .ds-listing-nav .ds-listing-nav-views a.ds-active{
background-color: #2d83e0 !important;
color: #35f9aa !important;
}

5. Listing Nav BG
.ds-listing-nav {
  1. background-color#2d83e0 !important;
}

6.  Past/Upcoming Events Dropdown
--Main background color & dropdown: 
.chzn-container-single .chzn-single, .chzn-container-single .chzn-single:hover, .chzn-container .chzn-drop {
background-color: #1a4b81 !important; }

7. Follow User Button 
--Change the main background color:
.ds-follow span.ds-follow-active .ds-btn.ds-bg-follow.ds-follow span.ds-follow-default .ds-btn.ds-bg-follow.ds-follow span.ds-follow-active .ds-follow-hover.ds-follow span.ds-follow-default .ds-follow-hover {
  1. background-color#1a4b81 !important;
}
--Change "+" button:
.ds-follow span.ds-follow-active .ds-bg-follow-acc, .ds-follow span.ds-follow-default .ds-bg-follow-acc {
  1. background-color#35f9aa !important;
}

8. Listing Date Break
--Change the background color and get rid of borders if you have them by default: 
.ds-list-break.ds-break-date {
    1. font-weightbold !important;
    2. font-familygtamericablack--condensed;
    3. background#2d83e0;
    4. bordernone !important;
}
--Change day color
.ds-list-break .ds-list-break-date-english{
color: #ffffff;
}
--Change date color
.ds-list-break .ds-list-break-date {
  1. color#35f9aa;
}

9. Event Card
There are a few steps to get text off of the images and below. In this example there is also a border around the listing card which changes color on hover. 
--Set the background color (this will show up either on the entire bottom content section, or just the listings details if you give a bg color to the title)
.ds-listing.event-card, .ds-listing.event-card:hover {
  1. padding0;
  2. background#a20994;
  3. color#fff;
  4. font-weightbold !important;
  5. font-familyOswald;
  6. text-shadownone;
}
--add border
.ds-listing.event-card {
  1. border4px solid #fff;
}
--display info under photo
.ds-listing.ds-listing-update .ds-cover-image, .ds-listing.ds-listing-update:hover .ds-cover-image, .ds-listing.event-card:hover .ds-cover-image, .ds-listing.event-card .ds-cover-image {
    position: relative;
    display: block;
    height: 240px;
    margin-bottom: 0;
    z-index: 0;
}
--add padding around content
.ds-listing.event-card .ds-listing-details-container {
    padding: .6rem 1rem;
}
9a
--add different bg color and styles to title
.ds-listing.event-card .ds-listing-event-title {
  1. padding.6rem 1rem;
  2. background#b710a7;
  3. margin-bottom0;
  4. color#ffffff;
  5. font-weightbold !important;
  6. font-familygtamericablack--condensed;
  7. text-shadownone;
}

10. Buttons 
--Change upvote button background: 
.ds-btn-container-upvote .ds-btn {
  1. background-color#0254a0;
}
--Change buy button background: 
a.ds-buy-tix {
  1. background-color#e43626;
}
--Change Win button background: 
a.ds-btn-win {
  1. background-color#00C4B9;
}
--Change RSVP button background: 
a.ds-btn-rsvp {
background-color: #ffc600;
}

11. Border Hover
 --Change border color on hover:
.ds-listing.event-card:hover {
  1. border4px solid #000000;
}

12. Add styling to FE Ads and Artists Followed
 --Add a custom background to FE Ads
.ds-sidebar .ds-featured-events {
  1. background#1a9ffc;
  2. padding2%;
  3. border-radius5px;
}
 --Add a custom background to Artists Followed
.ds-module.ds-artists-followed {
  1. background#1a9ffc;
  2. padding2%;
  3. margin-top2em;
  4. border-radius5px;
}
--Customize the title
.ds-sidebar .ds-featured-events h3, .ds-module h3{
font-size1.375rem;
line-height1.5em;
color#292929 !important;
border-top7px solid #292929;
text-align: center; 
}
--Change color of list font
.ds-user-listing .ds-listing-sidebar .ds-module a {
  1. color#fff;
}
13. Edit background color of page content 
body {
  1. background#1a4b81;
}


Other Tips and Tricks
  • If you want to hide sidebar ads use the following code
.ds-sidebar .ds-featured-events, .ds-brand.ds-show-in-sidebar {
displaynone;
}
  • If you want to hide users and artists followed use the following code
.ds-module.ds-users-followed, .ds-module.ds-artists-followed {
  1. displaynone;
}
  • If the code you added doesn't seem to be changing what is on your page, try adding !important after the rule. 
  • Don't forget to check your edits on mobile.


Comments