I've never used bootstrap or reactstrap and i'm having a hard time understand the documentation.
For exemple i'm trying to change Navbar color and background opacity but since they have reserved keywords to pass as props i don't know where to find them or how does it work! the only thing that worked with Color was color = " white".
I tried to change it using css but it doesn't work i even tried to use the !important but nothing too.
Here's their documentation:
They are using Bootsrap 4
The color attribute you mention here comes from bootstrap conventions. They try to limit the use of some attributes using enums. For instance, the color attribute accepts values such as "primary", "secondary", "warning", "danger" etc.
See here for more details: https://reactstrap.github.io/components/alerts/
I suspect "white" didn't actually work, but rather appeared so. "white" is not in the enum list as far as I know.
The way to customize colors is to change what the "primary", "success", etc colors are.
This helps us to theme a website rather than using random colors all over the website. Using themes help us a lot during the latter part of the website journey.
color property is a className.
Create a class pink-color, for example, set background-color:
.pink-color {
background-color: #f7009d !important;
}
Use this pink-color class as a value for color property.
<Navbar color='pink-color' dark expand="md" fixed='top'>
Related
I need to style a material date range picker with custom colors, I'm not able to find which class corresponds to the selected range
I've found the selected and changed with
::ng-deep .mat-calendar-body-selected {
background-color: #368EA1;
}
anyone can help me please?
I also need to change the background color when passing over the items
Thanks
There is a new handy browser feature in Chrome called Css Overview. It gives you an overview of the styling properties used in the page components and native html elements. Among these properties it extracts the colors. From the list of the colors extracted there, pick the mat-calender-range color you want to change and it will give you the name of the classes associated with this color. Here is a screenshot of how this can be used with mat-calender.
I'm a beginner and a great desire to learn. But despite my best efforts there are things that I cannot solve.
Through the element inspector I understood that this color is the primary hover, set by default with this code: #eeac00
I want to change this color with a different code, that is: #000000
How can I do it elementor also provides me with a CSS editing section.
In case there was a need.
enter image description here
enter image description here
Try this CSS:
.add_to_cart_button:hover{background-color:#000000!important;}
If you want to change this color for all your website you can do it in multiple ways :
Make a child theme of your Wordpress theme. Then change the color as you want. (Editor -> Appareance)
:root{
--primary_hover: #000000;
}
You can try to add this code into your Custom CSS from Elementor. Maybe, will it work.
Maybe not the best way if you do update of your theme but if not you can directly change it in your theme settings.
I am using a plugin on a wordpress site which operates in light/dark mode where I can set the colours manually. However the headers are automatically inheriting the theme colours.
I have tried inspecting the code on the grid to try and isolate the class and create a custom CSS code to remove the inherit property.
The code that the issue exists in is
.tg-barking-mouse a:not([class*="tg-element-"]),
.tg-barking-mouse a:not([class*="tg-element-"]):active,
.tg-barking-mouse a:not([class*="tg-element-"]):focus,
.tg-barking-mouse [class*="tg-element-"] *:not(del) {}
Within this bracket, the margin, padding, color etc exist. When I remove color it does exactly what I would like it to.
However when I paste the same code listed above in CSS and write color:none within the bracket, it doesn't seem to add to the element and overwrite the current color settings.
I believe there is a simple solution which will allow me to isolate the correct element but I'm not too sure what I'm missing.
Is it only the header that has the issue?If it is then you can use css to set your preferable color choice. try include important property like color: #000 !important; or any color of your choice to see if it can do the trick.
Thanks everyone for your help, I was able to work it out by targetting h2 within the class and resolved the issue with the inherit property:
h2.tg-item-title {
color: inherit !important;
}
And it has inherited the plugin's text style rather than the Wordpress theme.
Similar to the question referenced below, I am trying to set the background and foreground color of the active tab label using theme colors. I mostly expected referencing the theme colors identifiers in CSS to not work. Is there a proper way to do so?
AngularJS Material Design : Different colors for different tabs in md-tabs
works:
.md-tab.md-active
{
background: green;
}
doesn't work:
.md-tab.md-active
{
background: accent;
}
The md-colors directive works with either value within an html tag, but they don't apply to the specific portions of md-tabs or md-tab that I would like:
<div md-colors="{color: 'accent', background: 'green'}">My Text</div>
What I'm trying to do is avoid hard coding the color that happens to be the accent (or could be primary) in the CSS. I'm thinking there is a way to programmatically determine the colors of accent/primary and then apply the colors. I haven't figured it out yet.
I think the issue is that you are trying to set the color to 'accent' which is not a color. As a variable it works in an Angular directive, but not is vanilla css.
We're using icomoon so that our icons are fonts and we can change their color easily. But, I'm having a problem styling an icon so that the default color is lightgrey and, when it has a primary class its color is yelloworange. Right now, my stylesheet looks like this:
i
&.icon-star.primary
color yelloworange
&.icon-star
color lightgrey
Each of these styles works on their own. But, when I have both of them, all of the icons are lightgrey and the icons with the primary class are not yelloworange. (I've checked the elements and they do have the correct class names).
Any help would be greatly appreciated. Thanks!
Each of these styles works on their own.
I doubt it, since yelloworange isn’t a CSS colour. If you look at Stylus’s rendered CSS, you’ll see that it doesn’t recognize the colour either (Stylus would have transformed it to its hex representation).
If you did have yelloworange defined as a custom value, make sure you still do!
The workaround that I've figured out is to use a standard class for lightgrey stars and primary class for yelloworange stars. It doesn't seem as elegant as only adding one class to the primary stars but it does work.
i
&.icon-star.primary
color yelloworange
&.icon-star.standard
color lightgrey