CSS adjustments
While developing the application, we have included the option for users to customize various visual elements using the WordPress Custom CSS field. Below are code examples for making visual changes.
Border radius for window
// Border radius for window
.cookiewp.cookiewp-is-rounded {
border-radius: 10px;
}
Border radius for buttons
// Border radius for buttons
.cookiewp.cookiewp-is-rounded .cookiewp-button {
border-radius: 5px;
}
Font faces
// Font Regular
@font-face {
font-family: 'Inter';
font-weight: 400;
src: url('PATH-TO-YOUR-REGULAR-WOFF-FONT-FILE.WOFF') format('woff');
}
// Font Medium
@font-face {
font-family: 'Inter';
font-weight: 500;
src: url('PATH-TO-YOUR-MEDIUM-WOFF-FONT-FILE.WOFF') format('woff');
}
// Font Semibold
@font-face {
font-family: 'Inter';
font-weight: 600;
src: url('PATH-TO-YOUR-SEMIBOLD-WOFF-FONT-FILE.WOFF') format('woff');
}
Font size for title
// Font size for title
.cookiewp h2 {
font-size: 16px !important;
line-height: 24px !important;
}
Font size for dialog text
// Font size for dialog text
.cookiewp .cookiewp-dialog-text {
font-size: 15px;
line-height: 22px;
}
Font size for expanded content text
// Font size for expanded content text
.cookiewp .cookiewp-expanded-content {
font-size: 15px;
line-height: 22px;
}
Font size for expiration date
// Font size for expiration date
.cookiewp .cookiewp-expires {
font-size: 13px;
line-height: 25px;
}
Font size for settings trigger
// Font size for settings trigger
.cookiewp .cookiewp-accordion-trigger {
font-size: 13px;
line-height: 22px;
}
Font size for setting label
// Font size for setting label
.cookiewp .cookiewp-switch input[type=”checkbox”] + label {
font-size: 14px;
line-height: 24px;
}
Font size for button
// Font size for button
.cookiewp .cookiewp-button {
font-size: 14px;
line-height: 22px;
}
Font size for Learn More expand trigger
// Font size for Learn More expand trigger
.cookiewp .cookiewp-expand-trigger {
font-size: 13px;
line-height: 25px;
}
Font size for table
// Font size for table
.cookiewp .cookiewp-expanded-content table td,
.cookiewp .cookiewp-expanded-content table th {
font-size: 13px !important;
line-height: 28px !important;
}
Font size for setting accordion trigger
// Font size for setting accordion trigger
.cookiewp .cookiewp-accordion-trigger {
font-size: 15px;
line-height: 22px;
}
Font size for setting accordion inner content
// Font size for setting accordion inner content
.cookiewp .cookiewp-settings-expanded .cookiewp-accordion .cookiewp-accordion-inner {
font-size: 15px;
line-height: 22px;
}
Margins for bottom left position
// Margins for bottom left position
.cookiewp.cookiewp-position-bottom-left {
bottom: 30px;
left: 30px;
}
Margins for bottom right position
// Margins for bottom right position
.cookiewp.cookiewp-position-bottom-right {
bottom: 30px;
right: 30px;
}