Need to change core files for this?

I'm a newbie to Zen Cart and not sure of the best way to accomplish the look that I want.

A good example of what I'd like to accomplish can be found here: johnfaulkner.co.uk

It's a clean, simple look. I'm not sure if I'd have to modify core files. I'm hoping that no core files will have to be touched since that will make upgrades difficult.

What are the best methods for accomplishing this?

1. Create a new template (which I started)
2. ?

Created using zencart with sideboxes turned off.
Not difficult to achieve similar/same layout.

I doubt if any 'core' files (those which can't be overridden in your custom template) were edited to build that site, so creating that custom template would be your first task, then fiddling around in admin turning things on and/or off, then editing files to make things look exactly the way you want.

Thanks! I already turned off all of the sidebars ... forgot to mention that in the original post.

However, when I compared the example's HTML to mine (what was left after turning off all of the sidebars), the result is very different.

The model website removed some IDs. Not sure how to do that without touching core files.

For example, the model site's HTML looks like this:

<body id="indexHomeBody">
<div id="mainWrapper">
<!--bof-header logo and navigation display-->
<div id="headerWrapper">
<div id="headerContent">
<!-- <div id="nameWrapper"></div>  -->
<!-- <div id="taglineWrapper"></div> -->
</div><!-- headerContent -->
<div id="headerpic">
<div id="slogan">

and my default HTML looks like this:

<body id="indexHomeBody">
<div id="mainWrapper">
<!--bof-header logo and navigation display-->
<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><a href="http://sitename.com/zenner/">Home</a></li>
</ul>
</div>
<div id="navMainSearch"></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--bof-branding display-->
<div id="logoWrapper">

So, how does one modify the HTML? Is it by modifying the associated PHP files for the template (i.e. ? /templates/tpl_index_default.php)?

Thanks.

Start with this section of the tutorials/FAQ:

https://www.zen-cart.com/tutorials/index.php?category=4

Thanks!

I started editing the template php files directly. This particular article answers my question:

https://www.zen-cart.com/tutorials/index.php?article=132

There's no particular reason to follow the exact custom div/classname structure of that site. You can do it using mostly the stock tpl_header.php elements with a few things commented out. The ez-pages header bar will handle the navigation links just like that site, using only admin settings and stylesheet tweaks.

Great tip! Thanks!!!! :clap:

How can I edit one of my previous posts? There's no edit button ...

You can only edit posts for 7 minutes. This is largely to keep the thread question & answer structure intact; if you went back much later and changed a question, the following replies would make no sense.

Good to know. Thanks!

I'll give you some more detailed pointers in the forum; if you think you can't do it yourself from there, feel free to hire someone to do it for you.
You say you have done everything you can, but without detailed info on what you have done (and seeing it live) I can't tell you exactly what else to do. In the header navigation section, you can comment out any links or link groups you don't want. You shouldn't remove any of them unless you replace them with equivalent links somewhere else convenient for users.

You can comment out either the logo or tagline section, depending on what you want to use for site branding. If you want plain text like the example site, comment the logo and edit the tagline define as desired.

Enable the ez-pages header bar in Configuration > EZ-Pages Settings > EZ-Pages Display Status - HeaderBar, and make "internal links" ez-pages for each link you want in that row. If you want a - instead of the standard :: link separator, change EZ-Pages Header Link Separator from  ::  to  - 

Any further styling would require seeing your site live to advise.

I just stumbled upon gjh42's post by mistake. I wasn't emailed a notification of it.

I'll give you some more detailed pointers in the forum;

It's appreciated but your notes aren't as detailed as you think.

For example: ```
[B] In the header navigation section,[/B] you can comment out any links or link groups you don't want.

YOU know what you meant by *the header navigation section*, but many newbies seeking help would not know which file you were referencing.  I'm assuming you're referring to the /common/tmp_header.php file.

Details like that make a big difference.

Documentation is out there but it's still frustrating to some people how to create a different layout other than the obvious ways through the panel like turning off columns and changing the link separator types.

The key to a totally different layout with no columns is:

1. knowing CSS and arranging CSS divs accordingly.

2. understanding the overrides system completely and which php files to modify.   I believe that most of the customization would be done within /CUSTOM/common/ folder and /CUSTOM/languages/ in addition to the admin panel.

3. Knowing how to work around the PHP code to modify those sections.

I can and will do all of the above. I'm experienced enough with CSS, HTML and PHP enough to figure it out. 

But I still wish that the HTML was separate from the PHP and not so hard-coded.  It would make complete customization for different layouts faster and easier IMO.

I didn't say I was going to give a complete detailed tutorial for newbies in one post... I assumed from your posts that you had read my previous comment > You can do it using mostly the stock tpl_header.php elements with a few things commented out. and knew which file to edit and how to use the override system from other tutorials.

There is a limit to how much the HTML can be separated from the PHP if you have dynamic content being served, including elements that may or may not be present and in differing quantities or combinations depending on conditions.

Within the /common folder, I think the key documents to edit are:

tpl_header
tpl_main_page
tpl_footer

I think editing the main_page for the whole thing or the middle content is the key but haven't experimented with it yet.

I created a signature but it isn't showing up yet. Does it have to be approved first or something?

Actually, tpl_main_page.php does not directly affect most of the center column (main) content; it calls for $body_code which is set elsewhere according to what kind of page is being handled. It can be crucial for certain kinds of customization.

I see the sig. Maybe you need to refresh or clear cache or something?

So, if I understand you correctly, $body_code is what can be crucial to customization?

I haven't seen that mentioned anywhere yet.

I refreshed the page and still don't see the siggy so I guess I will see it when I exit the forum and re-enter it.

Thanks.

$body_code is just the variable name that holds the filename or content. You would not edit $body_code directly anywhere; you would edit the appropriate module file for the page type.

OK, I see what you were thinking...

tpl_main_page.php ... can be crucial for certain kinds of customization.

Unless I'm mistaken, it appears that $body_code is not directly editable because it's a formula:

Line #19 : $body_code = DIR_WS_MODULES . 'pages/' . $current_page_base . '/main_template_vars.php';

Line #21 : $body_code = $template->get_template_dir('tpl_' . preg_replace('/.php/', '',$_GET['main_page']) . 'default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl' . $_GET['main_page'] . '_default.php';

Your post crossed with mine above.

You would not edit $body_code directly anywhere; you would edit the appropriate module file for the page type.

By "appropriate module file", I'm assuming you are referencing the /common template files ... or one of the specific php files in the template directory?