Solved
"floatingPreferencesButton" (Bug + Feature Request)
Hi!
In order to fully customize the floatingPreferencesButton, there should be an additional id attribute.
Because of excessive use of !important styles in the most specific selector
.iubenda-tp-btn:not([data-tp-nostyle])
it is impossible to override the button's styles with custom CSS .
It is even breaking the documented option
_iub.csConfiguration = {
...
floatingPreferencesButtonRound: false,
...
}by adding a border-radius of 4px to the button.
By what definition is this issue solved?
1 person likes this
Hi Paul,
Sadly, It has not been solved. I questioned the support by mail, too. They answered:
"We do this for safety, so that nothing gets changed unintentionally. And also because some parts are just not supposed to be modified, for legal and/or product reasons."
I simply cannot understand this reasoning.
A particular bugbear of mine. The best practice would be to at least include that information in the bug (rather than just closing it without info) so that anyone searching for the info will find it - saves support a lot of money! See below for a longer rant ...
After too many decades in the business ... we were always taught that the cheapest form of customer analytics is complaints/issues - you don't have to pay for them and someone really cares to raise an issue. Too many companies these days treat issues as a problem rather than an asset!
As a solution you all can target your SASS/CSS like this:
&.iubenda-cs-preferences-link {
// with !important;
}
}
While it is generally best to avoid using !important extensively, in some cases, it may be necessary to override conflicting styles. Try adding the !important declaration to your custom CSS rules to give them higher priority. For example:
.my-custom-button {
border-radius: 4px !important;
}
Although it's advisable to use them! important declaration sparingly, there are situations where it becomes essential to override conflicting styles. To ensure your custom CSS rules take precedence, consider incorporating the! important declaration as shown in this example:
.my-custom-button {
border-radius: 4px !important;
}
This can be a valuable tool when faced with specific styling challenges, allowing you to achieve the desired results with a unique level of priority.