What do I need to target to change the opacity for Bootstrap 4? I found that I need to target this to affect its background, but when I add opacity:1 to tooltip-inner or tooltip, it does nothing:
.tooltip .tooltip-inner {
background-color: #014379;
}
.tooltip .arrow:before {
border-top-color: #014379;
}
What do I need to do to change it?
Thanks!
You can change the opacity of tooltip like this
.tooltip.show {
opacity: 0.5;
}
If you've tried tried this code
.tooltip.show /* The CSS classes that the tooltip has */ {
opacity: 0.5; /* or whatever */
}
Then try to add !important, so that you can be sure that your style will be applied
opacity: 0.5 !important;
If it still doesn't work, feel free to tell me.
Opacity has a value between 0 and 1. 1 being nothing changed at all and 0 being invicible.
.tooltip .tooltip-inner {
background-color: #014379;
opacity: 0.5;
}
.tooltip .arrow:before {
border-top-color: #014379;
}
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
If you want to change the background color opacity, you could use rgba()
though it will not work with HEX colors unless you use SCSS
that means if you want this solution you will need to find a color that looks like #014379 but with rgb()
RGBA Example:
/*Instead of
background-color: #014379;
*/
background-color:rgba(XXX,XXX,XXX,0.5)
SCSS Example:
SCSS Variable:
$color-tertiary: #607D8B;
Change Opacity:
background-color: rgba($color-tertiary, 0.5);
Related
I am working vue js project for my own skill development.
When I change bootstrap-vue toggler background color but Unfortunately background-color isn't changed? I am new in Vue js. please solve this problem if you can?
Vue Structure:-
<div class="toggler-btn">
<b-form-checkbox v-model="checked" name="check-button" switch>
</b-form-checkbox>
</div>
Style:-
<style scoped>
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: red !important;
background-color: red !important;
}
</style>
Your problem is because of style scoping. You can create a global.css and put all your global styles in there. I prepared a working code snippet based on your code to see that it's working.
new Vue({
el: '#app'
})
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
border-color: red !important;
background-color: red !important;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-form-checkbox name="check-button" switch size="lg" />
</div>
This may be due to the scoped styling. Try this:
<style scoped>
::v-deep(.toggler-btn) {
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: red !important;
background-color: red !important;
}
}
</style>
I have a bootstrap button on my html page:
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
a bit further down I have this:
<div class="navbar-collapse collapse">
when I hover over my button the background-color changes to the value that I expect using this selector:
.navbar-header > .navbar-toggle:hover {
background-color: #9c83bb;
color: #fff;
}
When I click my button the target div changes to:
<div class="navbar-collapse collapse on">
So using Less I want to be able to keep the color of the hover background while 'on' is attached to the target div.
Less is just a preprocessor, it's not going to provide you with the ability to go back to a previous element and change its classes or styling depending on the existence of a class on a separate element lower in the DOM. If you want to do that, you're going to need JavaScript.
A different way to do this would be to alter the elements completely independent of eachother, but still provide both of them with a toggleable state. More specifically: change the button into a checkbox, hide the checkbox, and style the label. You can still have the data attributes data-toggle and data-target on your element, it will just be a different type of element.
input.navbar-toggle ~ label:hover {
background-color: #9c83bb;
color: #fff;
}
input.navbar-toggle {
display: none;
}
input.navbar-toggle ~ label {
border: 1px solid black;
padding: 2px;
border-radius: 3px;
}
input.navbar-toggle:checked ~ label {
color: #fff;
background-color: #9c83bb;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<input type='checkbox' id="navbar-toggle-input" class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' /><label for="navbar-toggle-input">Toggle</label>
<div class="navbar-collapse collapse">Navbar!<div>
Edit:
If you wanted to do the same thing with JavaScript:
document.getElementById('navbar-toggle-button').addEventListener('click', function() {
var target = this.dataset.target.replace('.', '');
var element = document.getElementsByClassName(target)[0] // This is lazy, don't do this. It's just for testing
if (hasClass(element, 'show')) {
this.style.color = 'white';
this.style.backgroundColor = 'black';
} else {
this.style.color = '#fff';
this.style.backgroundColor = '#9c83bb';
}
});
function hasClass(target, className) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
button.navbar-toggle:hover {
background-color: #9c83bb;
color: #fff;
}
button.navbar-toggle {
background-color: black;
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type='button' id="navbar-toggle-button" class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>Toggle</button>
<div class="navbar-collapse collapse">Navbar!<div>
I have a set of black png icons. When a user hover over them, I want the icons to become blue. How can I convert them to blue using css? I tried css filters but its not changing colors for me.
Here is the black icon
and here is how I want it to be on hover
Short answer: Is not possible to change the color from grey to blue for a specific part of your image using css filter.
Only few aspects are available using filter:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
Use FontAwesome!
Link the stylesheet in the head of your HTML document using this link.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
After that, you can visit this link for a reference of all icons.
To accomplish what you want you can use the code below.
.circle {
height: 50px;
width: 50px;
background-color: #eff2f7;
border-radius: 50%;
display: inline-block;
text-align: center;
}
.icon {
display: inline-block;
position:relative;
top: calc(50% - 8px);
}
.icon:hover {
color: blue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="circle">
<i class="fa fa-twitter icon"></i>
</div>
</body>
</html>
I'm having trouble understanding why I can't pass a custom CSS property for a background image to a polymer element. Using CCS properties for styling Polymer elements is explained here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details and this works for some elements (example the grey background in my code below).
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, white);
background-image: url(var(--container-background, 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg'));
/* THIS WORKS
background-image: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
*/
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
Polymer({ is: 'my-element'});
</script>
</dom-module>
<my-element></my-element>
</body>
I have two question:
Why isn't this working?
What is the best way to solve this?
Code is here: http://jsbin.com/yuxobexepe/edit?html,output
Thanks!
Paul
You are mixing the definition/usage of CSS property. Here is a working JSBIN of your problem:
<html>
<head>
<base href="http://polygit.org/polymer/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, blue);
background-image: var(--container-background, "default.png");
--container-background: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({ is: 'my-element'});
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
background-image is using the value of --container-background if it exists, or default to what you give. Then you define separately the --container-background property, usually, outside of the component itself.
EDIT :
I really need it to work, if you are going to answer or reply, please read comment on question before, your point might have been covered already.
I'm trying to override the base variables of sencha to create a theme for my app
Here is my app.scss
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
$base-color: #8bc531;
This one too did not work, has replied in comments. No need to link a non working answer and downvote again. Plus, good to know, the .scss file does compile correctly without errors.
$base-color: #8bc531;
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
Actually the file is longer and everything else works properly.
I'm only having problem with $base-color has it does not change color at all of anything and it is suppose to affect most of the app's componenent at once...
Can someone explain me why it does not work has it should and has it is showed on the sencha websites...?
Beware of creating your project with trial version of ST.
The index file is not the same has when you buy it, in the trial one, it overides theming with their color, (uneditable) while in the paid version, this line is removed -_-'
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>CarboZero</title>
<style type="text/css">
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
#-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script src="resources/AppLibrary.js"></script>
<script src="resources/ENG.js"></script>
<script src="resources/FR.js"></script>
<script src="resources/ESP.js"></script>
<script src="resources/GlobalVariables.js"></script>
<script src="resources/ProjectStorage.js"></script>
<script src="resources/Elements.js"></script>
<script src="resources/UnitConversion.js"></script>
<script src="resources/Types.js"></script>
<script src="resources/LanguageConversion.js"></script>
<script src="resources/ESPElement.js"></script>
<script src="resources/ENGElement.js"></script>
<script src="resources/FRElement.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>