Goal: when someone clicks on the logo on my website it appears to be "pushed" by changing the image to a different one with a stronger inner shadow or to one that has a top padding of a few pixels.
I've been reading boards on here and trying tutorial after tutorial to get this to work yet am still having issues. Where I'm at now is going back to very simple code... no extra CSS... no javascript, but am finding that I probably will have to use one or both of those. Right now (with very basic html and no CSS or JS) I am finding that when my logo is clicked on the 2nd image appears but is BEHIND the first. The first image doesn't go away and I can only see the test image glowing behind it when clicked on (probably because I'm using 'background-image' but it's the only way I've been able to see any kind of change).
<div class="logo"><img src="images/logo.png" onmousedown="this.style.cssText='background-image: url(images/logo-click.png)'" onmouseup="this.style.cssText='background-image: url(images/logo.png)'" /></div>
CSS I can handle but my knowledge of JS is limited so if this has to involve JS please point me to a template or tutorial. I have found tons of tutorials about how to create this effect from scratch in CSS but I can't do that with my logo as it is an image.
It seems like it should be simple to show one main image, click on it to show a different one, and let go of your click to show the original with no fancy smooth transition effects. Yet... I am struggling with this.
If you want to obtain the change only when the mouse is being clicked you could use the :active element of CSS.
I haven't tested the following code but I think it should work:
a {
background-image: url(images/logo.png)
}
a:active {
background-image: url(images/click.png)
}
Related
At first, it looks simple, and at the end of scroll event, a margin (or padding) will be applied at the top.
This is useful when there is a sticky element at the top. Then when a link is clicked and scroll down to somewhere on the page, it's nice to have this element "skipped" by the scrolling.
This article explains it pretty well: https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/
I could make it work on really simple examples, and that works. However, I am trying to make this work on a normal website, and I can't. I think there is something not clear for me (or in general?) about how it works.
Please have a look here: https://meowapps.com/media-cleaner/tutorial/#Media_Library_Scan
When a link is clicked on the right, it scrolls but the scroll-padding-top is completely ignored. I have tried many techniques, moving the CSS property in many different places in the code, but that doesn't do anything.
Do you see what's wrong? Ideally, it would be great to find real the cause and maybe have an explanation why it doesn't work in this case and describes what's that case actually is.
Thanks a lot :)
scroll-margin is not useful if scroll behavior is controlled by JS
Looking at your page source, I found easy-table-of-contents WordPress plugin, which relies on smooth-scroll jQuery script. Also, I don't see scroll-behavior: smooth; in your body either (see this MDN page for reference).
It looks to me that your anchor link is not controlled by CSS but by JavaScript. And, as you'd know, when something is controlled by JavaScript, any relevant style declaration via CSS might be ignored.
What to do?
I honestly don't know. Perhaps you could replace the table of contents plugin with something that gives you a finer control. Perhaps you could refactor the said plugin yourself. In any case, should you need to keep the jQuery dependence and a particular WP plugin, you might have a tough luck for this fix.
I got your point, sorry for a long answer but I am sure this will clear your doubt with the output.
scroll-margin-top and scroll-padding-top define the amount of space to be given from within the element or from outside the element whenever a scroll event occurs.
Sometimes we see some text gets cut from the viewport such that it's half visible.
To avoid that kind of thing scroll-margin-top is helpful.
when no scroll event happens:
when scroll event happens but with scroll-padding-top:20px;
see an example from MDN Web Docs
Now applying this logic to your link example
When we click on the link it takes us to the specified div,
But when the scroll-padding-top is applied the output looks like this it gets stuck to the top of the viewport, even if we specify a certain margin with CSS the output is the same because the padding is applied from within the element:
When we apply scroll-margin-top we get the desired output on the link click event or scroll event:
a{
font-size:30px;
text-transform:capitalize;
}
#down{
scroll-margin-top:30px;
background-color:royalblue;
height:100px;
width:50%;
}
<center>
down
<section style="height:1000px;"></section>
<div id="down"></div>
<section style="height:1000px;"></section>
</center>
See Output
Correct me if I am wrong anywhere.
I am currently using a squarespace template and am wondering how to inject a code that causes a rollover state change on my logo. All I want it to do is change to the neon green color that is a part of my theme when hovering over. The link to my website is www.henrykernsart.com
I have tried looking for a solution via squarespace and no one has helped me so far.
This can be accomplished using custom css. But, because squarespace templates tend to vary quite a bit, you will probably have to do a little research to figure it out.
There are a variety of ways to inject custom css into your squarespace site. I'll illustrate 2 of them.
Affecting your entire site - In your squarespace admin dashboard, go to Design -> Custom CSS. This will open a side panel with a large text box where you can enter css code.
Affecting just a single page - Open the page you want to be affected. In the hierarchy panel of pages, hover over your page and you will see the gear icon. Click on that to open the settings panel for the entire page. Click on the Advanced tab and this will open a text box for css code.
The code you will enter will be the same in either place, with a small modification for the single page option.
You will need to know what your template calls your logo. If you are lucky, your logo image will have it's own consistent id or unique class. (Looking at your site, you aren't lucky and yours doesn't.) We can use that id or class to directly affect the image.
Let's say your image class was "Header-branding-logo" (that's what mine is). Your code will look like this:
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
That's if you are editing the css for the entire site. If you are doing page-specific editing in the advance tab you have to enclose it in <style></style>:
<style>
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
</style>
If your logo has an id instead of a class, you can do the same, but instead of the class, you will use #id:
#block-a-bunch-of-id-numbers:hover{ ... }
If you aren't lucky enough to have your logo id'd, you will need to use a combination of Attribute Selectors and Complex Selectors.
First, find a valid, constant id or class. BTW, this is an id that does not start with "yui-" or "block_yui-". Don't use ids that start with those.
On your website's template, you have a class called "logo-image". That's probably a good place to start. Starting from there you 'describe' the path to your image.
.logo-image > a > img:hover{ ... }
Inside the <div> (marked with the 'logo-image' class) is an <a> and inside the <a> is your <img>. So that's the path.
How do you get that path? The easiest way for me is in chrome, right click on the logo image and choose "Inspect". That will open the inspector from which you can examine your site's structure.
If you can't find a good class or id, you have the option of using an Attribute Selector. Find a block somewhere above your image with a unique attribute. Something like
data-content-field="site-title"
You can use that attribute as your anchor point.
[data-content-field="site-title"] > div > a > img:hover { ... }
Lots of ways to accomplish the task. It's kind of fun to figure out. (Remember, stay away from those "yui-" ids!)
What actually happens when you hover the image is it swaps out the current code/image with new code/different image. That being said, in the css you need to specify the replacement. If the logo is a static image, I would recommend creating the logo using the hover color (in this case - neon green). Then set the hover event property to swap the default logo image with the hover image.
This link may help you with the :hover event property: w3schools - CSS :hover selector
I am fairly newbie so bear with me if this seems simple to you, because it isn't simple to me!
I've bought a nice template which is providing the framework for a new food festival site I'm building. I'm new here, so they won't even let me post a screenshot, so I can't show you how I've modified the template! Dumb!
Below the main logo are several hover buttons which slide an image from right to left. I'd like to turn them into hover images which don't 'slide' but simply change on mouseover - as suggested in this article.
Can anybody point me in the right direction?
Simply add in your CSS:
ul#menu:hover li{
background-image: url('yourImageUrl');
background-repeat: no-repeat;
background-position: top center;
}
eventually using opacity to make the hover image semi-transparent, and adjusting the margin / padding according to your layout
DEMO: http://jsfiddle.net/ZSGDH/
I think that I finally know your problem, and it lies in the fact that the "mouse hover effect" that we are seeing is actually triggered by a javascript and not the CSS3 which was presumed.
And in order to get what you want, you should first disable the javascript which is overriding the css rules. and its location is "http://static.livedemo00.template-help.com/wt_39062/js/jquery.backgroundpos.js"
Once the js/ is disabled then you can easily implement your idea using the css3 trick that you linked to. You can further inquire about how to implement that, but for the time being I suppose that you'd like to do it yourself.
How can I edit the styling of these part of google +1 button? kinda hard for me to explain the detail in english. so I make this picture
I know it's located inside an iframe, some says that we couldn't edit the styles inside an iframe which sourced from other domain. but apparently, I have successfully styled my facebook like button to be looking good (transparent on the border). And also, I saw some other sites which have a nice looking google +1 button (without those blocking solid white background)
Edit: possible solution:
Looking at the markup and css on the page below it looks like somewhere in your css you must be setting the background-color of the div that the bubble is contained in to white or #fff. Try something like:-
.pls-container {background-color:transparent}
Do you have a link to this page, or a site that has a +1 button which has the same rollover so people can experiment? It would be easier to give a definite solution then...
Edit: just had a look here at the +1 buttons (at the top of the post and in the sidebar at the right) these both appear to be transparent borders - so there must be something different about your page. You could try looking at that page as an example and see where you've gone wrong, but without the code to your page it will be very difficult to give a solution to your problem directly.
What CSS property should I change at this page to disable transparency of a share iframe which appears when Like button is clicked?
When you hover on that Facebook box after clicking Like button, it becomes partially transparent and if you move your cursor away from it, it becomes solid white. I want it to be completely opaque all the time.
Well, I see no transparency on that box, only for the fade-in effect when it opens, but once it's fully opened it's not transparent.
To answer your question, you can see for yourself using firebug (firefox) or the development tools (chrome/safari) which css rules apply to what element.
From what I've seen now, you can use the use these: fb_edge_comment_widget fb_iframe_widget which are the classes of the span containing the iframe, or you can use the iframe itself.
The thing is though, is that you should not hack that. Why? Since then you'll have to always check for updates facebook are making, changes that they do not update you about (API changes they update on the blog), if you fail to be aware of these changes it can "break" your code/style.
I was also having the exact same problem.
I am using an AddThis widget set, and I don't know if this was the case for you or not (it looks like you may have chosen a different solution as I can't see the Like button on your site).
I ended up using
.addthis_button_facebook_like {
opacity:1 !important;
}
but you would use whatever selector that wrapped your like button. if using the standard embed from Facebook, it would probably be
.fb-like {
opacity:1 !important;
}
Someone else was having a similar problem with a Send button, which got me on the right track.
See it working like it ought to here. I'm sure it had something to do with some conflict from other styles, or possibly AddThis, but it's working now!