How to add images/icons to footer?

[kelly60]

I finally got a chance to do this and now my footer has wording that is misaligned.

take a look here: http://nfbotanicals.com

How to I get the wording of "copyright, my busines name, Powered by Zen Cart. Zen Cart designby My Digital Fixation." to go below the row of payment icons and such? I imagine this is done in a different file but which one?

Thank you!

[twitchtoo]

You've added the images to the span id='social-media' that has a CSS class float: right so all the elements are floating right.

You could adjust the float and margins for the class social-media or wrap the images in a div outside of the social media container, then apply new CSS rules.

[kelly60]

You've added the images to the span id='social-media' that has a CSS class float: right so all the elements are floating right.

You could adjust the float and margins for the class social-media or wrap the images in a div outside of the social media container, then apply new CSS rules.

I tried putting them outside the span tags and it still over lapped the copyright, etc. wording along the bottom before I just left it inside the span tags last night.

Anyways, how exactly do I do what you mentioned? Sorry, I am like in second grade when it comes to zencart and css!

[kelly60]

I don't see anything on the tpl_footer_menu page that says float: right . A where do I apply new CSS rules? For that matter, what are the new CSS rules?

Thank you for any help!

[twitchtoo]

includes/templates/YOUR_TEMPLATE/css/stylesheet.css

All of the default CSS rules are there, your installed template may have others... they will be added to that file, or in their own .css file...

In your case it looks like you should look in:
includes/templates/14338/css/stylesheet_footer_menu.css

[kelly60]

includes/templates/YOUR_TEMPLATE/css/stylesheet.css

All of the default CSS rules are there, your installed template may have others... they will be added to that file, or in their own .css file...

In your case it looks like you should look in:
includes/templates/14338/css/stylesheet_footer_menu.css

I looked in:
includes/templates/14338/css/stylesheet_footer_menu.css
but it's like trying to read a foreign language to me. I'm sorry...I just don't know what to do in there at all.

I really appreciate all the help you've given me, Twitchtoo, but i'm embarrassed to say that I still don't know exactly what to do. Sorry to be taking so much of your time.

[idtags]

Hello,

I am converting store to responsive template.

In regular template we have credit card images in Attachment 17523.

Images did not show in responsive template Attachment 17524.

We specify location of images in

/public_html/store/includes/templates/your_template/common/tpl_footer.php:


<div id="bannerFive" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
}
}
?>
<div id="ccFooterLogo">
<img src="https://your_domain.com/store/includes/templates/your_template/images/icons/cc1.gif" alt="We accept major credit cards and PayPal">
<img src="https://your_domain.com/store/includes/templates/your_template/images/icons/cc2.gif" alt="We accept major credit cards and PayPal">
<img src="https://your_domain.com/store/includes/templates/your_template/images/icons/cc3.gif" alt="We accept major credit cards and PayPal">
<img src="https://your_domain.com/store/includes/templates/your_template/images/icons/cc4.gif" alt="We accept major credit cards and PayPal">
</div>
<!--eof-banner #5 display -->


In non responsive template there is this code in the end of file:

/public_html/store/includes/templates/your_template/css/stylesheet.css

#ccFooterLogo {text-align: center;height:30px;}


How it should it be handled in responsive template to show images on PC, tablet and phone?

Should we populate all css files with the code?

Copy technique from non responsive template did not work.

We hope we are not missing any switches in admin.

Thank you for your help in advance.

[twitchtoo]

Hello,

I am converting store to responsive template.

In regular template we have credit card images in Attachment 17523.

Images did not show in responsive template Attachment 17524.

We specify location of images in

/public_html/store/includes/templates/your_template/common/tpl_footer.php:


<div id="bannerFive" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
}
}
?>
<div id="ccFooterLogo">
<img src="https://your_domain.com/store/includes/templates/your_template/images/icons/cc1.gif" alt="We accept major credit cards and PayPal">
<img src="https://your_domain.com/store/includes/templates/your_template/images/icons/cc2.gif" alt="We accept major credit cards and PayPal">
<img src="https://your_domain.com/store/includes/templates/your_template/images/icons/cc3.gif" alt="We accept major credit cards and PayPal">
<img src="https://your_domain.com/store/includes/templates/your_template/images/icons/cc4.gif" alt="We accept major credit cards and PayPal">
</div>
<!--eof-banner #5 display -->


In non responsive template there is this code in the end of file:

/public_html/store/includes/templates/your_template/css/stylesheet.css

#ccFooterLogo {text-align: center;height:30px;}


How it should it be handled in responsive template to show images on PC, tablet and phone?

Should we populate all css files with the code?

Copy technique from non responsive template did not work.

We hope we are not missing any switches in admin.

Thank you for your help in advance.

Do you have the correct data in the correct template file within the correct template - selected in admin?

I literally just added this code in the same location you have above codeshop/common/tpl_footer.php then added CSS styles and presto no problems...

<!--bof-banner #5 display -->
<?php
  if (SHOW_BANNERS_GROUP_SET5 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET5)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerFive" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
<!--eof-banner #5 display -->

<!-- bof Twitch footer -->
    <div id="SupportVersions">Currently supporting Zen Cart 1.37 - 1.55e</div>    
    
    <div id="theDisclaimer">
    <a href="../disclaimer.html" title="Disclaimer">Disclaimer</a>
    </div>
<!-- eof Twitch footer -->

my css in in the stylesheet.css within the codeshop template common/tpl_footer.php

#SupportVersions {
color: gray;
font-size: small;
line-height: 1.5em;
clear: both;
margin: 5em 0 0;
}

Nothing else added.

Unless you have some parent div manually turning off the CSS in responsive devices?
I may look like this:
#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:none;visibility:hidden;}
found in the responsive_mobile/tablet/default.php

tpl_footer.php is the actual structure of the page... therefore if you have built a wall with orange bricks... tpl_footer is the bricks and your CSS is the orange colour.

Head over to my site then click - Browse Twitch Modules, Templates and ZenCart Plugins to see the new stock Zen 1.55e running the responsive template... and a lot of my code to clean up the 'responsive' mess. Should have the bugs out of it by days end.

[idtags]

Thank you for looking in it. You are absolutely correct.

There were 2 errors in our work:

1. Call for images was in wrong template file folder: /classic_responsive/.
It should be in /your_template_responsive/

2. Line #ccFooterLogo {text-align: center;height:30px;} had a wrong space before word center

It should be: #ccFooterLogo {text-align:center;height:30px;}

Now images are back on the center: Attachment 17525

[idtags]

I wonder if somebody experienced this problem.

When I use Inspect Tool on Google or FireFox for Iphone 6S I see a following picture: Attachment 17538

I like the font and alignment.

And when I look on actual Iphone 6S I see following image: Attachment 17537

Font is "Times New Roman" which is not good and Word "Search" is not aligned and is not fitting and button around word "Search' has different shape.
Shape is not big deal, but it does not work together.

It makes it moving target.

What would you recommend to use to address visualization on actual phone.

I am looking on others websites on Phone and it looks good.

So, I am thinking that my Zen cart code is not tuned, but how to synchronize PC simulation of mobile with real mobile?

Thank you.