How do I change the color of an indeterminate progress bar in Material Design Lite?
I would like the bar to use the accent color I have chosen (pink) when I invoked
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
This is the line for the progress bar currently:
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="width: 100%"></div>
I have tried adding mdl-color--pink-500 and mdl-color-text--pink-500 to the class, but to no avail.
Ran into the same problem. Apparently mdl-progress uses the theme color for display & there's no straight-forward way to change that. I ended up creating an additional class mdl-progress-red which I attach to the mdl-progress only so that I can set the color of the child elements. Below you have the CSS for red rgb(255,0,0). If you want to change the color, just replace rgb(255,0,0) with your desired color everywhere in the style below.
.mdl-progress-red > .progressbar {
background-color: rgb(255,0,0);
}
.mdl-progress-red > .bufferbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}
.mdl-progress-red > .auxbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}
And then, to apply the color to your progress bar - you just specify the new class name like so:
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate mdl-progress-red" style="width: 100%"></div>
I've also come across the same issue when trying out Material design. Marius is correct in stating:
Ran into the same problem. Apparently mdl-progress uses the theme color for display & there's no straight-forward way to change that.
I've tried his answer on codepen and it didn't work for me, but I've managed to get it working by adding !important to the CSS. See below, based on the Material progress bar example with a second -- custom coloured bar -- based on Marius' solution:
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple MDL Progress Bar -->
<div id="p1" class="mdl-progress mdl-js-progress"></div>
<br></br>
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress-red"</div>
</body>
</html>
CSS
body {
padding: 20px;
background: #fafafa;
position: relative;
}
.mdl-progress-red > .bufferbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0)) !important;
}
.mdl-progress-red > .auxbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0)) !important;
}
.mdl-progress-red > .progressbar {
background-color: rgb(255,0,0) !important;
}
JS
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#p2').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
this code create four progress bar with red, orange, yellow and green color
.mdl-progress-red > .bufferbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0)) !important;
}
.mdl-progress-red > .auxbar {
background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0)) !important;
}
.mdl-progress-red > .progressbar {
background-color: rgb(255,0,0) !important;
}
.mdl-progress-orange > .bufferbar {
background-image: linear-gradient(to right, rgba(255,227,199, 0.7), rgba(255,227,199, 0.7)), linear-gradient(to right, rgb(255,145,0), rgb(255,145,0)) !important;
}
.mdl-progress-orange > .auxbar {
background-image: linear-gradient(to right, rgba(255,227,199, 0.9), rgba(255,227,199, 0.9)), linear-gradient(to right, rgb(255,145,0), rgb(255,145,0)) !important;
}
.mdl-progress-orange > .progressbar {
background-color: rgb(255,145,0) !important;
}
.mdl-progress-yellow > .bufferbar {
background-image: linear-gradient(to right, rgba(255,255,206, 0.7), rgba(255,255,206, 0.7)), linear-gradient(to right, rgb(240,220,0), rgb(240,220,0)) !important;
}
.mdl-progress-yellow > .auxbar {
background-image: linear-gradient(to right, rgba(255,255,206, 0.9), rgba(255,255,206, 0.9)), linear-gradient(to right, rgb(240,220,0), rgb(240,220,0)) !important;
}
.mdl-progress-yellow > .progressbar {
background-color: rgb(240,220,0) !important;
}
.mdl-progress-green > .bufferbar {
background-image: linear-gradient(to right, rgba(214,255,214, 0.7), rgba(214,255,214, 0.7)), linear-gradient(to right, rgb(0,153,0), rgb(0,153,0)) !important;
}
.mdl-progress-green > .auxbar {
background-image: linear-gradient(to right, rgba(214,255,214, 0.9), rgba(214,255,214, 0.9)), linear-gradient(to right, rgb(0,153,0), rgb(0,153,0)) !important;
}
.mdl-progress-green > .progressbar {
background-color: rgb(0,153,0) !important;
}
example four progress bar
<div id="p1" class="mdl-progress mdl-js-progress mdl-progress-red"></div>
<br/><br/>
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress-orange"></div>
<br/><br/>
<div id="p3" class="mdl-progress mdl-js-progress mdl-progress-yellow"></div>
<br/><br/>
<div id="p4" class="mdl-progress mdl-js-progress mdl-progress-green"></div>
<script>
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#p2').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#p4').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(44);
});
</script>
Related
I'm trying to print my svg on IE, but only half of the svg is printed, the other half is hidden no matter how much width I set for the svg in #media print. Hope someone can help!
Here is the code:
<!-- HTML -->
<div class="tree-area" ref="pageContent">
<!-- SVG generated here -->
</div>
<!-- CSS -->
svg {
background-color: #fff;
min-height: 85vh;
width: 100%;
font-size: 13px;
color: #000;
}
#media print {
.tree-area {
border: 1px solid black;
}
svg {
border: 1px solid black;
zoom: 0.75;
height: 100%;
width: 100%;
}
}
Current result:
Expected result:
I am new to bootstrap and made some stuff.
but there is a specific effect of highlight a text i can't reach. i made it wrong many times - like the BG was offset or the line had no spacing and many more problems.
Can you please explain me how to do this ?
Tenter image description herehank !
edit:
Thae image is photoshop, how the final result should look
Or you could work with a border and padding like in the following demo and this fiddle.
For the unhovered link I've added a transparent border to avoid jumping on hover. You could probably also do this with margin/padding.
.styled-link {
color: #5F6065;
font-size: 2em;
padding: 15px;
border-left: 2px solid transparent;
margin: 5px;
text-decoration: underline;
}
.styled-link:hover {
color: gray;
background-color: #D1E7FE;
font-size: 2em;
border-left: 2px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Highlighted link
Does this answer your question?
With the use of pseudo elements we can make a ::before element appear on hover
https://jsfiddle.net/jfe1uf50/
.cool-link {
color:red;
position:relative;
padding:0 15px;
&:hover {
color:blue;
&::before {
position:absolute;
left:-5px;
content:"";
height:100%;
width:3px;
background-color:blue;
}
}
}
Hello World!
I'm a newbie to html and css, and I was wondering if this is possible in pure css.
So I made 3 divs, all fitted perfectly to my screen size. What I am wondering is if you make the "Menu" fixed so it scrolls along, can you change the starting position of it?
<div class="red"></div>
<div class="blue">
<h1>Menu</h1>
</div>
<div class="green"></div>
This is the CSS that goes along with it:
.red{
background-color: red;
width: 100%;
height: 1080px;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
}
So what I basically mean is can "Menu" be fixed from when I scroll across the blue div and downwards while it's not visible yet on the red div? (so the 'starting position' of it is actually on the blue div)
Sorry if the question is poorly explained, english is not my native language. Thank you in advance.
You can just hide "Menu" on red and green divs using z-index.
CSS:
.red{
background-color: red;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
z-index:1;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
z-index:2;
}
Example: http://jsfiddle.net/3k3wyscL/
But with this solution problematically would be to add another text visible only on red or green div.
Edit: as you want to see "Menu" on green div too, you can delete green class z-index and position parameters in css.
I know you mentioned you want the solution in pure css, but if you would like to use JQuery that will be a solution.
make the menu absolute:
.persist-menu
{
position: absolute;
}
right a function to update the position of the menu
function UpdateMenuPosition() {
var el = $(".blue"),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".persist-menu", el)
if (scrollTop > offset.top) {
floatingHeader.css({top:(scrollTop)});
} else {
};
}
and call it while scrolling
$(function() {
$(window)
.scroll(UpdateMenuPosition)
.trigger("scroll");
});
Check the demo: http://jsfiddle.net/wfff74w9/4/
I'd like to have my sidebar slide out of my blog with the click of a button. I've only been able to find this for Dynamic Views but surely it can be done with the right code! My site is bhyphen.com and any help would be greatly appreciated!
It's actually quite simple.
This is how I did it in my static magazine template. You can check out a live preview of what the sidebar looks like here: http://kreatief-staticmagazinetemplate.blogspot.ch/
First you need to add a new section:
<div id='sidebar'>
x
<b:section class='sidebar' id='sidebarsection'>
</b:section>
</div><!--/sidebar-->
<a class='toggle-link' href='#sidebar'><i class='fa fa-plus fa-lg'/></a>
So we have a container and a anchor, which will toggle the sidebar.
Then register the section so that you can add widgets to it.
I do use font-awesome in the button, so place
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
within the <head> of your page.
When the button is clicked, we will toggle an active class on the menu, so for that I used a little bit of jQuery (it's best if you search for the closing body tag (</body>) and add the following directly above.
<!-- jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<!-- toggle active class -->
<script>
//<![CDATA[
$(document).ready(function(){
$(".toggle-link").click(function(){
$("#sidebar").toggleClass("active");
$(".toggle-link").toggleClass("active");
});
});
//]]>
</script>
Then just finish off with CSS.
Place that in the CSS section, above ]]></b:skin>
I did already write the variable definition for the template designer, so I'll just add it as well, put that to the other variable definitions
<Group description="Sidebar and Toggle" selector="#sidebar, .toggle-link">
<Variable name="sidebar.bg" description="Sidebar Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="sidebar.border" description="Sidebar Border Color" type="color" default="#333333" value="#333333"/>
<Variable name="box.link.color" description="Box Link Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="box.link.bg" description="Box Link Background" type="color" default="#333333" value="#333333"/>
<Variable name="box.hover.bg" description="Box Link Hover Background" type="color" default="#000000" value="#000000"/>
</Group>
If you don't want to use the variables, just replace all of the variable names with colors of your choice.
/* Sidebar
/*-------------------------------*/
#sidebar {
position: fixed;
top: 0;
bottom: 0;
width: 300px;
right: -304px;
height: 100%;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
background-color: $(sidebar.bg);
border-left: 4px solid $(sidebar.border);
z-index: 15;
overflow-y: auto;
}
.sidebar{
width: 90%;
padding: 0 5% !important;
}
.widget{
max-width: 100%;
}
.toggle-link.active,
#sidebar.active {
-webkit-transform: translate(-304px, 0px);
transform: translate(-304px, 0px);
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.toggle-link.active i{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 1s ease;
transition: 1s ease;
}
.toggle-link {
position: fixed;
top: 150px;
right: 0px;
width: 30px;
height: 30px;
background: $(box.link.bg);
text-align: center;
line-height: 30px;
padding: 5px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
z-index: 15;
color: $(box.link.color);
}
#sidebar .toggle-link {
display: none;
}
#media screen and (max-width: 350px){
#sidebar .toggle-link {
display: inline;
position: relative;
top: 0;
right: -270px;
padding: 5px 10px;
}
}
.toggle-link:hover {
background: $(box.hover.bg);
}
.toggle-link i {
-webkit-transition: 1s ease;
transition: 1s ease;
color: rgba(255, 255, 255, .8);
}
And that's it.
How to fix display:inline-block(display:inline) with float:right in ie6?
code in: http://jsfiddle.net/VGaGt/
html
<div>
text<span>>></span>
</div>
css
div{
float:left;
width: 300px;
height: 20px;
padding:5px;
background:#ccc;
}
span{
float:right;
width:20px;
height:20px;
display:inline-block;
zoom:1;
*display:inline;
cursor: pointer;
}
Your text takes on the width of the entire div in IE6, which is why span breaks the line. One option is to wrap the text in a p tag, float it to the left and control its width by setting width to 200px or something like that.
HTML
<div>
<p>text</p><span>>></span>
</div>
CSS
p {
float:left;
width:100px;
}
Here is the jsFiddle.