I would like to set a base domain with all of my pictures in CSS file, here's what I tried:
global.css
:root
{
--bgd: #C0C0C0;
--picdomain: "https://somedomain.com/";
}
s1.css
#import url("global.css");
body
{
background-color: var(--bgd); //works if only it exist
background: url(var(--picdomain)"some/path/images/pic.png"); //no effect
}
And load s1.css in html
<link rel="stylesheet" type="text/css" href="s1.css">
The HTML's background-color did changed, but background didn't show up. So I tried other way:
global.css
#picdomain: "https://somedomain.com";
s1.css
background: url("#picdomain/some/path/images/pic.png"); //can't read variable from imported css
didn't help
Only works while I set full URL for an image, like below:
global.css
:root
{
--bgd: #C0C0C0;
--picdomain: url("https://somedomain.com/some/path/images/pic.png");
}
s1.css
#import url("global.css");
body
{
background-color: var(--bgd); //works if only it exist
background: var(--picdomain); //no effect
}
But this isn't what I want......Is that possible to use css variable in "background"?
<style type="text/css">
:root {
--slide-1: url("{{url('public/assets/images/logo-nfs.png')}}"); /*this is laravel*/
--slide-2: url("<?php echo 'images/logo-nfs.png';?>");
}`enter code here`
.header111 {
background-image : var(--slide-1); /*this is php*/
}
.header22 {
background-image : var(--slide-2);
}
</style>
<div class="header111">
test here
</div>
<div class="header22">
test here
</div>
<br>
Related
I have a Blazor app, right now, a default "/" page and one called "/rtdpage"
No problem getting the background on the "/" to black
html, body {
background-color: black;
}
Problem is that I'm looking to get the /rtdpage styled with a
background-color:rgb(189, 191, 193);
I can't figure out how to apply a class to the page/app/body, or get the background to change
Tried:
#page "/rtdpage"
<style>
background-color:rgb(189, 191, 193);
</style>
<h1>This is the RTD page</h1>
#code {}
Also dried putting a <div> around and setting it to 100% width and 100% height, but still leaves most of the page black
Obviously, I'm a newbie at this
Second try,
You can create 2 components ;
YellowComp
#page "/Yellow"
<style>
body {
background-color: yellow;
}
</style>
<h3>YellowBackground</h3>
#code {
}
BlueComp
#page "/Blue"
<style>
body {
background-color: blue;
}
</style>
<h3>BlueBackground</h3>
#code {
}
When you then go these pages; you see this;
In case you would like to have a complete blue or yellow page , without anything else, you need to change the MainLayout.razor component to this :
<div class="main">
<div class="content px-4">
#Body
</div>
</div>
You can add background color with inline CSS in main class the color as per your choice like this in MainLayout.razor.
div class="main" style="background-color: #F8F9FB"
I have a website where each section has its own primary color.
I'd like to put something in Bootstrap 4's Sass code, to override the primary color depending on a body class I set.
I have this, but it's not working so far:
$theme-colors: () !default;
$theme-colors: map-merge((
// primary: $blue,
// secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
), $theme-colors) !default;
// override according to portal
html {
&.portal-1 {
$theme-colors: map-merge((
primary: #f1b36d
), $theme-colors);
}
How can this be implemented in Bootstrap 4's Sass file?
You can't change the sass variables which are already converted to static CSS dynamically at the client side.
However, to build theme system you can apply one of the following options:
1. Generate independent theme
Put a theme argument in your build system which will generate different themes CSS Ex: grunt build-sass --theme=brown
var themes = {
"default": "https://bootswatch.com/flatly/bootstrap.min.css",
"cerulean" : "https://bootswatch.com/cerulean/bootstrap.min.css"
}
// Use something like this to add theme: (You can also append instead of overriding whole head html)
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="' + themes.cerulean +'">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
2. Change properties based upon the parent class
You can have a base CSS which defines general CSS. And then you can have separate CSS Properties based upon the parent
In the following example update green-theme class to blue-theme and vice versa
div[class^=component] {
display: inline-block;
width:150px;
height: 150px;
margin: 1em;
border: 1px solid black;
box-shadow: 1px 1px 5px gray;
border-radius:1em;
}
/* Colors*/
$blue1: #3066BE;
$blue2: #090C9B;
$green1: #5C946E;
$green2: #80C2AF;
/* Blue Theme */
.blue-theme {
.component1 {
background-color: $blue1;
}
.component2 {
background-color: $blue2;
}
}
/* Green Theme */
.green-theme {
.component1 {
background-color: $green1;
}
.component2 {
background-color: $green2;
}
}
<div class="green-theme" id="mainBody">
<div class="component1">
</div>
<div class="component2">
</div>
</div>
*Run Snippet won't work as we are using SCSS *
Make a scss file structure like this,
- vendors
- bootstrap
- stylesheets /*[Bootstrap 4 official sass files]*/
- _bootstrap.scss
- scss
- themes
- _theme-1.scss
- _theme-2.scss
- _variables.scss
- styles.scss
- portal-1.scss
- portal-2.scss
_variables.scss
#import "../vendors/bootstrap/stylesheets/bootstrap/variables";
#import "../vendors/bootstrap/stylesheets/bootstrap/mixins";
/* override bootstrap default variables ... */
/* custom variables with !default ... */
styles.scss
#import "variables";
#import "../vendors/bootstrap/stylesheets/bootstrap";
/* custom styles ... */
themes/_theme-1.scss
#import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary: #428bca
$brand-success: #5cb85c;
$brand-info: #5bc0de;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$body-bg: #eff;
themes/_theme-2.scss
#import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary: #C04848;
portal-1.scss
#import "themes/_theme-1";
/* change style with new variable bootstrap default components ... */
.portal-1 {
#import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
#import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
/* custom style overrides ... */
}
portal-2.scss
#import "themes/_theme-2";
/* change style with new variable bootstrap default components ... */
.portal-2 {
#import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
#import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
/* custom styles from style.scss overrides ... */
}
After sass compilation we will get 3 files styles.css, portal-1.css and portal-2.css.
Use style.css by default and others include in head tag for theming.
<html>
<head>
<link href="styles.css" rel="stylesheet" />
<link href="portal-1.css" rel="stylesheet" />
</head>
<body>
<button class="btn btn-primary">BUTTON</button>
<div class="portal-1">
<button class="btn btn-primary">BUTTON</button>
</div>
</body>
</html>
NOTE: After searching a while for a simple solution, I though I could avoid the pain for anyone trying to achieve this:
You can use CSS variables to achieve this.
There is a thread on the main bootstrap github page Github Issue and user #johanlef has posted a gist showing his method and the relevant code gist.
Then you can just make sure the css variables is initialized in you page
.body.theme1{
--primary: #5d8be5;
}
I used for one of my multi tenanted website and it works great.
I'm trying to implement a modal backdrop effect in angular. I'd like to have a solid color appear when a certain modal dialog is shown that completely overlays the background screen - but I don't want this behavior for all modals (for others I don't want a backdrop).
I've added some CSS in a top level stylesheet as follows:
.modal-backdrop {
background-color: #008000;
opacity: 1.0 !important;
}
This works in that it paints a solid green background but it happens for ALL modals on my system - I need it to happen for one type only. I realise the "!important" directive prevents any CSS override, but not supplying this results in the background page not being totally hidden (it can be seen though the green color).
Any ideas on how this could be done?
You can utilize the backdropClass option of uib-modal
$uibModal.open({
...other options
backdropClass: 'green-backdrop'
})
Then in your css
.green-backdrop.modal-backdrop {
background-color: #008000;
opacity: 1.0 !important;
}
angular.module('test', ['ui.bootstrap']).controller('Test', Test);
function Test($scope, $uibModal) {
$scope.normal = function() {
$uibModal.open({
template: "<div>Hi, I'm normal modal</div>"
});
}
$scope.green = function() {
$uibModal.open({
template: "<div>Hi, I'm green modal</div>",
backdropClass: "green-backdrop"
});
}
}
.green-backdrop.modal-backdrop {
background-color: #008000;
opacity: 1.0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="test" ng-controller="Test">
<button type="button" ng-click="normal()">normal</button>
<button type="button" ng-click="green()">green</button>
</div>
I'm using the range slider from here: http://materializecss.com/forms.html
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
And I managed to change the color of the "thumb" that pops up when you click on the slider by using this:
input[type=range]+.thumb{
background-color: #400090;
}
And normally I can just inspect the element on chrome and get what class I have to change to change its color. For some reasons I can't figure out how to inspect the "dot" in the slider to find what class I have to add to change its color.
This is what I did to change the dot on the slider and the thumb bubble colors.
Screenshot and snippet attached
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<style>
input[type=range]::-webkit-slider-thumb {
background-color: red;
}
input[type=range]::-moz-range-thumb {
background-color: red;
}
input[type=range]::-ms-thumb {
background-color: red;
}
/***** These are to edit the thumb and the text inside the thumb *****/
input[type=range] + .thumb {
background-color: #dedede;
}
input[type=range] + .thumb.active .value {
color: red;
}
</style>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
.noUi-connect {
background: black;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
background: black;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
background-color: black;
}
check out this pen by alexventuraio
you can also do
document.querySelector('.noUi-tooltip').style.background = 'black';
document.querySelector('.noUi-handle').style.background = 'black';
Use querySelector all to change all. CSS [" .noUi-handle{...} and .noUi... "] is not overriding.
I'm new to stack
The easiest way to figure this out is actually by looking through the source code. Hosted here (https://github.com/Dogfalo/materialize/blob/master/forms.html) in line 833 and here (https://github.com/Dogfalo/materialize/blob/master/sass/components/forms/_range.scss) on Github.
Between this and my Chrome DevTools, I have managed to change the background on the range input to #4286f4(substitute for you color) with this CSS declaration:
.noUI-connect {
background: #4286f4 ;
}
You may need to use the !important flag on the property. This changes the color of the slider between the two .thumb elements.
To change the color of the little "thumbs" on the slider:
.range-label{
background-color: desired-color;
}
If you would like to change the grey-color of the background(area outside selection), use this:
.noUI-background {
background: desired-color;
}
Additional Caveat: This solution was only tested on the noUiSlider implementation: http://materializecss.com/forms.html (scroll to Range section). I have not tested this on a plain HTML range element, and sadly need to get back to work.
EDIT:
Having tried to explore solutions on the plain html range input, it appears that there is tag with the class "value" on the slider, as a child of .thumb. Unfortunately, styling this has not led anywhere, leading me to believe that this is either a :before/:after css property, or that your answer lies between lines 73-83 of the 2nd link in the first paragraph.
Am wondering if there is a way to ignore tags:
<!-- I can add code here -->
<!-- I cannot edit the following start -->
<style>
div, td {
color: #555555;
font-size: 10pt;
text-align: left;
}
</div>
<!-- I cannot edit the following end -->
<div id="myapp" style="color:red"><div>Test</div></div>
Am wondering if there is anything that I can add to skip these generic div/td styles. e.g. #myapp div { font-color: inherit; }
There is no straightforward CSS method to ignore later CSS rules.
The most reliable option is to use JavaScript to remove the tag.
Example: Remove the, say, first <style> tag after the <script> element:
<script id="unique-id-script">
setTimeout(function() {
var removeTheNthStyleElement = 1, found = 0,
script = document.getElementById('unique-id-script'), elem = script;
while (elem = elem.nextSibling) {
if (elem.nodeName.toUpperCase() === 'STYLE') {
if (++found === removeTheNthStyleElement) {
// Remove style element => disable styles
elem.parentNode.removeChild(elem);
// Remove temporary script element
script.parentNode.removeChild(script);
break;
}
}
}
}, 4);
</script>
... anything but a style element...
<style>
/* I want to prevent these rules from being used */
</style>
This will inherit red color
#myapp div{
color: inherit;
}