Mutt
Well-known member
On the bottom left of most pages there's the "Share This Page" bar w/ links to Tweet & Like on FB but there's a whole bunch of open real estate to the right. I added some social site icons there & even though it's a little nothing template edit, I'm new & need to submit something just to get my feet wet. To make it a little nicer, I used the Xen tooltips.
DIRECTIONS
make a new template called social_icons
Edit this to add your information & whatever sites/icons you want.
I got the icons here. Dude has a tremendous collection & I'm sure you'll find what you are looking for. I found that the 24px icons fit the space well.
http://icondock.com/free/vector-social-media-icons
upload the icons you are using & adjust the template so the IMG tags point to them. If you don't want to change the template, I have them in /styles/default/social/24px/ but you put em where you want them. (for future reference, is there a generally accepted spot for this kind of thing? there isn't exactly an image dir)
open template EXTRA.css and add this
open template share_page and just after
add this
that's everything. like I said, I'm new so feel free to let me know if there a better way to do something.
DIRECTIONS
make a new template called social_icons
Code:
<div style="float: right;">
<ul class="socialicons">
<li title="Find us on Facebook" class="Tooltip"><a href="http://www.facebook.com/xxxxxxxxxxxxx" target="_blank"><img src="@imagePath/social/24px/facebook.png" border="0" width="24" height="24"></a></li>
<li title="Follow us on Twitter" class="Tooltip"><a href="http://www.twitter.com/xxxxxxxxxxx" target="_blank"><img src="@imagePath/social/24px/twitter-2.png" border="0" width="24" height="24"></a></li>
<li title="Subscribe to us on YouTube" class="Tooltip"><a href="http://www.youtube.com/user/xxxxxxxx" target="_blank"><img src="@imagePath/social/24px/youtube.png" border="0" width="24" height="24"></a></li>
</ul>
</div>
I got the icons here. Dude has a tremendous collection & I'm sure you'll find what you are looking for. I found that the 24px icons fit the space well.
http://icondock.com/free/vector-social-media-icons
upload the icons you are using & adjust the template so the IMG tags point to them. If you don't want to change the template, I have them in /styles/default/social/24px/ but you put em where you want them. (for future reference, is there a generally accepted spot for this kind of thing? there isn't exactly an image dir)
open template EXTRA.css and add this
Code:
.socialicons li {
float: left;
}
.socialicons img {
height: 24px;
width: 24px;
margin-right:5px;
}
open template share_page and just after
Code:
<h3 class="textHeading larger">{xen:phrase share_this_page}</h3>
Code:
<xen:include template="social_icons" />
that's everything. like I said, I'm new so feel free to let me know if there a better way to do something.