Web Hosting Forum | Lunarpages

Author Topic: Need help positiong my Comodo SSL Seal in header using Java Script and CSS  (Read 17065 times)

Offline link4nes

  • Spacescooter Operator
  • *****
  • Posts: 34
    • http://NA
Hello:

I have been searching all over the internet for an answer and I hope someone can help me out. Basically I am running Presta Shop and want to place this JavaScript from Comodo (Trust Logo) in my header.tpl file. I've been able to place it in there and it does work. My only problem is figuring out how to position the actual image file with the link: TrustLogo("http://www.nesgamestore.com/themes/nestheme/img/comodo_secure.png", "CL1", "none");

Does anyone know how to integrate HTML Position Style TAGS or CSS in with the Javascript code so I can position it on the right side of my header? I tried using style tags for the <a href> tag and I can move the "SSL Certificates" text over but the image remains.


1. Copy and Paste the following piece of code and insert EXACTLY before your </HEAD> tag.

<script language="javascript" type="text/javascript">

//<![CDATA[
var tl_loc0=(window.location.protocol == "https:")? "https://secure.comodo.net/trustlogo/javascript/trustlogo.js" :
"http://www.trustlogo.com/trustlogo/javascript/trustlogo.js";
document.writeln('<scr' + 'ipt language="JavaScript" src="'+tl_loc0+'" type="text\/javascript">' + '<\/scr' + 'ipt>');
//]]>
</script>

2. Copy and Paste the following piece of code and insert EXACTLY before your </BODY> tag.

<script language="JavaScript" type="text/javascript">
TrustLogo("http://www.nesgamestore.com/themes/nestheme/img/comodo_secure.png", "CL1", "none");
</script>
<a  href="http://ssl.comodo.com" id="comodoTL">SSL Certificates</a>

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6225
I'm not clear on what you're trying to do. Do you want to move both the padlock icon and the "SSL Certificates" link over the right side of the page, or just one of them? Not being able to see the final HTML, JS, and CSS that's positioning the two of them in your header, it's kind of hard to suggest anything, even once it's clear what you want.
Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-

Offline link4nes

  • Spacescooter Operator
  • *****
  • Posts: 34
    • http://NA
Hi:

I'm removing the line for <a  href="http://ssl.comodo.com" id="comodoTL">SSL Certificates</a> so it would just be the pad lock pic that links the JavaScript for SSL verification from Comodo.

I would like to position the padlock so it is to the right of the PayPal picture in the header above the Menu Bar.

I made the changes to my header.tpl file and copied the final javascript code below. Preatashop uses smarty templates so the {literal} tags are added into the code below.

I have also taken my site out of maintenance mode so you can view it live at http://www.nesgamestore.com

Thank you very much for any advice you can offer!

++++++++++++++++++++++++++++++++++
<script language="javascript" type="text/javascript">
               {literal}   
                  //<![CDATA[
                  var tl_loc0=(window.location.protocol == "https:")? "https://secure.comodo.net/trustlogo/javascript/trustlogo.js" :
                  "http://www.trustlogo.com/trustlogo/javascript/trustlogo.js";
                  document.writeln('<scr' + 'ipt language="JavaScript" src="'+tl_loc0+'" type="text\/javascript">' + '<\/scr' + 'ipt>');
                  //]]>
               {/literal}
               </script>
               <script language="JavaScript" type="text/javascript">
               {literal}
               TrustLogo("http://www.nesgamestore.com/themes/nestheme/img/comodo_secure.png", "CL1",
               "none")
               {/literal};
               </script>

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6225
Try this. Find:
Code: [Select]
TrustLogo("http://www.nesgamestore.com/themes/nestheme/img/comodo_secure.png", "CL1", in your source, and wrap the following around it:
Code: [Select]
<div style="position:absolute; right:100px; top:70px;">
 TrustLogo("http://www.nesgamestore.com/themes/nestheme/img/comodo_secure.png", "CL1", "none");
</div>

Even if it positions the stuff correctly, you'll probably still have to tweak the right and top values til it's placed where you want. It's possible you'll have to give width and height properties to the <div>, too.
« Last Edit: January 28, 2014, 01:16:58 PM by MrPhil »
Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-

Offline link4nes

  • Spacescooter Operator
  • *****
  • Posts: 34
    • http://NA
Thanks! I put in the DIV tags just before and after the script tags and it worked! Thanks!

Offline dwaynnyt

  • Intergalactic Cowboy
  • *****
  • Posts: 64
Nice to see this working for you buddy. If I may ask, how much did you spend in total here?

 

Share |