Gradient Theme ShopSite® Pro 11 sp2 r3

[stslivealoha]

aloha-

I just recently updated my website to SP2 R3. Address is www.bigmanhawaii.com. I had this issue before where the Facebook and Twitter Icons appear on the top of the page with a white bar. Before, i was able to change one or possibly 2 gradient theme templates and relocate the 2 icons below the "Click here to register" link. Unfortunately, i cannot locate my notes on how i specifically did it. I am assuming the update got rid of my changes because it is now appearing with a white bar at the top of the page again.

Please direct me to the following: (btw, i really appreciate any help!!!)

1. the specific template(s) i need to remove the reference on where the icons currently is being told to go
2. If I can use the code #[-- IF TWITTER_FOLLOW --][-- TWITTER_FOLLOW --][-- END_IF --] #[-- IF FACEBOOK_FOLLOW --][-- FACEBOOK_FOLLOW --][-- END_IF --] (i believe i used this code before)
3. And specifically where i can specifically place the code in the template.

Obviously, my lack of html and css does not help...so i would really appreciate any help....

Mahalo....

Update...
I believe that i need to modify the gradient1-page.sst and the gradient1-crheader.sst (please correct me if i am wrong). When i removed the [-- SOCIAL_FOLLOW --] in both templates, both icons disappeared even though they were still activated in the back office. When i placed this reference (<a href="http://twitter.com/Bigmanhawaii" class="twtr_follow" target="_blank"><img class="twtr_follow" src="http://www.bigmanhawaii.com/shopsite-images/en-US/logo/twitter.png" alt="Follow us on Twitter" title="Follow us on Twitter"></a><a href="http://www.facebook.com/pages/Big-Tall-by-Kramers/200111653332762?v=app_4949752878" class="fb_follow" target="_blank"><img class="fb_follow" src="http://www.bigmanhawaii.com/shopsite-images/en-US/logo/facebook.png" alt="Like our Facebook Page" title="Like our Facebook Page"></a>) in the gradient1-page.sst template only, the results had each icon on a separate line, that was aligned left. The only positive was no white bar.

What am i doing wrong?

Another question is the reference to [-- SOCIAL_FOLLOW --]...i am guessing where it determines if "Follow Facebok/Twitter" is enabled or not, and provides where it shall be located on the page? If this is true, where if possible can i edit the information?

Again i appreciate any help!!!

Mahalo

[Jim]

The [-- SOCIAL_FOLLOW --] tag was added to ShopSite 11sp2 to make it easier to work with the expanding list of social media options Facebook, Twitter, Google +, Pinterest, etc. Instead of having to add the individual tags (which are still useable) to the template for each of social media type, this single tag will compare the settings you have checked and will automatically output the code for each enabled feature. So instead of using

Code: Select all

[-- IF TWITTER_FOLLOW --][-- TWITTER_FOLLOW --][-- END_IF --]
[-- IF FACEBOOK_FOLLOW --][-- FACEBOOK_FOLLOW --][-- END_IF --]
[-- IF PINTEREST_FOLLOW --}][-- PINTEREST_FOLLOW --][-- END_IF --]
etc


you can just use

Code: Select all

 [-- SOCIAL_FOLLOW --]

This will make it so you don't have to update your template when a new social media type is added.
There is a set order for the way the social media logos are out put. You can change the order to the reverse order by using the tag [-- SOCIAL_FOLLOW {reverse} --]
Because each of the social media tags have special formatting (as determined by the owner of the social media company) there are styles associated with the tags that should be used to provide a similar look to the various images. Here is part of the styles that deal with social media tags from the gradient theme.

Code: Select all

a.fb_share, a.twtr_share {padding: 0px 4px 0px 0px;}
 span.pin-it-button {display: inline-block; width: 45px; overflow: hidden;}
 div.fb_share {display: inline-block; width: 55px; overflow: hidden;}
 div.twtr_share {display: inline-block; width: 88px; overflow: hidden;}
 div#plusone {display: inline-block; width: 75px; overflow: hidden;}
 img.social_follow {float: right; padding: 0px 2px; border: 0px;}

You can place the code where ever you would like on a page template. It is generally added to either the header or the footer though.

[stslivealoha]

Thank you for your help! I really appreciate your effort and time in helping me!

I did insert the [-- SOCIAL_FOLLOW --] in the globalnav area and it appears perfectly where i want it without the white bar. www.bigmanhawaii.com

However, lol...i also added the "Share" or "Tell A Friend" link. Of course it inserts itself on the left side. I tried to move it but to no avail. What am i doing wrong?

Do i need to remove the references in the left page links?

Stu

[Jim]

You need to add style information that will position the elements. If you added your own code then you will need to make sure that you create styles and put them in a css file, or use the styles that ShopSite defines.

[stslivealoha]

I just wanted to follow up on my inquiry. I was able to "Move' the security image, the social media "Follow" icons, and the Share "Tell a Friend" icons to the left nav bar. I also changed the css style sheet for the "Social.Follow" so that it will align to the left. However, I can't seem to "Align" the facebook icon/twitter icon on the same line. It appears this way in both IE and Firefox. What am i doing wrong? www.bigmanhawaii.com

Modified line in the gradient1.CSS
img.social_follow {float: left; padding: 0px 2px; border: 0px;}.

Here is the modified info for the gradient1page.sst:

<div id="sectionLinks">
<ul>
[-- LOOP LINKS --]
<li>[-- LINK --]</li>
[-- END_LOOP LINKS --]
[-- IF PageMenu --]
[-- IF WishList --]<li>[-- WishListLink --]</li>[-- END_IF --]
[-- IF SC_Registration --]<li><a href="[-- SHOPPING_CART_URL BASE --]/order.cgi?func=3&amp;storeid=[-- STORE.ID --]&amp;html_reg=html">[-- STORE.289 --]</a></li>[-- END_IF --]
[-- IF GiftCert --]<li>[-- GiftCertLink --]</li>[-- END_IF --]
[-- END_IF --]
<li><a href="http://www.bigmanhawaii.com/sc/image.cgi?key=security_redirect&amp;storeid=*14894f24aac640c700544c2a&amp;lang=en-US" target="_blank"><img src="http://www.bigmanhawaii.com/sc/image.cgi?security=yes&amp;storeid=*14894f24aac640c700544c2a&amp;r1=542212403&amp;r2=927470078" alt="Information on High Security" title="Information on High Security" border="0"></a></li>
<li>[-- SOCIAL_FOLLOW --]</li>
[-- IF TELLAFRIEND --]<li>[-- TELLAFRIEND VAR.tell_friend_link --]</li>[-- END_IF --]
</ul>
</div>

[Jim]

Both the Facebook and Twitter have additional styles assigned in addition to the social_follow. Here is the generated code from the page html.
<li><a href="http://www.facebook.com/bigmanhawaii" class="social_follow fb_follow" target="_blank"><img class="social_follow fb_follow" src="http://www.bigmanhawaii.com/shopsite-images/en-US/logo/facebook.png" alt="Like our Facebook Page" title="Like our Facebook Page"></a><a href="http://twitter.com/Bigmanhawaii" class="social_follow twtr_follow" target="_blank"><img class="social_follow twtr_follow" src="http://www.bigmanhawaii.com/shopsite-images/en-US/logo/twitter.png" alt="Follow us on Twitter" title="Follow us on Twitter"></a></li>

Note the 'class="social_follow fb_follow" ' and the ' class="social_follow twtr_follow" ' in both the href and Img statements. You need to define those styles also so that each element can be adjusted properly.