I'm using the Modal-component from react-bootstrap.
I have two different Modals in my application and I want one of them to have an orange background color.
I can achieve the orange background color by doing:
.modal-content {
background: #FF8C0A;
}
However, this will make both of the modals in my application orange. I can't find a way to label the modal-content with an unique ID to edit just one of them. Can the "dialogClassName" prop maybe be used in some way?
Note: I've already tried giving the head and body IDs and making their background color orange. This works on desktop, however, on mobile devices there is a transparent line between the header and body in which doesn't look good.
Thank you!
Screenshot of the implementation of the Modal
You can use CSS nesting to target children of the components, For eg, In your case,
You named your modal using dialogClassName prop to info-modal, you can use this in ur CSS
info-modal .modal-content {
background: #FF8C0A;
}
Similarly for other modals, you can pass different name using dialogClassName prop
other-modal-1 .modal-content {
background: red;
}
other-modal-2 .modal-content {
background: green;
}
You can use "CSS modules" package for achieving this.
There are useful links for learning and implementing CSS modules..
https://www.javascriptstuff.com/css-modules-by-example/
https://css-modules.github.io/webpack-demo/
set backdropClassName="red" in your modal
and in CSS
.red {
background: none !important;
}
Related
I am experimenting with tabs in Bootstrap-Vue. I am trying to adjust the styling on an active tab. From the documentation at https://bootstrap-vue.org/docs/components/tabs#active-classes, I've seen this example that changes the active tab styling. I understand that I am to modify the active-nav-item-class attribute, like so:
<b-tabs
active-nav-item-class="font-weight-bold text-success"
active-tab-class="font-weight-bold text-success"
content-class="mt-3"
>
In my JSFiddle which you can see at https://jsfiddle.net/b4o1kL2f/1/, I am similarly trying to set the active-nav-item-class to a class style in CSS, by binding it with Vue:
<b-tabs pills vertical :active-nav-item-class="'tab-active-class'">
Here is the CSS:
.tab-active-class {
background-color: red;
}
But it seems like the active tab background color is not changing. Can anyone spot what I might be doing wrong? Thanks so much!
The class is applying to the HTML element but the problem is that .nav-link.active has specificity more than .tab-active-class, So you have to increase the specificity of .tab-active-class
.nav-link.active.tab-active-class {
background-color: red;
}
or
.tab-active-class {
background-color: red !important;
}
I want to change the color of the controls of my Fancybox 3 gallery, as the default is barely readable.
I already loaded a separate Fancybox stylesheet, that allows me to change the color of the background. I can not find a way to change the color of the controls using the same method, though.
Contents of fancybox.css:
.fancybox-bg {
background: #ccc;
}
.fancybox-is-open .fancybox-bg {
opacity: 0.4;
}
You should be more specific about what color you would like to change, but if you refer to buttons in the top right corner, then you can do that by tweaking .fancybox-button class, example:
.fancybox-button {
background: red;
color: #fff; /* Tip: This will change icon color */
padding: 0; /* Tip: Change padding to resize icon */
}
Important: Make sure you add your CSS customization code AFTER including fancybox.css
Please use the parent element or class or id to override plugin css.
For example
div .fancybox-bg{...}
or
.class_name .fancybox-bg{...}
Use
.fancybox-bg {
background: #ccc !important;
}
I am trying to override some Material2 styling in my Angular 2 app and so far I'm not able to get it to work. Specifically, I want to override the background color for the md-menu. This is what my html looks like:
<md-menu #menu="mdMenu" [overlapTrigger]="false" class="sub-drop-bg">
<button md-menu-item routerLink="option-A" class="sub-drop-item">Option A</button>
...
</md-menu>
And this is what I've tried adding in my LESS/CSS:
md-menu.sub-drop-bg /deep/ {
background-color: #555 !important;
}
So far this seems to have no effect. The default #fff background-color still shows up for the md-menu background.
As additional info, when I hover over and inspect element, I see the default mat-menu-content class as being styled with the white background, like this:
.mat-menu-content {
background: #fff;
}
I've tried adding that class to my component CSS, and using it to override the background-color, also to no avail. If I "de-select" that color for that class in my browser console, the background color goes away (becomes transparent). But, as I say, adding that class and overriding the color in my CSS doesn't override the white color when I reload.
How can I accomplish this with CSS alone?
You can also use this:
::ng-deep .mat-menu-content{
background-color:red;
}
demo
If I am not wrong, the following css should work for you:
/deep/ .mat-menu-content {
background-color: #555 !important;
}
Im currently working on a Angular2 application with webpack and Im trying to set differents css themes according to the user.
For example : When the user connect, If it's a boy, I want to have my backgrounds blue, and if it's a girl I want the backgrounds to be pink.
Simply changing the css value with setAttribute or style.property wont work because the DOM is destroyed when changing tab in the application, it needs to be kinda permanent.
I've tried using different css stylesheets (1 for each theme) and linking them to my html with javascript when the user connect. Problem is, webpack is always adding automatically my css to my html when building the app.
Thanks for the help.
In your css, make a rule like :
.is-boy{
background: blue;
}
.is-girl{
background: pink;
}
and declare in you angular app a scope var like $scope.userSex = 'boy';
and on your body use ngClass like this
<body [ngClass]="{'is-boy': userSex === 'boy', 'is-girl': userSex === 'girl'}" ...
:host-context selector
You could use the :host-context selector to apply styles to your component based on the parent component.
styles:[`
:host-context(.parent1) div{
border: 1px solid blue;
}
:host-context(.parent2) div{
border: 1px solid blue;
}
`]
This allows you to conditionally apply styles based on a the selector that wraps the component.
plunker
edit:
So in your case - your parent would have a div with class .boy and a div with class .girl
You could load these containing divs with some flag controlled by ngIf
If you want to be permanent store class value in localStorage. To set the theme use ngClass with variable set to theme you need.
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/