i have this css class
.site-title .logoimage {
background: url(~/Images/orderedList0.png) center right;
color:red;
display: block;
height: 84px;
width: 264px;
}
it is working and the prove is the color red, if i change it to green, the test becomes green and so on.
but i can't add the background of the image, i dont konw why.
the image is in the Images folder.
~/Images/orderedList0.png is not a valid URL. the tilde ~ is an Asp.Net construct that represents the site "root". It is not a concept which is "understandable" by your browser when parsing the CSS.
Try /Images/orderedList0.png
You need to change the URL in background: url(~/Images/orderedList0.png) center right;
Related
I work on PrimeFaces and I am trying to edit css properties of components. while working on growl, I am trying to change closing icon color but I just can't. I tried a lot and a lot and still couldn't figure out.
You can see at the top-right corner, Its background color yellow which I set it that but I cant change icon color. Its always that blue. Here are my codes about growl;
.ui-growl{
position:fixed;
top:20%;
left:38%;
width: 23%;
}
.ui-growl .ui-state-highlight{
background: #d2524f;
border: #d2524f;
}
.ui-growl-message{
float: left;
font-size: 15px;
margin: 2% 0 0 22%;
}
.ui-growl .ui-growl-icon-close{
background-color:yellow;
}
The closing icon is drawn with background-image attribute via the following CSS selector:
.ui-state-highlight .ui-icon {
background-image: url("/showcase/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-omega");
}
Changing the color attribute will have no effect. To change the icon color you have to modify the image url. This answer gives some hints on that topic.
Tested with PrimeFaces ShowCase.
I would like to change the home icon of the Primefaces Breadcrumb with another icon but I can't find how.
I tried with CSS but it is not working for the icon:
.ui-breadcrumb {
background: none !important;
border: none !important;
icon: url('resources/images/look/bandeau.png')
}
It should be enough with:
.ui-breadcrumb .ui-icon-home {
background-image: url("#{resource['images/look/bandeau.png']}");
background-position: 0; /* asuming bandeau.png is a single image */
}
But you have to make sure two things:
First, that you are overriding primefaces css correctly, you shouldn't need !important. See this. If you are doing it right, at least you will see that the default image dissapear.
Second, you have to make sure that you are referring to the image correctly. In my code, I show how I do it myself, but it depends on your configuration so you should also check this.
Try to target that specific icon by doing so:
.ui-breadcrumb ul li .ui-menuitem-link.ui-home {
background: none !important;
border: none !important;
background-image: url('resources/images/look/bandeau.png') !important;
}
Also check if the background image hyperlink is correct.
So currently, I have two styles.
.wrapper-style1
{
background-image:url(../images/river.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
color: #eee;
color: rgba(255,255,255,0.75);
}
.wrapper-style1 .title
{
background-image:url(../images/river.jpg);
color: #fff;
}
My problem is for some reason the colours don't seem to match within the background.
The wrapper-style1 is fine, but wrapper-style1 .title seems to be darker =S
Any advice?
Site is: www.s1magazine.co.uk
The 'ABOUT S1' background should be same colour as the background below it.
I made a screenshot and copied the part from about s1 and copied it above the other part. And it is exactly the same image. So you need to adjust the background position
background-position: top center;
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}