I am using Qlik Sense multi KPI object.
Here is my CSS code:
& *{
border-width: 2px;
border-color: #E6E6EF;
}
& .label * {
font-family: 'Calibri';
font-size: 150%;
}
& .statistic-1 .value * {
font-family: 'Calibri';
font-size: 150%;
}
& .value * {
font-family: 'Calibri';
font-size: 90%;
}
I have 4 squares. I want to put a conditional color on each of the squares.
How can I achieve it in CSS.
Here are the colors I want to use:
If Alert then green
If Critical then red
If command to launch then Orange
Otherwise Grey.
Related
I've been trying to solve this problem all day without success.
I want to change de background color from my home page. For this i have use this CSS:
.page-id-6128 {
background-color: #F5F5DC;
background-size: cover;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
min-height: 100vh;
background-position: 50% 100%;
}
The problem is that i can't remove the white background from the menu as you can see in the next image:
https://i.stack.imgur.com/C9c2P.png
www.albertosotophotography.com/home
Thank you for your help!
Add this:
.navbar {
background-color: #F5F5DC;
}
EDIT
Better solution - remove background-color property from your .site class. Now you have:
.site {
background-color: #fff;
margin: 0 auto;
width: 100%;
}
I have a simple page here:
http://www.ttmt.org.uk/color/
The center blocks color is saved as a variable in sass
The color of the blocks either side are created with sass's lighten and darken.
Is it possible to display the actual hex number of these lighter and darker colors that sass has created.
The color's hex are displayed in the output css but I'd like to be able to do it dynamically and display the hex color in the block.
I have the colors in scss file
$base-blue: #267EC8;
// Blue
.at-blue{
background-color: $base-blue;
}
.at-blue-lighter{
background-color: lighten($base-blue, 20%);
}
.at-blue-light{
background-color: lighten($base-blue, 10%);
}
.at-blue-dark{
background-color: darken($base-blue, 10%);
}
.at-blue-darker{
background-color: darken($base-blue, 20%);
}
Then I'm using the class name in the html
<div class="my_Box at-blue-lighter" >.at-blue-lighter<span></span></div>
<div class="my_Box at-blue-light" >.at-blue-light<span></span></div>
<div class="my_Box at-blue" >.at-blue <span></span></div>
<div class="my_Box at-blue-dark" >.at-blue-dark<span></span></div>
<div class="my_Box at-blue-darker" >.at-blue-darker<span></span></div>
And styling the box in separate scss file
.my_Box{
text-align: center;
height: 120px;
float: left;
padding: 10px;
margin: 0 30px 0 0;
width: 120px;
span{
display: block;
font-size: 1.2em;
margin: 10px 0 0 0;
}
}
You can use content to show it : http://jsfiddle.net/A9rML/
$color : rgb(38, 126, 200);
div{
background-color: $color;
&:after{
content: "#{$color}";
font-size: 42px;
color: white;
}
width: 200px;
height: 200px;
}
I use artisteer for making joomla template, I use this code:
.newsdate {
background: #f0f0f0;
color: #737373;
padding: 10px;
width: 40px;
height: 40px;
float: left;
margin-right: 10px;
margin-bottom: 25px;
text-align:center;
}
.art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}
#art-licence-links
{
display:none;
}
::selection
{
color:#FF4300;
}
::-moz-selection
{
color:#FF4300;
}
and my highlight color changes like this
but I want it to change like this
In your ::selection and ::-moz-selection blocks add backgound-color property and specify the color of the selected background.
Hi I am teaching myself some backbone from tutorials, and I want to create a table like display element using spans.
So I added a width element into my span in the template. (I know it isn't the best place to put it, but it should take priority over stylesheet properties, and is just to get an idea during development).
<script type="text/template" id="loadedwith-template">
<span style="width:100" class="library"><%= library.name %></span>
<input style="width:100" class='input' type="text" />
<button class="delete_lw" >delete</button>
</script>
However when I look at it in the browser, the element shows up as before without the width setting applied.
"Inspect element" in Chrome shows the width property, but is disabled (has a line like html strikethrough on it). This is the last thing shown in element styles before the computed styles section.
There is another stylesheet referencing the span. Is there anything causing the width to be disabled? The other stylesheet is as follows (borrowed from the backbone tutorial). (The span is inside a list).
a { color: #2929FF; }
a:visited { color: #777; }
a:hover {
color: #8F8FFF;
text-decoration: none;
}
body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {
background: #FFF;
color: #444;
padding: 25px 50px;
}
button, .delete, .swap {
border: 0;
border-radius: 5px;
color: #FFF;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
button:hover, .delete:hover, .swap:hover { opacity: 1; }
button {
background: #2929FF;
font-size: 0.75em;
padding: 7px 12px;
opacity: .75;
}
h1 {
font-size: 1.25em;
letter-spacing: -0.5px;
}
p {
color: #777;
font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif;
}
span {
display: inline-block;
margin-right: 10px;
}
ul { padding-left: 0; }
.delete, .swap {
font-size: 0.625em;
opacity: .25;
padding: 3px 10px;
position: relative;
top: -3px;
}
.delete { background: #FF29D0; }
.swap { background: #FF6529; }
You need to specify a unit of measurement
Specifying CSS units is a requirement for non-zero values. Browsers may try to guess what you meant, but it would still be a broken stylesheet according to the standard.
I.e. there is no "default unit" in CSS, it's just that the browser may try to help you out, although it may as well just ignore your statement that doesn't specify units as an invalid one.
Try style="width:100px"
You should specify a unit, like px:
style="width: 100px"
Could someone explain me what's going on with this small piece of HTML ?
http://jsbin.com/akome5
On most of current browsers (FF4, Chrome10, IE9, IE8, Opera 11), the layout of the element looks like this :
Meh?! I don't understand why ?!
Why aren't the height and width as big as the visible box (orange+red spaces) ?
Adding a "display:inline-block;" to the element doesn't seems to really fix it.
How can I fix it ?
Thx!!
Setting a width and height on an A tag
Try adding the following styles.
a.button {
display: block;
float: left;
overflow: auto;
}
a.button span {
display: block;
float: left;
}
I'd propose a different approach involving no spans
html:
<a class="button2" href="#">Text Text Text</a>
css:
/* Button 2 */
.button2 {
background-color:red;
border:solid 10px orange;
border-top:0;
border-bottom:0;
display:inline-block;
color:#fff;
font-family: Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
line-height:30px;
text-decoration:none;
padding:0 3px;
}
old (top) new (bottom)
http://jsfiddle.net/pxfunc/vr7gJ/
For information I manage to do it without float:left, here is the whole CSS :
a.button{
display: inline-block; /* <- added */
text-decoration: none;
}
a.button span{
display: inline-block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
height: 30px;
line-height: 30px; /* <- added */
text-decoration: none;
}
a.button .left, a.button .right{
background-color: orange;
width: 10px;
}
a.button .text{
background-color: red;
color: white;
}
The line-height instruction was the key.