I would like to replace this image when I scroll down on another image.
Firstly, the menu looks like:
And when I scroll little bit down menu looks like:
Is it possible to replace using custom.css this item in menu? I just want to replace this picture on another picture. Is it possible to do by using only custom.css or do I need to have acces to files and use here java script?
When it's possible can somene just tell how?
Link to my site : http://test.projekt-tenis.pl/wordpress/
Give this a whirl:
.is-sticky img.menu-image-title-hide {
background: url(http://www.spiritvoyage.com/blog/wp-content/uploads/Screen-shot-2011-12-06-at-2.56.08-PM-150x150.png) no-repeat;
width: 150px;
height: 150px;
padding-left: 150px;
}
Should do the trick. It moves the original src image out of the way and adds a background image. As far as your user is concerned it'll just look like it flips from one image to the other.
It works because the class .is-sticky is added to the header on scroll by js.
Related
I'm using a plugin to display vote buttons on my wordpress install.
Plugin loads the css from an external source (plugin owner site).
Since I can't touch that css I'm using custom.css to change the positioning of button.
The problem is that while it loads, for 1-2 seconds, the element that contains the button is displayed distorted. Since I have 25 such elements per page, it looks aweful until the buttons load and my css takes effect.
You can see it in action here: http://theroadmap.co/generation/
Here is my custom css for the button (also if you inspect element on my site):
.likebtn-wrapper.lb-loaded.lb-style-heartcross.lb-popup-position-top.lb-popup-style-light
position: absolute;
text-align: right;
top: -3px;
right: 0;
width: 10%;
I was wondering what would be the easiest way to fix this? I was thinking of doing display:none or visbility:hidden until the user hovers, but it doesn't seem to solve the problem. I tried using a lazyload for the image, but it's the element that's causing the visual distortion not the image.
Thanks!
Try adding following code to your CSS:
.tooltip { height: 24px; }
Edit: You'll just need to set height of list items (i.e. class tooltip).
Basically, it will create the structure while CSS gets fetched from likebtn.com
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}
I implemented a simple tab navigation by using <ul><li><a> , the problem is that there are several "layers" on each tab still needed. what I mean is, In my current implementation I have:
-tab text which is <a>text</a>
-on each tab I have a tab icon image, which I put on <li> as background-image of <li>,
But I still need:
-tab seperator image (A vertical bar image) which I intend to put on <a>,and position it on the left side background-position: left , it is working but this implementation is not in my code which I showed below on jsfiddle site because I did not find a suitable image on internet
-tab background image which occupy the whole tab, I have no idea where I should put this image?
Please check & run my implementation here on jsfiddle, in the css code, I used background-color instead of background-image just to express what I want to achieve, but I need to use background-image as the tab background.
What I tried:
I tried to put the tab background image on <li> but it will hide the
icon image which has already on <li>,
I tried to put the tab background image on <a> but it will also hide the tab seperator image when mouse hover
How to get rid of this layer probelm on tab implementation then? (Please do not suggest me to use less image, since it is one requirement of this app to use those images.)
(By the way, all images I mentioned have mouse "hover" counterpart)
If you don't want to change the HTML, you can use pseudo-elements:
Fiddle: http://jsfiddle.net/Pq7LC/39/
li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}
You can do it with css, no need of images.
http://jsfiddle.net/Pq7LC/40/
Hope it helped you :)
I want my html link to look like a real submit button. Any good codes with css? I have found some examples, but I want it to be more real than just a grey box.
Make a button image in your favourite image precessing tool and use these codes:
HTML
CSS:
.link_button
{
background-image: url(path/to/button_image.png);
background-position: 0 0;
background-repeat: no-repeat;
display: block;
width: 79px; /*your image width*/
height: 35px: /*your image height*/
}
That should set up your link to look like a nicely styled button, that you created.
If you don't want to use an image, you can use normal CSS borders and baackground colors/gradients as well.
Regarding the this is so no text is shown on the image itself, another way to do this is with css: text-indet: -9999px; or you can use the text as part of the element like normal and just style the background :)
Do you mean you'd like to create links that look like buttons, but a bit nicer than the standard old grey box?
There are tons of tutorials out there for this: just search "css buttons". A good one is this: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
If your widget toolkit's theme does some snazzy theming (most do), you most likely won't be able to reproduce the button's look. Even if you could, it would only emulate your computer's theme.
Of course, if you don't mind your button not being consistent with normal buttons, there are many tutorials that allow you to create nice CSS buttons.
If you could consider actually using a button rather than a link, that'd probably be even better.
I am using toggleClass and slideToggle to accomplish the following:
when the user selects a link, it will slide down the div, then it will set the link as open, displaying the appropriate background image, this is just a simple, (+) and (-) to open and close the div.
What I am having trouble with, is displaying the background-image to the right of the link, giving it about 5-10px of margin-left, to give it some spacing.
Here is a screen shot of what it is doing: Closed (displaying (+) sign): http://cl.ly/4634afa1e7aa4fe10072
Open (displaying (-) sign): http://cl.ly/8bc59ab07da46a173d62
HTML for link: Mapping Our Future: Strategic Plan 2010-2015
CSS for when it displays the link untouched, and after it is selected:
// link is not open
.our-future-intro-slide {
background: url('/images/uploads/images/plus_sign.png') no-repeat 120% 0%;
}
// link is open
.our-future-intro-slide-open {
background: url('/images/uploads/images/plus-icon.png') no-repeat 120% 0%;
}
Here is the jQuery, I figure I'll throw that in, it works, just the css for making the background-image show up to the right of the text.
$(document).ready(function() {
$('.our-future-intro-slide').click(function() {
$(this).toggleClass("our-future-intro-slide-open");
$(".our-future-intro").slideToggle(100);
});
});
Try this:
.our-future-intro-slide {
background: url('/images/uploads/images/plus_sign.png') no-repeat top right;
padding-right: 30px; /* or whatever the width of the background image is */
}
And, of course, the same modifications for the other rule.
I don't know if I understand totally, but have you tried using :after? Something like
.link:after{background:#FFF;}
I think you will be interested in this post - Pure CSS "Popups".
UPDATE: that's another way to align images on links hover.