I found some icons on Flaticon.com to use them in the navigation menu of my blog. In this case I wanted to replace the text "Home" with a house icon using the Base64 code.
This is the current code that was used on my site:
.menu-item-36 {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNC…ToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYII5467651096249186f76b4680bd54615d');
margin-left: 10px;
height: 40px;
}
I changed background-image to content in order to hide the original text 'Home' and replace it with the icon.
Now the problem: When I use the code above, the icon has a black color. I would like to use a white color instead. When I set the class to color: #fff; or fill: #fff; it doesn't work.
How can I this issue?
To hide the text, you should not change the background css property to content. I don't know iff you should even use content for anything else then the ::before and ::after psuedo elements.
But for your questions:
To hide text, you should use one of the possibilities given in this answer:
https://stackoverflow.com/a/471538/2012433
To make your image white, there is a hacky solution, namely using this css:
-webkit-filter: invert(100%);
filter: invert(100%);
But better would be to download the image and edit it to white. Then get the base64 code at for example http://www.base64-image.de/
Finally when you set that image as background-image, the following css will fit it nicely in your menu:
background-size: contain;
background-position: center;
Related
I am trying to add background-image to mat-dialog, by spending some time on mat-dialog docs I realised that I can use panelClass: 'my-class', to customize mat-dialog appearance, here my-class end up getting applied to div having class cdk-overlay-pane in mat-dialog, something like this.
Then I added this css to put the background-image in the matt-dialog.
.my-class .mat-dialog-container {
background: url("assets/illustrations/abc.svg") no-repeat;
padding-bottom: 16px !important;
}
.my-class {
// background: white !important;
border-radius: 10px;
}
eventually mat-dialog ended up looking like this, having transparent background.
In order to solve this issue I ended up adding background: white; to my-class and then it looked like this.
Everything seems to work fine, but it is now bit-buggy as soon as I close the dialog a white background of the same size is theres for milliseconds and then it disappears.
I managed to solve the problem by changing the way I was doing it, sometimes it's easier to change the approach instead of trying to find the solution of situation that you are struck on.
what I did is as follows.
In the attached image div having class='content represents the content of the dialog-box, so it's basically a div that we place as a wrapper on the content we want to display in mat-dialog, in my case I named it content.
So I modified the .mat-dialog-container padding to 0, so that content div can take the full height and width, and then added background-image to content div.
.my-class .mat-dialog-container {
padding: 0px !important;
}
Final outcome can be seen in the below-mentioned image.
Really new to CSS here...
I'm trying to resize with CSS the background image to fit the header.
So far I've tried wrapping the image itself with a div class to try to manipulate it... to no avail!
HTML:
{block:ShowHeaderImage}<div class="header-image"><img src="{HeaderImage}" alt=""></div>{/block:ShowHeaderImage}
CSS:
.header-image {
position: absolute;
background-size: contain;
background-position: -1;
opacity: .05;
background-image: url({HeaderImage});
}
There are other elements in the header, hence the background-position.
I've successfully gotten it to resize by putting the background image in the parent class -- however then the header image is not toggleable via the {block:ShowHeaderImage} function, nor can I change the opacity of JUST the background image as far as I know.
I'm probably making a few mistakes here but the end goal is to have it resizeable and toggling using Tumblr's syntax.
Custom Images
You can check if a custom image has been uploaded, using an if operator:
{block:IfHeaderImage}<div class="header-image"><img src="{HeaderImage}" alt=""></div>{/block:IfHeaderImage}
Custom Text
You can use custom text to provide a value for the opacity:
<meta name="text:Header Opacity" content="0.5"/>
.header-image {
opacity: {text:Header Opacity};
background-image: url({HeaderImage});
}
References
Theme Options - https://www.tumblr.com/docs/en/custom_themes#theme-options
As I understand it, CSS can be used to change the content of an element on :hover in a basic way. I am using this code
HTML:
<button><span>3 replies</span></button>
CSS:
button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}
but when I hover over the button, it twitches very badly
I want mine to be smooth like the music player at this link
When you hover over one of the buttons under lease, premium, or trackout price, they switch over to the +add text
here is part of my player http://djwckd.com/test
The important thing is to make sure that your layout does not change on hover. The easiest way to achieve this would be to allocate some space in your layout for all of the parts even when not hovering. I'm not sure what sort of layout you are trying to achieve but here is an example:
button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}
By giving the :before pseudo-element a size even when it's not hovered the layout shouldn't change when the content changes. You may need to adjust this for the specific layout you want but the general principle is to make sure all of the size-related properties are specified without :hover and then only adjust non-layout properties (that is, properties that don't affect any box sizes) in the :hover state.
As you provided the link is hovering the background images but in your test link you have given background images before to <a> elements, if you want exactly same as link use background-image: url('image1'); to a and background-image: url('image2'); to a:hover.
You can still use positioning the background-images, for this you should have like this.
+--------------+
| | position this background to a
+--------------+
| + Add | position this background to a:hover
+--------------+
Ok! for this make your background 64px width and 32 px height.
then position your background to
a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}
now position your background to
a:hover{background-position: 0% 0%;}
I think I have a solution. The trick was one main thing: setting the width of the text's container. I also used onmouseenter instead of onmouseover for faster text change (my theory that onmouseenter is faster then onmouseover). Here is an example:
var videoplayer = {
text: "<b>Hello World</b>",
author: "(you)"
}
<div onmouseenter="this.innerHTML = videoplayer.text;" onmouseleave="this.innerHTML = '<b>(hover over me)</b>';" style="background-color: red; padding: 10px; width: 110px; text-align: center; color: white;">(hover over me)</div>
Just make sure you set the div's width to the width you need. (If you don't want a background, just change the part that says background-color: red to background-color: transparent). One more thing: you have to use a div or other container with display:block set as its default. I suggest using div. Hope this helps!
I'm adding icon with Twitter Bootstrap without problem. They have a lot of alternatives.
http://twitter.github.com/bootstrap/base-css.html#icons
However, I couldn't find appropriate icon for one of menu item. It is about "car".
What I want is I would like to add my custom icon. How can I do this?
You can create your own icon by defining it in your own class like s:
.icon-car {
background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
background-position: center center;
}
Keeping in mind of course to use the prefix .icon-* since it is targetted by an attribute selector set by the bootstrap to apply all styles (widh/height/line-height etc...).
Just try to keep to the same width and height as the original icons (14x14), this way you won't have to define your own width and height and it won't mess with the line-height of your elements. Here is a demo with such a case: http://jsfiddle.net/RwFeu/
Here's what we do, so that all the icons are in a single sprite file and you can allow arbitrary sized icons.
create a CSS file like
[class^="icon-custom-"],
[class*=" icon-custom-"] {
background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8");
}
.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px; }
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px }
And then in your markup,
<i class="icon-search"></i> a standard bootstrap icon
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file.
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon
<!-- spritefile from www.10000ft.com. not for reuse, please -->
Note that this assumes a single sprites file that contains all the icons. If you have multiple sprite files, the background-image needs to be set for each icon, accordingly.
JSFiddle at http://jsfiddle.net/shyamh/cvHdt/
This solution is based on the example posted by Kevin
I am having a problem in this page:
xxx/printers/monochrome-laser-printers.html
I see the left column layered navigation is the red I want, but at the bottom some part is pink.
I changed a css class but it didnt change everything. I am not a very expert when detecting what css class I need to change.
I also need to change the Add to Cart button from pink background to the same red.
Any idea?
The bottom part is pink because you're referencing this file as your background: http://www.theprinterdepot.net/skin/frontend/default/MAG060062/images/bot3.jpg
.block-layered-nav .block-content {
background: url(../images/bot3.jpg) no-repeat bottom center;
background-color: #C9271F;
}
And your Add Cart button does the same:
button.button span {
background: transparent url(../images/bkg_btn.png) 0 0 no-repeat;
}
So you need to change your background images.
Use F12 in your browser to see the CSS rules applied to those elements. That should make it all clear.