How to edit head section HTML of main page?

**marcsullivan** · 15 Sep 2012, 12:09 AM

Greetings,

I'm helping a friend develop a ZC 1.5 site, and need to insert some code for a slideshow module into the HTML in the head section of the main page. I know this feature has been disabled in text editors for version 1.5. Nevertheless I've spent hours trying to find an alternative solution since the folks who developed the module will happily set it up for a fee my friend can't afford at the moment. If they can do it I would think I should also be able to do it.

The main_page.php file on the server doesn't show the head section, only the HTML for the page content. Can anyone advise me as to where I can access the complete code? I'm comfortable with editing HTML - I just need a way to get to it.

Thanks in advance to any Zen masters out there who can enlighten me.

Marc

**DrByte** · 15 Sep 2012, 12:22 AM

What EXACTLY is this code you need to add?

Chances are it's javascript, and you should be using the built-in autoinsertion-of-javascript-scripts stuff as described here: http://www.zen-cart.com/wiki/index.p...s_-_Javascript

In VERY RARE cases it may be necessary to directly edit the html_header.php file of your template. Again, that should be RARE.

**marcsullivan** · 15 Sep 2012, 12:35 AM

Thanks, DrByte, for your blazingly fast response!

Yes, the code calls javascript, and a CSS file. There's more CSS for the head section, it depends on the slideshow configuration. There are many more settings in Admin. Here's the example code I'm looking at:

<html>
<head>
<title>Page Title</title>


<link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css" media="screen"/>

<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>

<script type="text/javascript">
MagicSlideshow.options = {
'arrows': false, // you can use 'no' or 0 here
'thumbnails': 'inside',
'container-size': 80,
'container-padding': 5,
'container-position': 'bottom',
'container-opacity': 0,
'preloadInOrder': true,
'start': 2,
'loadingText': 'Please wait...',
'speed': 5,
'effectJump': 'scroll',
'loop-type': 'first'
}
</script>
<style type="text/css">
img.MagicSlideshowThumbnail {
border: 2px solid #696969;
margin: 1px 4px;
}
img.MagicSlideshowThumbnail.highlight {
border: 2px solid #FFFFFF;
}
</style>

</head>
<body>


<div class="MagicSlideshow">
<a rel="images/supercar6.jpg"><img src="images/supercar6-small.jpg" /></a>
<a rel="images/supercar7.jpg"><img src="images/supercar7-small.jpg" /></a>
<a rel="images/supercar8.jpg"><img src="images/supercar8-small.jpg" /></a>
<a rel="images/supercar9.jpg"><img src="images/supercar9-small.jpg" /></a>
</div>

</body>
</html>

It seems that the fastest and easiest way would be to edit the page code? I have a fair amount of HTML and CSS experience, but I'm no Zen Cart expert, that's for sure. However it's a very nice slideshow, and we'd really like to use it. This little challenge helps me become more familiar with Zen Cart and that's a plus.

Any more advice you care to share is greatly appreciated!

Marc

**DrByte** · 15 Sep 2012, 12:39 AM

I can't begin to count the number of times the same sort of scenario has been posted about.

It boils down to:
1. for the <head>, put all your necessary stylesheets into the stylesheet folder, using the prescribed format.
2. for the <head>, put all your necessary javascripts into the jscript folder, using the prescribed format.
3. for the rest ie: all the on-page <script> stuff, put it into the template tpl_whatever_page_it_is.php or define_main_page.php file directly.

So...

1. magicslideshow.css - copy that to /includes/templates/NAME_OF_YOUR_TEMPLATE_HERE/css/styles_magicslideshow.css
2. magicslideshow.js - copy that to /includes/templates/NAME_OF_YOUR_TEMPLATE_HERE/jscript/jscript_magicslideshow.js
3. for the inline <script> and <style> stuff, you have two choices:
a) just embed it directly into the template, along with the div, as mentioned in 4 below, or
b) stuff it into a new file like this;
/includes/templates/NAME_OF_YOUR_TEMPLATE_HERE/jscript/jscript_mymagicsssettings.php

Code:

            <!-- set slide show params -->
            <script type="text/javascript">
                MagicSlideshow.options = {
                    'arrows': false, // you can use 'no' or 0 here
                    'thumbnails': 'inside',
                    'container-size': 80,
                    'container-padding': 5,
                    'container-position': 'bottom',
                    'container-opacity': 0,
                    'preloadInOrder': true,
                    'start': 2,
                    'loadingText': 'Please wait...',
                    'speed': 5,
                    'effectJump': 'scroll',
                    'loop-type': 'first'
                }
            </script>
            <style type="text/css">
                img.MagicSlideshowThumbnail {
                    border: 2px solid #696969;
                    margin: 1px 4px;
                }
                img.MagicSlideshowThumbnail.highlight {
                    border: 2px solid #FFFFFF;
                }
            </style>

4. and the rest (the <div> etc) goes into whatever template piece you need, wherever you intend it to display

**marcsullivan** · 15 Sep 2012, 12:47 AM

Sorry if I'm covering ground that's already been covered, but I really did search for this and couldn't find any pertinent results. I literally spent hours searching the forum and on Google. However I was searching under terms like "edit html head section" and "Zen Cart 1.5 HTML editor."

Thanks, DrByte, I'll do as you suggested. It's Fri night and the natives here are restless, but I'll get on it tomorrow.

Thanks again,
Marc

**DrByte** · 15 Sep 2012, 12:59 AM

Is this something that's intended to show on *every* page? Or just one page of the site?

**marcsullivan** · 15 Sep 2012, 01:04 AM

The javascript file and CSS need to be called only from the main page.

Thanks for giving this more thought!

Marc

**DrByte** · 15 Sep 2012, 02:52 AM

Then you could skip everything I mentioned earlier and stuff ALL of it into the define_main_page.php file.

The .css and .js file do not *need* to be in the <head>. It's just common to put it there. Things will load fine if it's all put inline into the place where it's all needed, especially since you only want it on one page.

**marcsullivan** · 17 Sep 2012, 02:21 PM

Sorry, DrByte, for taking a couple days to get back to you.

Your advice is absolutely, 100% correct, and the slideshow is working now.

Much gratitude for your help,
Marc

Thread: How to edit head section HTML of main page?

Thread Tools

Search Thread

Display

How to edit head section HTML of main page?

Re: How to edit head section HTML of main page?

Re: How to edit head section HTML of main page?

Re: How to edit head section HTML of main page?

Re: How to edit head section HTML of main page?

Re: How to edit head section HTML of main page?

Re: How to edit head section HTML of main page?

Re: How to edit head section HTML of main page?

Re: How to edit head section HTML of main page?

Similar Threads

v153 edit <head> of main page only for split testing

HTML not being accepted in main page edit

How do I edit html of main page?

how to edit this section of the page?

HELP! Main page <head></head>

Posting Permissions