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.
Related
I have inserted an image in the background in my drupal 7 portal. And the css for it is ...
code :
* {
box-sizing: border-box;
text-align: center;
background-image:
url
('https://xx.xxx.xx.xxx/devuser/sites/all/BackgroundWallpapersforPortal/blue
image.jpg') !important;
background-color:none;
}
However, with this my image looks like this -
I don't want my background image to overlap the blocks. I have visited few websites, their background image doesn't overlap every new statement / every new entity. it stays embed to background. Please help.
I want to Achieve this - where the blocks are also visible and there is a background image also.
You need to set the background only to the specific elements you want it on, not everything. For example have a class for your menu items called "navigation" and set the CSS like this:
.navigation{
background-image: url('https://xx.xxx.xx.xxx/devuser/sites/all/BackgroundWallpapersforPortal/blue
image.jpg') !important;
}
I've been trying to figure out for hours where the border from the sidebar is coming from in this site: http://sökoptimering.se/
Here's a screenshot of what I'm trying to look for: http://imgur.com/VY9QplF
It's this
#entries-area {
background: url(images/content-main-bg.png) repeat-y top right;
}
and
#entries-area-content {
background: url(images/content-area-topbg.jpg) no-repeat top right;
}
you can filter properties by 'background' and just check elements with keybord arrows one-by-one. be careful some of them have duplicated rules - so when you disable one, the second is still showing the image
background you're looking for is set for this elements
#entries-area-content
#entries-area
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;
I am trying to create a hover over image from a single split PNG
How do I enable it so when the image is not hovered over, the top image will view, but when they hover over, the bottom one will show.
The technique you are asking for is called "CSS-Sprites". Here's a tutorial
It uses the background-position style. For the default state of your element, just set the image as background. Note that you need a fixed height (half the height of your sprite) to hide the second part of the image. You also need a width, because your button will contain no content, just a background. For the hover state, use a negative background-position:
.button-foo{
display: block;
height: 29px;
width: 110px;
background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent;
}
.button-foo:hover{
background-position: 0 -29px;
}
This means the image is moved up so the top icon in there is above the visible area of your button.
Try to make sprites there is many applications out there. Google Css sprites generator.
Or try this one its free http://csssprites.com. Then its just simple css or jquery if u want any effects.
I'm trying to figure out how I can adjust the css in my register.php page so that the gradient will fill the entire area like it does on my login page.
http://www.kansasoutlawwrestling.com/kowmanager/register
http://www.kansasoutlawwrestling.com/kowmanager/login
If you want to use the same background gradient image for both the login & register forms you can modify your CSS rule to position the gradient at the top of the registration box and apply a background color #E7E7E7 so that the bottom of the gradient fades into a solid color. Like this:
.register-style {
background: #E7E7E7 url("../images/login.jpg") no-repeat scroll center top;
}
Alternatively, you can create a taller version of the gradient image and use that in your .register-style class.
The simple answer is "make the gradient image a bit taller".
Alternatively, you can use CSS3 gradients.
http://www.colorzilla.com/gradient-editor/ will generate cross-browser CSS that works in "all browsers".
If you want to cover just the case you have on register.php, try to add these styles:
.register-style {
background-position: top;
}
.register-inside {
height: 276px;
}
.register-data {
padding: 20px 10px 20px 30px;
}
Doing so you'd position the gradient to top, make the block a little smaller so the gradient would fit and make the paddings of the lighter box a little smaller, so it would look better.
Also, if you have control over the register.php HTML, add class="text" to the inputs: they'd gain the same style the inputs on login page have.