I'm using the LinkedIn Profile widget on my site and am using the popup version. Although it's functional, I don't like the little LinkedIn icon that's placed as I'm already using a larger LinkedIn icon. Is it possible to hide the smaller one? (I assume it's built into the class, but there may be an option somewhere?) If not, is it possible to overlap a hyperlink so that I can essentially hide the smaller icon behind the larger icon, but ensure the smaller one gets clicked if the large one is clicked on? (Hope that make sense :) )
try adding a style="background-image:none;" to your link.
Related
I'm wondering how to replace my social media icons with my own custom images. For example instead of using the typical Facebook Like button or Twitter follow button I would replace it with my own image, while keeping the same functionality.
Websites like BuzzFeed and SuperCompressor are good examples that it can be done. Each has replaced the Facebook Like button with a custom image but the functionality remains the same.
I'm having a hard time finding any information one the web. Can anyone guide me in the right direction?
As the place you will find this image may depend on the plugins and themes you use, you have to find out where the actual image comes from.
To do so, I would suggest that you install a browser such as Chrome that allows you to inspect an element on your page (will open the portion of code displaying the selected item). Once you see where the image comes from, you can either replace the actual image with a custom one if it's on your website's server, or search your website files for this image's URL and replace it with a link to the image of your choice.
I think something like
this http://www.inboundnow.com/apps/facebook-like-button-generator/
might work but the google search for
custom facebook like button for website
has a lot of results
EDIT: Well if you already know how to make a custom image you can follow
https://stackoverflow.com/questions/9493988/how-to-trigger-facebook-like-button-from-custom-button
to make your custom image into a facebook like button
`http://jsfiddle.net/masondesu/haxvL/`
This site also has some info
The client doesn't want the photo to be downloaded if it is right clicked on. I explained if someone wants the photo they can get it off the site but he wants to make it a bit more difficult for a novice user to download the image. Hence if you right click you will get the blank 'photo' instead of the actual photo underneath.
Use logic:
Put the image you want to protect as a background image in a <div> or other block level element
Put an <img> that is transparent over that image in the <div>. Make sure it covers the entire image/div
A quick google has thrown this up for me, hope it can help you.
4) Prevent Downloads Using Tables: 'Right clicking' images is a fast shortcut to find, copy, and/or download images. For those that have their own website it is possible to prevent this action by placing images as a background to tables. The code is fairly simple in CSS, using the "background-image:url" style:
<table style="background-image:url('image.jpg');width:Wpx;height:Hpx"><tr><td></td></tr></table>
Another method might be,
5) Javascript Right Click Disable: Another measure to prevent right clicks on images is to use Javascript. These short scripts over-ride browser right clicks. Rather than recreate a script that has been widely published in various forms over the internet, I will leave it to the reader to search google for Javascript Disable Right Click. I will however mention that Javascript is client-side, and scripts such as these can not only effect the usability of a website, but can also readily be disabled by turning Javascript off.
I took the info above from this site --- http://www.naturefocused.com/articles/image-protection.html ---
People can just printscreen the image and put it in paint if they really wanted it though im afraid :(
Thanks,
Jack.
I'm building the landing page for our app, and i found some inconsistencies when opening up my page on google chrome. I designed the page to have the text be on the right side of the picture. However sometimes when i refresh the page, the text drops below the picture. This doesn't happen all the time, but if i keep pressing refresh, the text will eventually drop.
I'm assuming that it's because i might be putting my width of the div a little too narrow. but i dont understand why it works sometimes and not other times.
the site is on : https://www.thedashapp.com/about.html
(disclaimer: the site isn't supposed to be live yet, so the links aren't all properly hooked up yet, and the app still hasn't launched)
See pictures:
How it's supposed to look like:
What happens when i click refresh a couple times:
You'd be better off putting the text in a separate div, and perhaps the image too. Then apply float:left; to both the div containing the text and the image or div that contains the image. I'm pretty sure that'll fix it.
I have to add a biger "i like" button to my webpage due to design requirements and i'm turning nuts, i tried this method: http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/ but it works as long as you are doing a equal size button (or i'm doing something wrong, wich is quite posible :P), otherways is just clickable the area were the original facebook button is.
So is it posible to change the size? i understand that facebook allows you (acording to their policy) change the size, but not the look of it, but i don't see any way to do it.
This works fine on my computer but im wondering if its a good idea in terms of accessibility, etc.
I have a page of product listings, and I want each listing to link to a product page. The listing is made up of an image and a few photographs of text.
I want the entire listing area to be a link, including white space. So rather than make the images and text links individually, ive put the entire div in a link.
As I said, this is working fine on my computer, but is a good idea for a production site?
Thanks
If it's like a grid or something, and you give a visual cue when the user moves the mouse over the row (background color changing etc) along with the cursor becoming a hand, it should be fine if you use the whitespace as part of your link.
If you want me in your website's audience, I would prefer if you wouldn't. When switching between windows, clicking in the window area is the quickest way to switch focus between windows. If like 80% of your window is really a link, I would find that annoying. I think I am not the only one.
The way it sounds there is also plenty of area which you can make behave like a link, such as the image, and the text in the grid. If that would be clickable, that would be big enough a target to hit.
Also imagine your app being used on a touch screen. These sometimes imsinterpret drag (scroll/zoom) and tick gestures. Which is annoying if everything responds to clicks.
Look at the right-side video links on YouTube. These are block-layout spans wrapped in a tags. (Not that just because Google does it means it's a good idea, but...)
If the area has a :hover color (as these do), then it should be clear enough to the user that this is an action item.
Syntactically it's invalid, you cannot put block elements (div, p, table) inside of inline elements (span, a, strong, em).