Add Background to Facebook Like Button on Sidebar - html

I am trying to add facebook like button and twitter follow button to SIT on a background although I have tried many variations of coding nothing works.
Lets say I have this image/background http://cl.ly/3A050D3E0v0X1C332O0c
and I want facebook/twitter to be under that background to look nice and then implement that code as an HTML widget on my wordpress sidebar.
Is this possible?

Place the like button inside of a div and set the background image of the div using CSS.

Related

How do I hide an image within a gallery with CSS?

I have a gallery plugin on my Shopify website which doesn't have an option to hide an image within the gallery. It does have a custom CSS option within the gallery so I'm trying to find out if anyone knows how to hide a certain image in a gallery using the CSS option.
I want to hide an image within the gallery - not the entire gallery.
The HTML code for the gallery is:
<div class="cz-embed-gallery" id="cz-embed-gallery3926"></div>
The images have a caption, image link, and a title.
Take a look and see if you can help.
Thanks.
You can hide any element by assigning display: none to the class, id or whatever is valid in CSS as an identifier.
Take a look a the basics of CSS.
https://www.w3schools.com/css/

can you create a carousel box over a fixed background image? how?

I want the homepage of my webpage to have a fixed background image in between the navbar and footer with a smaller carousel box in front of the background image. I've looked around and haven't found anything that looks like this. I kind of don't know where to start. Is it possible?
The tag that contains your entire main content add a CSS background to it
Below navbar
Till footer
background:url(link);
Then use your slider as you would normally

Position absolute for button to achieve responsive

Imagine this is my header http://freedesignfile.com/upload/2013/01/banner-2.jpg, and the button have to be clickable. I don't want to slice the images and put it into blocks. How can the button be clickable and achieved responsive in the same time??
I am not sure why you want to be so complacent as this can simply be done via Pure CSS only where you can put your image as a background an create this button via CSS and make it clickable.
But, like you have mentioned you do not want to go this way, the only way would be to create another image for a responsive layout and on that image, you need to show/hide based on your requirements and assign a class that changes the click position to match it as per your new image button using image map.
Hope this helps.

Wordpress Custom Menu Images and Style

I'm trying to modify a theme to fit my design in Wordpress. I'm having a lot of trouble editing the menu bar in any way (apart from just colors).
I need to know how to achieve something like this: http://i.imgur.com/hPBo4is.png
Is it possible to just add the image to the menu bar and link certain areas? How can I get this into my website?
Thanks.
you have to crop image with whole black color without text portion and apply as background image to menu's "ul" tag. and then to display that text links you have to play with padding & margin.
thanks

How to Style Facebook Like Comment Pop Out Over Links?

Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}