How do I add a custom stylesheet to the template.

I added a static link to a stylesheet and external javascript file in html_header.php, but the files do not show up in the header after a browser request.

how do I add external js and css to the <head> tag

I also need to preload images in the body tag as well.

I am adding a custom drop down menu that covers non zen cart areas of the website.

I searched for answers but could not find them.

P.S. this is my very first Zen Cart project and this is my first day on the job. So I may be searching for the wrong answers.

Thanks in advance.:dontgetit

:dontgetitI removed the static stylesheet link and just dropped the css file in the CSS directory, but the file still does'nt load.

YOUR_TEMPLATE/common/html_header.php

..add a stylesheet on line 49.

Nimbuz:

YOUR_TEMPLATE/common/html_header.php

..add a stylesheet on line 49.

NO NO NO!!!!

You don't need to edit any files to add more stylesheets.

Just upload your stylesheet to the /includes/templates/YOURTEMPLATE/css folder.
Rename it so it starts with "styles" and ends with ".css", such as: "styles_mine.css"
It'll automatically load itself.

Don't make it more complicated than you need to.

Thanks byte! I dropped the stylesheet into the css folder and renamed the file beginning with style_XXX. It worked like a charm! Thanks a million!:laugh:

DrByte:

NO NO NO!!!!

You don't need to edit any files to add more stylesheets.

Just upload your stylesheet to the /includes/templates/YOURTEMPLATE/css folder.
Rename it so it starts with "styles" and ends with ".css", such as: "styles_mine.css"
It'll automatically load itself.

Don't make it more complicated than you need to.

Erm...sorry. I'm a noob too, just wanted to help. ;-)

Would this also work for adding css to a newsletter? (Just drop a stylesheet in the folder and link to it?) I'm trying to get my css styles into a newsletter, but it's still looking pretty bad...

contactfill:

Would this also work for adding css to a newsletter? (Just drop a stylesheet in the folder and link to it?) I'm trying to get my css styles into a newsletter, but it's still looking pretty bad...

At the present time, styles would have to be added to your email template in the /email folder.

Thanks for the info...

Sorry for being a newbie, but how would I do that in the /email folder? I did find where that is with several templates...

Am I just adding a new html file that I put just the <head> info in which includes the styles?

Prob. a step-by-step would work for me - or a place that has that already laid out...

Sorry for being a newbie, slowly working into getting around Zencart. Was already setup when I started working with it, so it's been a joy finding things! :-)

Thanks!

1. open the desired email template file in a text editor ... you'd need to download it to your PC via FTP first
2. make your changes to the file ... adding/changing CSS and HTML as needed
3. save the file
4. upload the file back to the server
5. repeat for all desired templates

Thanks for that process.. I think I got that down...

Looks like the templates in that folder have the variables defined, etc. Since I am pasting the html into the HTML content section, would I be altering the /email/[newsletter template] file to just pull the $CONTENT variable for the newsletter, since that would have all the content of the newsletter in it? (and then put the css into the top of that file?

Thanks again!

Check the /docs folder of your Zen Cart files ... there is information on how the email templates work there.

Ok, based on the doc folder for email templates, I think/thought I understood it... I altered the email_template_newsletters.html file to the below and it looks exactly the same when I preview it from the admin section (newsletter manager)... It appears that I did things right, not quite sure why this isn't looking right in the preview...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=$CHARSET" />
<base href="$BASE_HREF" />

<style type="text/css">
<!--
body,td,th {
	font-family: verdana;
	font-size: 10px;
}
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
}
.text1 {
	font-family: verdana;
	font-size: 10px;
	font-weight: normal;
	color: #CC3366;
}
.text2 {
	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #333333;
}
.text3 {
	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}
