Permission: Campaign entities

In order to help facilitate your organization's customization of its privacy managers, Sourcepoint has aggregated some commonly used custom CSS by our clients. These customizations can be added to the custom CSS section of the GDPR TCF, GDPR Standard, and CCPA privacy manager builders. 


Add scrolling for mobile devices

For mobile phone support, your organization may want the privacy manager window to have scrolling capabilities. This customization is useful for older generations of iPhones and for when a site is viewed on a mobile device in a landscape orientation. Add the custom CSS below to the custom CSS section of your privacy manager builder to support scrolling.

@media screen and (max-width: 500px), screen and (max-height: 500px) {  .sp_message_container .sp_message {    margin: initial;    max-height: initial;    width: initial;    height: initial;    overflow: scroll;    max-width: initial;  }  .sp_message .sp_message_panel {    margin-top: 30px;  }}

Prevent sizing changes when toggling between sections (GDPR TCF)

By default, there are no maximum or minimum heights for the stack area of a GDPR TCF privacy manager. This default means that navigating between a Purposes tab and a Features tab can change the size of the privacy manager modal.

9541dcb2-866c-4170-be94-998a4ad6cc59.png 60767346-6c9f-4e87-aae4-c498148bc47d.png


To prevent sizing changes when toggling between these sections, add the following custom CSS to the privacy manager builder. 

  Note: The following custom CSS also includes a scroll bar if the max height does not allow all content to show and shifts some of the elements to the left to prevent them from being covered by this scrollbar. 

.pm-purposes {
    min-height: 300px !important;
    max-height: 300px !important;
    overflow-y: scroll !important;
}
.pm-features {
    min-height: 300px !important;
    max-height: 300px !important;
    overflow-y: scroll !important;
}
.stack-row {
    margin-right:8px !important;
}
.pm-type-toggle {
    margin-right: 15px !important;
}

Edit color of privacy manager icons

Privacy manager icons allow end-users navigating your privacy manager to quickly understand the categorization of custom purposes, Apple data brokers, custom vendors, vendor labels. The table below outlines the css classes associated with each icon:

Icon type CSS class
custom purposes

.legend-key

  Note: Custom purposes and custom vendors share the same CSS class.

custom vendors

.legend-key

  Note: Custom purposes and custom vendors share the same CSS class.

Apple data brokers .apple-broker
vendor label 1 .is-custom-vendor-label-1
vendor label 2 .is-custom-vendor-label-2
vendor label 3 .is-custom-vendor-label-3
.legend-key {background: #D76AD2 !important;}
.is-custom-vendor-label-1 {background: #a23f0a !important;}
.is-custom-vendor-label-2 {background: #88a78a !important;}
.is-custom-vendor-label-3 {background: #f73b41 !important;}
.apple-broker {background: #12d5c7 !important;}
  

Screen_Shot_2022-09-21_at_8.19.40_AM.png

Was this article helpful?
0 out of 0 found this helpful