Jump to content

SSL Logo


Guest Cellular Amps LLC

Recommended Posts

Guest Cellular Amps LLC

Ok, I have my SSL loaded and it works, So I wanted to add my SSL Logo to my store.

So I go to the logical place skins/killer/styleTemplates/global/index.tpl

But after putting in my seal info it shows up at the top right hand corner of my site, I want it below the Paypal Credit Card logo.

Also the CC logo is centered and the PayPal Seal is on the left margin, can I center this by adding:

<table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center">

And I add:

{SHOPPING_CART}

<!-- start mod: Latest News, by Estelle -->

{NEWS}

<!-- end mod: Latest News, by Estelle -->

<!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=info%40cellularamps%2ecom" target="_blank"><img src="http://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0" alt="Official PayPal Seal"></A><!-- End Official PayPal Seal -->

<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center"><a href="#" onclick="java script:window.open('https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/cps/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');"><img src="https://www.paypal.com/en_US/i/bnr/vertical_solution_PP.gif" border="0" alt="Solution Graphics"></a></td></tr></table><!-- PayPal Logo --></td>

<script language="Javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxxnot showing this infoxxx"></script>

****edit**** forgot to add this is CC version 3.0.15**** end of edit****

Link to comment
Share on other sites

Guest Cellular Amps LLC

Tried to add the <div align-"center"> </div> and it had no results.

Got the SSL Seal to show up under my shopping basket, by moving it up the file, this is better than nothing, but not what I wanted.

Of course now I am having other issues as well.... but I have contacted the MOD designer that I am pretty sure is the issue.

But if anyone else has a though on the above items I would appreciate it.

Thanks in advance,

Link to comment
Share on other sites

Guest Cellular Amps LLC

Oh, and just to make sure I don't upset anyone.... Yes I plan to purchase cubecart as soon as I get it all running. I would buy it now and get support, but I have already added 5 mods to my site which would basically stop support for any issues I am currently having except the SSL Seal location issue.

Purchase will be coming soon.

Link to comment
Share on other sites

Guest Cellular Amps LLC

Okay, so I don't look or sound stupid (never mind I am sure I can handle looking and sounding stupid) :blink:

Which code are we talking this <div align="center"> </div> how would I use this and on which issue that I Am having...

Please forgive me I am still in the infant stages of coding.... but willing to learn.

Link to comment
Share on other sites

Guest wamasterhunter

I **believe** that it would be this piece of code. Place <div align="center"> at the front then </div> at the end.

Micah

<!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=info%40cellularamps%2ecom" target="_blank"><img src="http://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0" alt="Official PayPal Seal"></A><!-- End Official PayPal Seal -->

<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center"><a href="#" onclick="java script:window.open('https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/cps/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');"><img src="https://www.paypal.com/en_US/i/bnr/vertical_solution_PP.gif" border="0" alt="Solution Graphics"></a></td></tr></table><!-- PayPal Logo --></td>

<script language="Javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxxnot showing this infoxxx"></script>

Link to comment
Share on other sites

Guest Cellular Amps LLC

Ok, just so I don't keep reading this and confusing myself.

I have 2 issues that can be addressed via this thread.

1) SSL Seal will not let me add it to the bottom of my left side of the Killer skin, when placed in the location listed in the first post it will go to the top left of the page. When I add it directly under the shopping cart it works there, but that isn't where I really wanted to put it.

2) I have the PayPal Seal and the PayPal Credit Card logo. The Credit Card logo is centered in the left side and looks good. The PayPal seal wants to sit on the left margin and not center.

So how do I get the SSL Seal to stay where I want it?

How do I get the PayPal seal to center?

Two different items same post... Please forgive me if I should have made two posts.

The only other issue I have is with a Mod as I stated, but that is being worked from that end. And the Mod has nothing to do with this issue, this I am sure of, since it doesn't even effect the skin.

Link to comment
Share on other sites

Guest wamasterhunter

Kind of wish we had a website.... :blink:

There is left and right side of the cart, so you need to put it inside of either the left or right sides. Is the cart the only thing on one side? Because you should be able to put it below or above any of the other boxes.

Micah

Link to comment
Share on other sites

Guest Cellular Amps LLC

Ok, turned the cart on... Just hope no one decides to buy anything... that is my other issue, that is being worked.

Have a look and let me know if you can figure out what I need to do to fix my two little issues :blink:

thanks in advance,

Link to comment
Share on other sites

Guest wamasterhunter

Did you put the <div align="center"> and </div> where suggested? That might do it.

If it goes to the top you are putting it out of the proper divs. Here is a little tip that I use. Go through and find a tag that says border, and set the borders to 1 pix. Then save and look and see where the borders are. Now you know where to put something you want in that area. It is a good idea to do that for each border, one at a time, and putting each one back after you check it. That way you can see where everything goes.

Micah

Link to comment
Share on other sites

Guest Cellular Amps LLC

Did you put the <div align="center"> and </div> where suggested? That might do it.

