Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Here is the CSS i put into my child theme. I am using SiteOrigin North and the SiteOrigin page builder plugin.
.facebook-hover {
background-image: url('http://fitrufitness.com/wp-content/uploads/2016/04/facebook-hover-e1461988191126.png');
display:inline-block;
}
.social-slide {
/*background-image: url('path/to/image.png');*/
height: 48px;
width: 48px;
margin: 10px;
float: left;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-slide:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
Here is the HTML I put into the SiteOrigin Edit widget.
<div> <div class="facebook-hover social-slide"></div> <div class="facebook-hover social-slide"></div> <div class="facebook-hover social-slide"></div> <div class="facebook-hover social-slide"></div> </div>
Here is an image of what is happening:
The image represents 1 row with 3 even columns, with only two SiteOrigin Edit widgets in the middle column. My end goal is getting the social icons to center like the text above them. Does anyone know why they are not centering? Any help would be much appreciated!
Hi Fause,
Do you have a public URL where we can take a look at what’s going on? It would be the best way for us to work out what’s going on. If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
This is a private message.
Hi Fause,
It looks like you’ve worked out how to center align the desired areas in the footer.
Regarding the (odd) spacing of the social icon, the issue is that when you input a return in WordPress, by default, it’ll add a paragraph. So based on your HTML it’s adding paragraphs every line break. Open up the footer, and open the editor widget that contains the footer. Then untick the “Automatically Add Paragraphs” checkbox after the editor to allow for the social icons to be on the one line.
I figure out how to center the text but not the social media icon links. They are in a pagebuilder widget that is in the center of a row but they are left aligned in the column.
Hi Fause,
It looks like you’ve set the headers in the hero widget to be left aligned.
Just need to remove that (or set it to center align) and it’ll work as desired.
It’s not a hero widget, it’s an editor widget that I’m talking about, the one in the picture I should in the OP. The headers are centered. The images are actually just div tags pointing to CSS, each div points two one class that provides the image in background and one class that handles the animation of the image.
This is a private message.
Alex, sorry for not making sense haha. I don’t know what I am doing and also don’t really know how to speak the lingo. I will try to implement what you instructed me to do. Thanks!
I did everything you instructed me to do except for the header align stuff, but it is looking exactly how I wanted to now! Thank you so much! Now I have to figure out why it looks like complete garbage in IE. Thanks again!