toastr js plugin and css color change - css

I am using the toastr js plugin - toastr - and have made a css color change, however, I do not know how to go about creating the correct png/base64 part?
Original :
.toast-info {
background-color: #2f96b4;
}
#toast-container > .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
I have changed this color to :
.toast-info {
background-color: #3276b1;
}
I actually contacted the github location awhile back and never got a response other than contact SO haha. For sake of having things correct I would like to make sure the base64 part corresponds to the new color.
EDIT - further info :
In response to the answer below. I believe you are incorrect. Correct me if I am wrong, but the background-image is basically a backup so it shows correctly in all browsers and does indeed reflect the color. Based on your comments... if that were true then this background image would not be needed at all and, if anything, would be the same for each color. As you can see this is not the case.
Here is the full css including my added info2 with the new color. So, basically the question holds. How can I create the correct base64 background image with my new color?
#toast-container > .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-info2 {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
.toast {
background-color: #030303;
}
.toast-info {
background-color: #3276b1;
}
.toast-info2 {
background-color: #2f96b4;
}
.toast-error {
background-color: #bd362f;
}
.toast-success {
background-color: #51a351;
}
.toast-warning {
background-color: #f89406;
}

I use custom toast with this css and javascript
toastr.success("text", "title", {"iconClass": 'customer-info'});
css:
/* icon */
#toast-container > .customer-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
background-color: dodgerblue;
}

The background image is not the background color. If you want to change the color, you already have it with background-color. If you want to change the background image, then you can set the url or base64. If you want an easy way to convert to base64,
use Visual Studio
install Web Essentials plug in
set the url to the file
right click on the url and Web Essentials menu will let you convert to base64

Related

CSS Changing Logo Hover Color

I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}

Does wkhtmltopdf respect css font color?

I'm using wkhtmltopdf to generate a pdf of a page but it doesn't display any of the fonts in the correct colour, they all are presented black.
The colour is defined as you'd expect:
.panel-dashboard p.stat {
color: #bed000;
}
and displays correctly when viewed in the browser.
I'm calling it as
wkhtmltopdf path/to/page filename
Does wkhtmltopdf just not render font colours correctly? I've not been able to find any issues relating to this.
Appears this was a problem with wkhtmltopdf 0.9.9, 0.11 renders css font colors correctly.
Using version 0.12.2.4 specifying a white font inside the CSS (inside a grey background) worked, but a colored font (red, orange) did not:
.header { background-color: #888; color: #fff; } /* works */
.orange { color: f80; } /* doesn't work in wkhtmltopdf */
Using a style directly on the div did work:
<div style="color:#f60;">My Orange Text</div>
It may be because there is no background?? I don't know.
So if you try CSS and it fails this may work...
You are probably using this proposed CSS which has defined #media print { * { color: black !important; } }
Using version 0.12.6 here. Results look like following:
[pandoc.css] #media print { * { color: black !important; } }
[my.css] TODO2 { color: #700 !important; }
TODO3 { color: #700; }
[file.md] <TODO1 style="color: #700 !important;">black</TODO1>
<TODO1 style="color: #700;"> black</TODO1>
<TODO2> red</TODO2>
<TODO3> black</TODO3>
and
[pandoc.css] #media print { * { color: black; /* not important */ } }
/* or not using proposed pandoc.css at all */
[my.css] TODO2 { color: #700 !important; }
TODO3 { color: #700; }
[file.md] <TODO1 style="color: #700 !important;">red</TODO1>
<TODO1 style="color: #700;"> red</TODO1>
<TODO2> red</TODO2>
<TODO3> red</TODO3>

LESS Mixin: SVG Background & fallback

I'm trying to create a LESS mixin into which I can pass a text string to be used to construct an svg file name and a png file name.
My first attempt is below. Perhaps you can see what I'm trying to do.
.make-bg-svg(#name){
#svg: ~"../images/#{name}.svg";
#png: ~"../images/#{name}.png";
height: 200px;
background: transparent url(~"#{svg}");
.no-svg & {
background: transparent url(~"#{png}") no-repeat;
}
}
// usage
.out-of-business {
.make-bg-svg('out-of-business');
}
Any help would be appreciated.
Updated
I just figured it out and updated the example above.
Just in case you don't need that many quotes, the following is equal:
.make-bg-svg(#name) {
#svg: ~"../images/#{name}.svg";
#png: ~"../images/#{name}.png";
height: 200px;
background: transparent url(#svg);
.no-svg & {
background: transparent url(#png) no-repeat;
}
}
// usage
.out-of-business {
.make-bg-svg(out-of-business);
}

Custom Facebook CSS (Stylish)

I'm creating a custom style for Facebook with the Firefox plugin Stylish. I'm trying to get the top blue bar flat, but I cannot. I use the CSS code:
#blueBar {
background-color: transparent !important;
}
But it has no affect on it. Why is this?
#BrockAdams - I tried that, still nothing so I just used:
#blueBar {
background-image: url("http://i.imgur.com/vUnrU8x.png") !important;
}
Try to use change id #blueBarHolder background. like:
.hasSmurfbar #blueBarHolder, .hasSmurfbar #blueBarHolder.slim,
.hasSmurfbar #blueBarHolder #pageHead,
.hasSmurfbar #blueBarHolder #headNav,
.hasSmurfbar #blueBarHolder #blueBar {
background: transparent !important;
}
Hope it will works.

Way to reference icon in Compass Sprite without including magic selectors

This is in particular reference to the Compass spriting framework
Following the documentation here http://compass-style.org/help/tutorials/spriting/#magic-selectors
I have used this method so that this:
selectors/ten-by-ten.png
selectors/ten-by-ten_hover.png
.edit {
#include selectors-sprite(ten-by-ten);
}
generates:
.selectors-sprite, .edit {
background: url('/selectors-sedfef809e2.png') no-repeat;
}
.edit {
background-position: 0 0;
}
.edit:hover, .edit.ten-by-ten_hover, .edit.ten-by-ten-hover {
background-position: 0 -20px;
}
which is really great. However, I was wondering If/How in another instance I could include the "ten-by-ten.png" image from the sprite without including the magically attached hover state?
i.e.
I want this:
.view {
background: url('selectors/ten-by-ten.png') no-repeat;
}
Where hovering over this icon does not trigger the :hover state (ten-by-ten_hover.png).
But I was wondering if there was a way to achieve this still referencing the sprited image?
Thanks for any help/advice.
You can add sprites directly to an element using the #extend directive. The syntax is #extend .folder prefix - sprite name - state (ie, .selectors-sprite-name_hover):
.view {
#extend .selectors-ten-by-ten
}
&:hover {
#extend .selectors-ten-by-ten_hover
}
&:active {
#extend .selectors-ten-by-ten_active
}
.selectors-ten-by-ten_hover, .selectors-ten-by-ten_active, etc returned class not found errors for me in Compass.
This worked however:
.viewHover { #extend .selectors-ten-by-ten:hover; }
.viewActive { #extend .selectors-ten-by-ten:active; }

Resources