If it goes to the top you are putting it out of the proper divs. Here is a little tip that I use. Go through and find a tag that says border, and set the borders to 1 pix. Then save and look and see where the borders are. Now you know where to put something you want in that area. It is a good idea to do that for each border, one at a time, and putting each one back after you check it. That way you can see where everything goes.

Micah

When you say put the <div align="center"> and </div> where suggested, I know I am new to coding, but did anyone really say where to put it? By rereading the posts, my best guess it to add it this way...

<div align="center"><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=info%40cellularamps%2ecom" target="_blank"><img src="http://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0" alt="Official PayPal Seal"></A><!-- End Official PayPal Seal -->

<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center"><a href="#" onclick="java script:window.open('https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/cps/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');"><img src="https://www.paypal.com/en_US/i/bnr/vertical_solution_PP.gif" border="0" alt="Solution Graphics"></a></td></tr></table><!-- PayPal Logo --></td>

<script language="Javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxxnot showing this infoxxx"></script></div>

Is this correct?

Link to comment
Share on other sites

Guest wamasterhunter

Okay, my mistake, (I think). I think it should go here, so take out the other </div> at the end, and paste this code in and see if it works

<div align-"center"><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=info%40cellularamps%2ecom" target="_blank"><img src="http://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0" alt="Official PayPal Seal"></A><!-- End Official PayPal Seal --></div>

Link to comment
Share on other sites

Guest wamasterhunter

I put the logo on my site so that I could play with it, and I found the problem.

The code said <div align-"center"> I had not even checked to see if it was the right code.

Here is the correct code:

<div align="center"><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=info%40cellularamps%2ecom" target="_blank"><img src="http://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0" alt="Official PayPal Seal"></A><!-- End Official PayPal Seal --></div>

Link to comment
Share on other sites

Guest Cellular Amps LLC

That is much better, now if I could only get the SSL Seal to go at the bottom of the stack vice near the top....

Link to comment
Share on other sites

Guest wamasterhunter

It is very close to the bottom... You could cut out the code for the seal, then paste it just below the paypal logo.

Micah

Link to comment
Share on other sites

Guest Cellular Amps LLC

I Will try that again, but the last time I put at the bottom it went to the top of the page above the shopping basket...

Link to comment
Share on other sites

Guest Cellular Amps LLC

Well that was dumb of me, and I figured it out even... Not from first post:

</td>

<script language="Javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxxnot showing this infoxxx"></script>

I should have placed it prior to the </td> not after.... boy don't I feel like I need to drink something strong.... hmmm need more coffee.

Thanks for the help on this... now just to fix my other issue and I Will be a happy camper.

Link to comment
Share on other sites

Guest devstudent

Actually, you should not use align="center", it's invalid and improper code practice, no validator will allow this either without spitting errors at you. Using valid code is not just a matter of making the W3C happy, it's both a matter of cross browser compatability and displaying a degree of professionalism in your hard work. Primarily though it's an issue of cross browser compatability that should be of concern to you.

(specific instructions on how to solve your problem are down below the red line, the rest of the info here is for others who may some day or currently have a simular problem or question)

I don't know about the GoDaddy Site Seal in particular since I don't use GoDaddy because all they do is repackage other companies products with their own branding and logo, nor do they project a true professional impression to people when they see someone has used GoDaddy. I'd guess though what they are rebranding is just a GeoTrust site seal, which even though you enter it into your web pages as javascript, it actually calls on and displays a physical image file in the web browser.

The inexperienced seem to always just use align="center" and for good reason, it's not openly obvious how to do this and still conform to the valid W3C standards for cross browser compatability. So pull out a paper and pen to take notes with, I'm going to learn you all how to properly center things with actual valid code, you'll see doing it the right way isn't that difficult providing you know how to do it, at the end of this post you'll know how to do it and be one up on a lot of people who struggle with this common problem.

Since someone searching for centering issues may find this post I'll explain first the correct way to center just an image file without having to try and use depricated code like align="center".

Most people try to use align="center" directly in their img tags, only to discover it doesn't work even with depricated code habits, that's because align="center" only works in block level tags like "table", "p", "div", or "h1, h2, etc...". The image tag "img" is actually an "inline element". This basicly means to you that align="center" isn't valid HTML even deprecated when used with an inline element so all web browsers will just ignore it, the best you can do is position the image to the left or right, but not center. You could try the "center" tag around your img tag, but "center" is also deprecated.

