GDPR/CCPA app styling

The GDPR/CCPA + Cookie Management app offers endless possibilities for styling customizations. It doesn't matter if you are using a Basic or a Premium plan you can customize it in a way that will completely match your store design.

In this article, you will find some examples that you can use to make additional styling of the app. Let's jump right in:

• Removing the Preferences button from the Cookie Consent Bar

We have received a couple of questions about whether it is possible to remove this button. That's why we decided to show you how you can do it in just a few steps:

1. Open the Design Settings tab

2. Navigate to the Custom CSS settings

3. Copy the script below and add it to the field

.cc-settings {display:none !important; }

4. Click the Save button

Cookie Consent Bar with the Preferences button

Cookie Consent Bar without the Preferences button

• How to remove the Close button from the cookie Consent Bar:

1. Open the Design Settings tab

2. Navigate to the Custom CSS settings

3. Copy the script below and add it to the field

.cc-dismiss{display:none !important;}

4. Click the Save button

Cookie Consent Bar with the Close button

Cookie Consent Bar without the Close button

• Cookie Consent Bar selectors - below you will find the list of selectors that you can use to style the elements of the Cookie Bar.

1.        .cc-message
       

2. .cc-dismiss
   

3. .cc-settings
   

4. .cc-allow
   

• Changing the Cookie Consent text color

To change the Cookie consent text color you have to navigate to the Design Settings tab then choose the color from the Text Color option and click the Save button.

If you want to make changes to specific parts of the text in the Cookie Consent Bar here is what you should do:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-message { color: black; }

4. Click the Save button

Result: The changed color of Cookie Consent text

• How to change the text color of the Close button:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-dismiss { color: black; !important; }

4. Click the Save button

Result: The changed text color of the Close button

• How to modify the text color of the Preferences button:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-settings { color: black;  !important; }

4. Click the Save button

Result: The changed text color of the Preferences button

• How to change the background color of the Preferences button:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-settings { background-color: black; !important; }

4. Click the Save button.

Result: The changed background color of the Preferences button

• Changing the text color of the Accept button:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-allow { color: black; !important; }

4. Click the Save button.

Result: The changed text color of Accept button

• How to change the background color of the Accept button:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-allow { background-color: black; !important; }

4. Click the Save button

Result: The changed background color of the Accept button

Note: Keep in mind that applying Custom CSS may override your current settings which you have applied for the colors and the styling of the bar.

• CSS selectors for the Preferences panel - you are able to use different CSS codes in order to modify the elements from the Preferences panel. Use the selectors below to make the changes.

1. .cc-settings-dialog > .main_information > .cookie_settings_header
   

2. #cookieconsent\:settings > div > div.main_information > label:nth-child(4)
   

3. #cookieconsent\:settings > div > div.main_information > label:nth-child(9)
   

4. #cookieconsent\:settings > div > div.main_information > label:nth-child(14)
   

5. #cookieconsent\:settings > div > div.main_information > label:nth-child(19)
   

6. .cc-btn-accept-selected
   

7. .cc-btn-accept-all
   

• How to change the text color of the header:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-settings-dialog > .main_information > .cookie_settings_header { 
    color: black; !important; 
}

4. Click the Save button

Result: The changed color of the text in the header

• Changing the text color of the cookie categories

Follow the steps below in order to make the changes for the Strictly required cookies:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

#cookieconsent\:settings > div > div.main_information > label:nth-child(4)  { 
    color: black; !important; 
}

4. Click the Save button

Result: The changed text color of the Strictly Required cookie category

By following the same steps you will be able to change the text color of the other cookie categories. Make sure to change the selectors for the different elements of the Preferences panel.

I.e if you want to make the same change to the Functional cookies you should change only the last digit part of the selector:

From this:

#cookieconsent\:settings > div > div.main_information > label:nth-child(4)

To that:

#cookieconsent\:settings > div > div.main_information > label:nth-child(19)

• Customizing the text of  Accept Selected button 

 To change the text color you have to:

1. Click on the Design Settings tab

2. Navigate to Custom CSS settings

3. Add the script below in the settings field

.cc-btn-accept-selected { color: black; !important; }

4. Click the Save button

Result: The changed text color of the Accept Selected button

• Customizing the background color of the Accept Selected button: 

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-btn-accept-selected { background-color: #0040ff !important; }

4. Click the Save button

Result: The changed background color of the Accept Selected button

• Changing the text color of the Accept All button of the Preferences panel:

1. Navigate to Design Settings

2. Go to Custom CSS settings

3. Add the script below in the settings field

.cc-btn-accept-all { color: black; !important; }

4. Click the Save button

Result: The changed text color of the Accept All button

• Change the background color of the Accept All button:

1. Click on the Design Settings tab

2. Navigating to the Custom CSS settings

3. Add the script below in the settings field

.cc-btn-accept-selected { background-color: #0040ff !important; }

4. Click the Save button

Result: The changed background color of the Accept All button

• Styling the checkbox color and the checkbox tick color

If you would like to make any modifications to the checkboxes and the ticks you should navigate to Design Settings > Checkbox Color and Checkbox Tick Color.

Result: The changed colors of the checkboxes and the ticks

Note: Keep in mind that we have used a random color if you want to change it simply add the color code that you want after the ‘’#’’

You can choose the color you want to use from the color picker here.

• Fonts customization

If you would like to apply a global setting for all of the text in the Consent Bar or Preferences Popup, for example, change the font size or the font, you can do it by navigating to the Design Settings tab > Font Family and Font Size

In this example, we use the font, Cambria, however, you are able to use whichever font you prefer.

Result: The changed Font Family and Font Size of the Cookie Consent Bar 

Result: The changed Font Family and Font Size of the Preferences popup

If this option doesn't work for you or you need a more specific modification you can apply it with the following selectors:

To change the font of the Consent Bar use this selector: .cc-window

1. Click on the Design Settings tab

2. Navigate to the Custom CSS settings

3. Add the script below in the settings field

.cc-window { font-family: "Times New Roman", Times, serif; }

4. Click the Save button

Result: The changed font of the Cookie Consent Bar:

To change the font of the Preferences popup use this selector: .cc-settings-dialog

1. Click on the Design Settings tab

2. Navigate to the Custom CSS settings

3. Add the script below in the settings field

.cc-settings-dialog { font-family: "Times New Roman", Times, serif; }

4. Click the Save button.

Result: The changed font of the Preferences popup

Check the How to customize the GDPR/CCPA app in a few easy steps blog post for more details or watch the video down below.

In conclusion, we can say that you have many different options to additionally style the GDPR/CCPA app. You just need to choose what you want to customize and how you want it to look like. 

Feel free to contact us if you have any questions or check our FAQ page for more information.