Skip Navigation

Facebook or Twitter Subscribe

Travel Forums System Talk Facebook or Twitter Subscribe

1. Posted by noahv (Full Member, 11 posts) 15 Jun '12 19:28

Interested in learning how I can add a link to our Facebook page or Twitter account. Would like to add an icon/link to the navbar on the right (Watercolour theme). Perhaps also on Subscribe page. Edit Template page only allows for CSS template changes?

Thanks!

2. Posted by Peter (Admin, 5355 posts) 15 Jun '12 23:45

Hi Noahv, in your blog management area, under the Manage tab, there is a Links option. You can enter the links to your Twitter and Facebook pages on there.

3. Posted by noahv (Full Member, 11 posts) 19 Jun '12 17:09

Thanks Peter - I was hoping to get this in the same area as the Home Page / TOC / Subscribe icons on the right. Any chance to do that?

Also, any way to add a banner text to the top of the blog (under the map?) that says something like "Click on the link to the right to subscribe or Like us on Facebook?"

Thanks!

4. Posted by Peter (Admin, 5355 posts) 19 Jun '12 17:47

This will force the positioning of the links to the top under the other main navigation items, push the search down a bit and make the link text look more similar to the main navigation:

#bloglinks {
position:absolute;top:180px;
line-height: 45px;
font-size: 18px;
font-family: Georgia serif;
}
#bloglinks li {
height: 45px;
padding-left:45px;
margin-bottom: 10px;
border-bottom: 0 !important;
}

#bloglinks h3 {display:none;}
#navsearch {margin-top:100px;}

To add some text under the map is getting a little more advanced. It's much harder to manipulate the styling of this text, but it can be done. This will get you started:

#mapInnertp1 {margin-bottom:10px;}
#blognav_map:after {content:"Click on the link to the right to subscribe or Like us on Facebook"}

[ Edit: Edited on 19-Jun-2012, at 17:47 by Peter ]

5. Posted by noahv (Full Member, 11 posts) 2 Aug '12 13:58

Thanks Peter - that worked a treat. To finish it up, how can I add icons for the two new links (like are there for Home, TOC, and Subscribe)?

Thanks - Noah

Post 6 was removed by a moderator
7. Posted by Peter (Admin, 5355 posts) 3 Aug '12 16:22

Unfortunately the icon set I used in that template doesn't have an icon for Facebook. It does however have one for Twitter. Here is a full image with all the icons available - http://iconsgator.com/wp-content/uploads/2009/07/watercolor-preview.jpg

If you want to use one of the other ones there for Facebook let me know and I can upload it so you can use it and the Twitter one.

8. Posted by noahv (Full Member, 11 posts) 4 Aug '12 13:45

Thanks - probably the "News" one fits the best.

Too bad there's not a stock FB one (ideally, I would love this one... http://modmyi.com/attachments/forums/iphone-4-new-skins-themes-launches/469616d1283953255t-buuf-iphone-4-facebook2.png)

9. Posted by Peter (Admin, 5355 posts) 11 Aug '12 18:11

Hi Noah, I've added those icons for your use. The FB one didn't have transparency, so I had to cut it out which makes it a bit blocky.

These are the bits of code to change:

#bloglinks {
position:absolute;top:170px;
line-height: 45px;
font-size: 18px;
font-family: Georgia serif;
}
#bloglinks li {
height: 45px;
padding-left:45px;
margin-bottom: 10px;
border-bottom: 0 !important;
background:url(/img/11/noahv_twitter.png) no-repeat 7px 0;
line-height:45px;
}
#bloglinks li:first-child {
background:url(/img/11/noahv_fb.png) no-repeat 0 0;
}

It is a bit fragile in that if you ever add another link there it will also automatically get the Twitter icon

And the FB one may not work in some older browsers (and show the twitter icon instead); I think for most modern browsers it will be ok though.