I'd like to change the theme of my bootstrap-vue project. I changed the primary and secondary color. Now the background of my buttons is customized, but I wondered about the text color. It just stays white. I can change it with
.btn-primary,
.btn-primary:hover,
.btn-primary.disabled,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle
{color:$myColorl;}
but I thought there should be a more simple and elegant way.
just tested this on codepen and it works for me :)
$myColorl: #000 !important;
.btn-primary{
color:$myColorl;
}
Related
I'm working on the ng-multi-select dropdown (in angular7) and I'm able to make changes to the width size externally. However, I'm not able to change the color of the selected text nor change the checkbox color. In short, I need to change the color blue to gray. I've tried different solutions with no success. Can I anyone see form my code below what I'm doing wrong?
For Angular v8, adding this CSS style should do the trick :
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
color: #17c017 !important;
}
.mat-primary .mat-pseudo-checkbox-checked,
.mat-primary .mat-pseudo-checkbox-indeterminate {
background: #17c017 !important;
}
I have started working with react and material ui and facing problem in changing the color and font of text in the table header. Over riding it doesn't seem to change the default style.It is specified that using "headerStyle"(object) changes the header styling. Can anyone help me with properties that has to be changed to achieve this.
Just checked you code.
Adding className work fine.
<TableHeader className="table-header">
And now you can apply styling you need according to your need like
.table-header{
background: #cdcdcd !important;
}
.table-header th {
color: blue !important
}
This works well for changing the background color and heading color for the table!
I found some previous posts about this, but the mistakes of the ones I saw were obvious to me, and unfortunately I couldn't find an answer to my problem yet.
I'm using a primary panel of bootstap:
<div class="panel panel-primary">...</div>
I want to change the background-color of the heading, so I add this class to my CSS to change the background-color:
.panel-primary > .panel-heading {
color: yellow !important;
background-color: yellow !important;
border-color: #F6E3CE !important;
}
The background-color of the heading, however, just keeps it's blue. What irritates me about this is that the color (font color) changes to yellow, which shows me that I'm editing the right CSS block.
And I can change the background-color of the panel-body just the same way which works fine also.
Any ideas about this?
Here's a screenshot to see that it's only the background-color that won't change:
You need to use background-image or background property to override the default background color.
like this
background-image: -webkit-linear-gradient(top,yellow 0, #dbff46 100%);
or
background:yellow;
you need to be more specific with your code, you didnt mention how your elements are structured, the A > B selector means that it will match the element B that has an element A parent. To help you more with your question maybe add some code snippet so you can get help.
Sorry, I'm very new to stackoverflow. It seems that I have to add a new comment to post another screenshot.
Now this is really strange, when I identify the source of the file "gradients.less" in chrome, I get this Screenshot.enter image description here
According to this picture, I have a directory ../bootstrap/css/less/mixins/gradients.less
But actually the directory that I have is: ../bootstrap/css and there are only files in this, like "bootstrap.css" - no subfolder "less" - no subfolders at all.
I cant find the option to change the header primary background color from white to black, and the menu links from white to black.
Can anyone help?
link to site
You could edit the background-color attribute in the .color-overlay class directly in the according .css file, if there is really no option by default.
I am sure that there will be a color setting into your theme options from the wp-admin section. And you need to check there the options there will be a header setting.
if you want from coding part please add CSS rule below into your theme style.css
#menu-main-menu li a {
color: #fff;
}
.content.top.style-none {
background: #000 none repeat scroll 0 0;
}
if this code does not work then use !important CSS another rule.
After that, it will look like this
I'm having a little difficulty with a MailChimp template I have recently made.
It has been fully tested and works fine, the only issues comes when the clients is editing the text in the editor. The text colour is supposed to be white but the trouble is, then background colour of the MailChimp editor is white so it doesn't "appear" for the client easily.
I had and resolved the same issue -> the white text was on a white background in the editor.
To resolve:
I simply had to ensure the 'background' style was set to !important in my code
This then ensured this same style was also shown in the Mailchimp editor
e.g.
#mybutton {background: #000 !important; color: #fff !important}
Thanks for the help guys but I have resolved this issue!
It was a case of adding a background colour to the property which in turn applies this to MailChimps editor.