I am being unable to bring the changes made in inspect element to the main theme in WordPress. I want to make the overlay color transparent and have changed the code to
/* THE OVERLAY COLORS WHICH WILL SHOW IN FRONT OF BACKGROUND IMAGES*/
.overlay-layer-wrap {
background: transparent
}
.overlay-layer-2 {
background: transparent;
}
but it's not taking. help!
Your css uses cache, to refresh it, ether add version to it, or use shift + f5 to refresh the chashe as well.
To include version of style, you gotto style.css?v=01 this will refresh width version.
If that doesnt work, that means you are giving css to wrong element, or assigning element to wrong css. Eather way, you can hardcode it in your div using style='yourstyle' this will take priority than css, so if you have style html tag with bg color and css with bg color, it will take priority.
Related
I'm using dir-pagination found here.
This utilizes bootstrap styling. I can change the rest of the styles for the pagination controls, but I can't force the hover effect to have no color.
I can ensure that it has a color, by specifying one, but if I try to override it in a way that will force it to not have a color such as transparent, it defaults to the white color. My specificity is exactly the same as in the bootstrap css... but even if I remove the style in the bootstrap css is still defaults to white.
Been researching this for hours.
EDIT: See the following plunkr for an example of my problem.
http://plnkr.co/edit/2OvXNgX81NspuO9g356J?p=preview
twilliams Hi there.
Is this what you are trying to do?
Add this to your css.
.pagination li a:hover {
background-color: rgba(255,128,128,.5);
}
This will change the pagination background transparent color when each one is hovered.
Have a look at this Plunker.
I just realized my mistake and I feel foolish. I was making the assumption I had another element below with the color I wanted, and I was simply changing the color of an overlay element.
Turns out I didn't have that other element below, and so it really was just pulling the white of the monitor. I was a little clouded by the complexity of my current project that I didn't see it like I did with the simplicity of the plunkr example I made.
I have a page with a yellow background. Now I add an Iframe to it including a different page on the same domain which has a white background. When I look at my Iframe now it has taken the background color of the yellow page! What I want is the Iframe to simply show exactly the other page, just like a window without changing any colors or anything.
What do I have to do to achieve this?
My code: <iframe src="http://www.example.com/page.php"></iframe>
Browsers other than Internet Explorer give iFrames a transparent background if the pages contained within them have no explicit background settings.
In order to overcome that, simply set the background color of the iFrame to white (which is the default background color).
iframe
{
background-color: white;
}
If the page indeed sets a background color (now or in the future), this code would simply not have any visible effects.
I'm working with the Shape5.com Corporate Response Joomla template and been asked to make a change to the color of the four icons for social media in the upper right-hand corner. The demo of this template can be found here:
http://www.shape5.com/demo/corporate_response/
Their CSS for each icon looks like this from the template.css file. I'm just including the first icon to keep this brief, which is for RSS:
#s5_rss {
height:23px;
width:22px;
background:url(../images/rss.png) no-repeat top left;
cursor:pointer;
margin-left:8px;
float:right;
}
#s5_rss:hover {
background:url(../images/rss.png) no-repeat bottom left;
}
The rss.png is here:
http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png
I've been asked to use CSS to change the active/hover color from what it is now to red. I'm not sure if this can be done with CSS or not. Can it? Or does this require a new .png file created with the image by the designer to be the desired red color?
I'd also like to understand why this rss.png file has two images of the icon inside of it at different shades and how does the CSS toggle between them to know which to use for hover? Is this a special .png file that allows this, perhaps in a different format than most .png files? Thanks!
The image is known as a sprite image: a single image file consisting of multiple sprites which you apply as a single background image, and position according to the constraints set by the width and height properties on an element. It's just a regular PNG image and is not intrinsically different from other PNG images.
As for actually changing the color of the image to red, that is not something you can do with CSS alone depending on what you mean by "changing the color" — the safest bet is to modify the image to add a new sprite with the desired color. Since it's just a regular PNG image it's a simple matter of extending the canvas another 23 pixels down, rendering the new sprite in the extra space that's created, and modifying your CSS so it looks like this:
#s5_rss:hover {
background:url(../images/rss.png) no-repeat center left;
}
#s5_rss:active {
background:url(../images/rss.png) no-repeat bottom left;
}
You can also replace the background:url(../images/rss.png) no-repeat portion with background-position: in your :hover and :active rules as you're really only modifying the background position when using a sprite in CSS:
#s5_rss:hover {
background-position:center left;
}
#s5_rss:active {
background-position:bottom left;
}
Experimental CSS filters are up around the horizon, but without good cross-browser support, you're basically out of luck on that front. If you can handle reduced browser support, go take a look at this overview of CSS filters.
Your current code shows only half the rss.png which conveniently is the exact height of just one of the sub-images within it. When you declare the background: you're telling it to stick the image from the top and hide the bottom half.
On hover, you're instructing it to draw just the bottom half of the image (the hovered state part). To make it a different color, you pretty much need to edit the file (short of having the background image partially transparent and showing a red background through it).
Overall, there's nothing magical going on, just well-documented magic that we all share and use every day.
Currently there is no way to change the colours within an image using css and likely there will either never be or a long way off. There is the potential to do a color overlay but this would not help unless the image you were dealing with was a block colour.
In order to change the color you will need a separate image to reference on the hover styling rule for that element.
The alternative way to do this is to use a sprite, where all the images are loaded as one image and css just focuses on a portion of it depending on the state ie hover, active etc. This is what you mentioned earlier. Have a look at the following links for information on using a sprite, but put simply if you have a 40*40px social icon. You would create a 40*80 image and then in css say use the top half for normal and the bottom for hover. This actually saves time when loading your page and you should always try and use sprites where ever possible, remember the faster the page the better for the user.
http://css-tricks.com/css-sprites/ (good guide on sprites)
http://spriteme.org/ (very handy and will do the work for you - recommended)
OK, sorry...this is kind of a basic CSS question but it's driving me crazy. I'm self-taught so I'm sure I am just missing something simple.
Site: http://notes.benadelt.com
The logo image sprite is just a home link...I'm trying to remove that background color that you can see is ruining the transparency of the image:
<a class="ben-logo" href="/"></a>
You can see that CSS gives any links in that section a light background-color, which is being applied to the image sprite as well. I'm trying to remove that background color from my image, but not from the body links, and cannot figure it out. Using dev tools I can only impact the style using:
header .words a { background: none; }
But that obviously removes the background from ALL links, so it also removes my image background in the sprite.
Figured there would be something I could add after the background URL to do this, such as:
background: url(http://www.benadelt.com/notes/wp-content/uploads/2013/04/Ben-Logo-Sprite.svg) none;
When you hover, it looks like I want it to look normally without that darn background-color.
Any help would be appreciated!
Ben
header .words a.ben-logo { background-color: transparent; }
The above code will target only the logo link. By setting the background colour to transparent, you leave the image itself (and all the other background properties!) intact.
Edit: One thing - I believe you already have transparent set on that background image by virtue of not specifying a colour (transparent is the default). What is probably happening in your case is that the a.ben-logo declaration comes before the .words a declaration in your stylesheet, so it's being overridden. The reason the above code should fix it is because the extra class names add more specificity. Here is Andy Clarke's specificity cheat sheet for you to peruse: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
I am using the asp.menu conrol of asp.net 3.5. I want the sub menu to be completely transperant, with no background at all and only text being displayed. Is it possible?
I tried to make the background transperant in css for primaryDynamicMenuItem and primaryDynamicMenu class but it is displaying white back ground in IE8.
I also tried applying opacity like
filter: alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Chroma(Color='#FFFFFF');
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
Also when I check the source at browser
.ctl00_Menu_0 { *background-color:white;*visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_Menu_1 { text-decoration:none; }...
Here background color is set to white by .NET, how to remove this and make this transparent
How to remove white back ground and make asp.menu fully transperant.
Several aspects:
Are you sure this IE8 and not IE6 ? check this out - basically for IE6 filter needs to be _filter .
Another point is the z-index... often the problem is in the z-index... i.e. set the z-index of the menu to a high value and that of the content to a low value...
After trying every thing, I had to go for CSSAdapters for the menu, for it to work in all browsers.