The problem with using align="center" within a block level element though like <div align="center"><img... is that different browsers are going to pad around the block level element differently and your page may not come out looking as you had hoped it would to other people using different web browsers. The effect can be rather dramatic depending on the rest of your page layout. (Not to mention, as already stated, "align" is a deprecated value within your web pages, so it's not valid to use in a web page in this way at all.)

So if it's just an actual image file your trying to get to center, it can be done, however you want to do it in either a seperate .css file, or as an inline css entry on your web page itself if you aren't using an external .css file.

I'll create an example here using inline css since this would be the easiest for the less experienced to use, the same exact approach will however work in external .css files.

In the <head> section of your web page if it isn't already there add the following...

<head>



<style type="text/css">



img.centerimg {

	display: block;

	margin-left: auto;

	margin-right: auto 

}



</style>



</head>




What this sets up for you is the ability to use a class that can be added to a img tag and then you can cheat the system so to speak by just adding the new class to your img tag where it will then be valid and centered and no need to use the deprecated "align" value to achieve the same thing, as well as being able to center an image within a block level element, removing the need to add additional browser space by using a second block level element just for the image file.



So now, just add your image file as is anywhere on your web page and just use the new class directly within your img tag like soto get it to center...




<body>



<img class="centerimg" src="yourimagefilename.jpg" alt="image description" height="90" width="50" />



</body>





_________________________________________________________________



_________________________________________________________________






Now, for your particular problem, and to make this mini tutorial complete, since the image file your placing in your web page is actually done by using a javascript entry to call on it we'd solve this problem simular to the above lesson I provided for you, but different, only slightly because we don't have an img tag in the code. What we'll do here is create a new class, then wrap your seal code within a block level element to get it to center.




<head>



<style type="text/css">



.centerimg{

 text-align:center;

 margin-top:0px;

 margin-bottom:0px;

 padding:0px;

}



</style>



</head>




Now in our web page we just wrap the seal code around any block level element where we want it to show on our web page and it will be centered for you and valid like so...






<body>



<p class="centerimg">



<script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=858979604d0ac0751271117b6d865417f34062043846892367550">

</script>



</p>



</body>




or...




<body>



<div class="centerimg">



<script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=858979604d0ac0751271117b6d865417f34062043846892367550">

</script>



</div>



</body>

...and so on for any block level tag as mentioned above and your "logo" (image) will be centered where you want it and look the same in all browser types.

What this sets up for you is the ability to use a class that can be added to a block level element tag and then you can cheat the system so to speak by just placing your img tag within a block level element where it will then be valid and centered and no need to use the deprecated "align" value to achieve the same thing. You also then control the padding the different browsers will place around your image within the block level element, giving you exact control of how things will come out looking in all browsers.

Also Note:

I modified the code that GoDaddy provided for you, that's because this code they gave you isn't valid either, you can't use that "language" portion they have in there like that, if you change it like I displayed for you it will still work, and actually be done with valid code.

And so ends this mini "How To Center" tutorial.

Link to comment
Share on other sites

Guest devstudent

I put the logo on my site so that I could play with it, and I found the problem.

The code said <div align-"center"> I had not even checked to see if it was the right code.

Here is the correct code:

<div align="center">

<!-- Begin Official PayPal Seal -->

<a href="https://www.paypal.com/us/verified/pal=info%40cellularamps%2ecom" target="_blank">

<img src="http://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0" alt="Official PayPal Seal">

</A>

<!-- End Official PayPal Seal --></div>

Sorry, I missed your post here, let me help you as well while we're at it, that's certainly not correct code by any means. In this example what I wrote above for image tags specificly would apply to what your trying to do with your code there.

In that little chunk of code you posted there you have an example of just about everything you do not want to do.

div align="center"

I already covered above in detail, do not use align="center".

Next line you use for your link contains target="_blank", which is another no no and deprecated, also does not work as you intend in all browsers, not to mention it's just not valid or proper.

Drop down to your image tag, you have no no's in here as well, several actually, first problem, your using border="0", invalid and depricated, some browsers will ignore it, your page won't look right to everyone. Also, you always need to specify a height= and width= in your image tags, even if you are not changing the height and width values of the actual image, again, this is to make your code valid, and to insure your image files display as intended in all browsers. To remove the border from your images you want to do this within your css data, not in your image tag, another tutorial for another day I suppose.

Here's another habbit you may want to get into as well, it will be an issue for screen readers and some versions of Fire Fox in particular, you have properly used alt="Official PayPal Seal", you should also add in to all image files title="Official PayPal Seal" as well, just trust me on that one, though another lesson for another day, pages will still currently validate without using it, but that is going to change in the not so distant future so it's a good habbit to pick up on now.

And lastly, your final line you have entered /A, which is also a no no, valid XHTML does not allow CAPITAL or UPPER CASE characters in your code, you need to change that to read /a in lower case, as well as any other code in your web page, everything has to be in lower case.

Now you know.

P.S.

The reason this stuff matters is because the outdated HTML 4 (which has been deprecated since 1999) code your calling the "right code to use", is not correct for the web page you pulled it from based on the DTD from that web page which clearly identifies the page as XHTML 1.0 Transitional in the header DTD.

Doing things the correct way is just as easy as doing them the wrong way so why not just do it right?

Link to comment
Share on other sites

Guest Cellular Amps LLC

Thanks for the tutorial.... I will have to change that then. Keep in mind that most of this info came from either Paypal or Godaddy..... So since I am still learning I take it I have to double check all info even if provided by what would seem to be a good source.

I went with Godaddy, because I got ripped off by my last host/designer... figured I would be better off learning it myself. Trust me when I say I have learned a lot in the last few weeks.

Link to comment
Share on other sites

Guest wamasterhunter

@DevStudent,

I did not write one letter of that code, I got it from the topic and explained to him where to put it using where others said to put it.

Micah

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...