.text4 {
	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #5D1A5D;
}
.text4b {
	font-family: verdana;
	font-size: 10px;
	color: #5D1A5D;
}
.text5 {
	font-family: verdana;
	font-size: 10px;
	font-weight: normal;
	color: #666666;
}
.text6 {
	font-family: verdana;
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
}
.text4Copy {font-family: verdana;
	font-size: 10px;
	font-weight: normal;
	color: #567067;
}
.text51 {font-family: verdana;
	font-size: 10px;
	font-weight: normal;
	color: #000000;
}
.style14 {
	color: #990099;
	font-weight: bold;
	font-family: verdana;
	font-size: 10px;
}
.style21 {color: #FFFFFF;
	font-size: 10px;
}
.style25 {color: #333333}
.style10 {color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
}
.brder {
	border: 1px solid #CCCCCC;
}
.style26 {font-size: 10px; color: #000000; font-family: verdana;}
.text21 {	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #003333;
}
.text41 {	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #2EA642;
}
.text42 {	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #5D7D32;
}
.text43 {	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #FF4910;
}
.brder1 {	border: thin solid #ED1B24;
}
.text44 {	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #ED1B24;
}
.text421 {font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #FFCC00;
}
.style27 {	color: #FF6600;
	font-weight: bold;
	font-family: verdana;
	font-size: 10px;
}
.style28 {font-size: 10px; color: #999999; font-family: verdana;}
.text11 {	font-family: verdana;
	font-size: 10px;
	font-weight: normal;
	color: #CC6666;
}
-->
</style>

</head>

<body>
Dear $EMAIL_FIRST_NAME $EMAIL_LAST_NAME,
$EMAIL_MESSAGE_HTML


</body>
</html>

contactfill:

not quite sure why this isn't looking right in the preview...Try sending the newsletter to yourself for a real preview.
The newsletter preview in the admin area doesn't currently utilize the template. That may change in a future release.

Thanks for the info, just did that prob. as you were responding...

It still appears that it's not working... From what I can tell, there is something in the Zen Cart scripting that is either altering the html code I put into the box, or it doesn't like line breaks in the code - or tabs - and that is not allowing the styles and html code to appear properly...

Thanks for all the help, it's slowly getting a little better...

DrByte:

NO NO NO!!!!

You don't need to edit any files to add more stylesheets.

Just upload your stylesheet to the /includes/templates/YOURTEMPLATE/css folder.
Rename it so it starts with "styles" and ends with ".css", such as: "styles_mine.css"
It'll automatically load itself.

Don't make it more complicated than you need to.

On one of my sites I copied over stylesheet.css and started to edit it, but now wonder if that's a bad way to do it (considering future ZC upgrades)? Or do I really want to be changing mytemplate/css/stylesheet.css?

If I make a styles_mine.css, how am I sure it gets loaded -after- stylesheet.css? Just leave the original stylesheet.css in the default_template/css/ dir?

I know a fair bit of CSS but not 'the best methods' to handle this in ZC.

Filenames are sorted alphabetically before being linked.

DrByte:

Filenames are sorted alphabetically before being linked.

Sorry, I'm still confused about what I should do. Posts like
https://www.zen-cart.com/tutorials/index.php?article=142
say to copy over the stylesheet.css. I assumed that was so I would edit my CSS right in there. Or maybe that's just to get us newbie's up and running fast.

I am changing things like header height, h1 color, look of the horizontal menu, sidebox colors, maybe put an img in sideboxes/menu, etc.

When do I want to make a styles_mine.css? Always, once I have this understanding, or perhaps just in cases when I've added my own classes to the php? or?

THANKS!!

You have 3 options:

1. You can copy over the original stylesheet from classic if you like.
   Then you can edit it directly.

2. You can copy the classic stylesheet as a base, and then add your own stylesheet with your custom contents that override the entries in the existing one.

3. Or you can just start with a blank stylesheet and set up all your styles on your own, if you're so inclined.

Your choice. It's entirely up to you.

I know I'm dredging up an old thread here, but I have a similar question that wasn't addressed in the original exchange.

I too am adding site-wide navigation to the Zen Cart portion of the site. Unlike the OP in this thread though, I need to link to a stylesheet external to my Zen Cart installation. In this case, Zen Cart resides in appalshop.org/store and the stylesheet in question is located at appalshop.org/common/menu.css.

What is the recommended practice for accomplishing this? I see three options so far:

1. Override html_header.php and hard-code a link to menu.css (which under somewhat different circumstances DrByte was adamantly opposed to)
2. Begin my template's stylesheet.css with an @import pointing to menu.css
3. Create a new stylesheet in my_template/css called stylesheet_something.css and consisting solely of an @import pointing to menu.css