my application is includes a Toast widget that notifies user when the query has been finished. I want to add custom icons, change the colour, add more drop-shadow, and change the font type.
I was unable to find anything within the documentation or in the UI in terms of custom styling. Wanted to see if there's a global class name that I can use to apply to the widget?
How’s it going, happy to help out here! You can customize your toast widget through classNames. Although toast widgets do not support custom classNames yet, you globally override the css className that determine the toasts styling.
For the toast container you can use the pt-toast class:
.pt-toast{
// customs styles here
box-shadow: none
}
For the toast message box you can use the pt-toast-message class:
.pt-toast-message {
// customs styles here
}
Related
I have a react application which uses 3rd party libraries to create components.
The problem I am facing is one library css is getting loaded from CDN and other through node_modules. The css coming from CDN is overriding the css from other libraries.
CSS from CDN is written as -
.solar-theme button {
// css properties
}
CSS from other library is as -
.some-button {
// css properties
}
And button component in this library uses solar-theme as classname.
How to isolate the CSS coming from CDN to a single react component so that it doesn't overrides the other library css?
I am new to UI/UX. Please help.
Since you can't edit the CSS files from the libraries, you should write a new stylesheet to override certain properties as you come across them.
You might also have to use important! to enforce your properties.
For example:
/* Your custom stylesheet */
.some-button {
background-color: red !important;
}
If this does not work (it probably won't), you need to be more specific with your declarations.
Generally, the more specific you can be, the higher the chance of your style getting applied (when there are conflicting stylesheets).
So you can upgrade the declaration above by doing something like this instead:
/* Your custom stylesheet */
footer .container .some-button {
background-color: red !important;
}
It's called specificity. You can read more about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I was wondering if there was a way to set the styling for a Mat-Expansion-Panel that's been disabled. I have buttons in the header and interacting with them toggles the panel so I believe it better to just toggle the panel with a button and disable the panel itself.
However, when I disable the panel it grey's out all the items inside the panel. Is there a way to remove the disable styles or overwrite them?
Using the following in your component style sheet will return the disabled expansion panel color back to default.
::ng-deep .mat-expansion-panel-header[aria-disabled=true] {
color: rgba(0,0,0,.87);
}
Per this SO answer, until an alternative or replacement is provided for ::ng-deep the recommendation is to continue using it...
What to use in place of ::ng-deep
If you want to make it cleaner, also in a Material way i would recommend to use the builtin material scss function and material scss variable.
::ng-deep mat-expansion-panel-header {
color: mat-color($accent);
}
[aria-disabled=true] is not required when both states disabled true and false should have the same color.
See also for more information: https://material.angular.io/guide/theming
So I have installed audio.js on my website. All works ok. I want it to change how it looks. Actually, I want that it would appear only as Play button (or play/pause button). Or in other words: I want to hide progress bar and "time passed | time remaining". How can I do this?
audiojs has settings that u can customize the style and markup, please refer to the documentation
If you wanna use default class names, you can overwrite their styles by adding css something like this:
.audiojs .scrubber {
display: none;
}
There is the working source code link: https://jsfiddle.net/qp5xjxb9/3/
I am a junior developer building my first web application for a client.
The owner is not content with the standard colours of the bootstrap buttons on the home.html.erb and wants a flamboyant colour of pink on one button particularly.
How do I style a twitter bootstrap button with hexadecimal colour using rails 4.2.4
What would the syntax be and what CSS folder from my below list would I use for such:
bootstrap_and_customization.css.scss,
home.css.scss,
pages.scss
You can just add it to the application.css|css.scss
So if you added a class of btn btn-pink to the button. I recommend that you add btn class so you will inherit the basic styling.
.btn-pink{
color: #FFFFFF; // whatever you want
background-color: ##FF69B4; // whatever you want
}
I'm creating a custom TabNavigator component to be used in other applications. Right now though, the background of the tabs will not change (although other style changes do apply).
in my CustomTabNavigator class, I have this override:
override protected function updateDisplayList (w:Number, h:Number):void {
super.updateDisplaylist(w,h);
tabBar.styleName="CustomTabBarStyle";
}
And here is the css in the <style> declaration:
.CustomTabBarStyle {
tabHeight:100;
tabWidth:100;
tabStyleName: "CustomTab";
backgroundColor: #FFFFFF;
}
.CustomTab {
backgroundColor: #FFFFFF;
color: haloBlue;
}
The haloBlue color of the text is applied, as well as the tabHeight and tabWidth. The background color isn't changed though. I've been through about 5 tutorials trying different things, to no avail... is there a way to do this within a custom component? All I'm trying to do is get rid of the gradient background in place of a flat white background.
I was able to do this by extending the TabBar and ButtonBarButton classes. I then made a separate skin for the custom ButtonBarButton that used a custom background color pulled from a new field in the custom class (e.g. hostComponent.tabBackgroundColor).
If someone has a better solution using the CSS method, I'd be happy to accept that instead (as that was what I was originally asking for).