Newby needs to costumize

Hello, here are my details:

version 1.3.8a
first install
no addons
I have started a costume template and started dabbling around with the style sheet.
url: http://originoftheliquidman.com/fundraiser_zen/
trying to match design of site at www.originoftheliquidman.com

I am designing this Zen Cart site for a fundraiser for a short film and would like to integrate it into the films site at originoftheliquidman.com.

The products are photographic prints and I will eventually need to add options to the products for framing and sizes. I have added a few products to start getting an idea of the layout but would like to start customizing the design before getting into all the products and shopping cart details. I am thinking of using a lightbox add on.

I have been experimenting a bit with the style sheet and was able to put my design elements in the background.

I have looked through the forums and tutorials for the additional things I would like to do but I am not sure where or how to start. I also purchased the e-start your web site with zen cart manual but found limited instructions for customization.

I would love some help on how I should move forward, I am not a programmer and have little to no knowledge about HTML, CSS, or PHP except that I can follow instructions very well. I created the film site using Photoshop and go-live

maybe I am getting in over my head?

some of the things I would like to do is:

remove the main header bar where the logo and stuff is, I have no need for this part of the header.

place the home and log in links to the right of the "fundraiser" graphic on the background.

use the footer for the category links or move the category links bar to the bottom of the page to mimic where the links are on the rest of the site.

There are many other little things but this stuff should get me started. If there was a CSS resource for the stylesheet to tell me exactly what everything means there in reference to the visuals on the template, that would be great.

any recommendations on how to move forward would be wonderful.

Thanks,
Matthew

"remove the main header bar where the logo and stuff is, I have no need for this part of the header."

I tried this with the change logo tutorial editing the header.php file but could not get rid of everything completely, should I just delete the file all together?

ok, well, deleting it didn't work. back to square one, restored the file, will wait for replies.

To turn the header off, edit /includes/templates/your_template/common/tpl_main_page.php and follow the instructions in the comments.

PHP Code:

---

$flag_display_header = false; 


---

great! thanks for the quick reply. I did not have this file in my common directory, in fact my common directory is empty.

I copied the file over to my common directory. It says to copy it to
"templates/your_template_dir/pagename" is that the same as adding it to the common directory? I looked in the source code for $flag_display_header = true; but did not find it. Do I just add $flag_display_header = false; somehere?

It also says to edit the tpl_header.php to disable the header. I tried to add the code there after adding the file to my common folder but nothing happened.

Maybe what I am missing is where it says to "uncomment the following line" I am not sure what that means. Can you explain.

Sorry, thank you so much for your help so far.

Do I just add $flag_display_header = false; somehere?

Correct. Add it somewhere inside the php tags but not within the comment section. That is all you really need to do.
And since you want the header gone sitewide, you would copy the file into /your_template/common/. The /your_template_dir/pagename/ is for making the change only on a specific pagename.

Doesn't seem to be working... ?

Post the section of the file where you added that line (and a few lines before & after for context) so we can see if you did it right.

Ok Here it is:

// the following IF statement can be duplicated/modified as needed to set additional flags
if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes _on_here,separated_by_commas,and_no_spaces')) ) {
$flag_disable_right = true;

}

$flag_display_header = false;
$header_template = 'tpl_header.php';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']);
?>
<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>
<?php
if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
if ($banner->RecordCount() > 0) {

Oof... I was thinking "display header" when I said to use "false". You need "disable header" to be true.

That was it! feels good to get somewhere. Now, will I be able to put the "login" and "home" links somewhere else on the page? preferably specifically place them where ever I want? I also lost the category links bar, so i will need to have that on the page somewhere, maybe in the footer? I don't want to use the side box unless I have no other choice. Maybe I can make use of the drop down links add on...

THANKS!!

You could copy the cat-tabs code into tpl_footer.php if you want them there; or there are other files you could move the code to for various locations. The same goes for the login/home links.

I am not to confident about doing that but I will give it a try. Do I put the footer page into my custom template (my_template) common folder?

Correct. Then if you mess up, you can start over with a clean new copy from /template_default/common/.

Where is the cat-tabs code?

This section in /includes/templates/template_default/common/tpl_header.php calls the cat-tabs files:

PHP Code:

---

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

---

Copying this into /includes/templates/your_template/common/tpl_footer.php would probably do the job.

Looks like it worked but "<!--bof-optional categories tabs navigation display-->" is being displayed on the page...

woops... I saw what it was. I missed the first "<" with the copy and paste.

looks like the home link is on a different line but if I can get it on the top of the page where I want it, I will not need it on the footer. My next task will be to place the "home" and "log-in" links towards the upper right hand of the page. Which common page do I edit for this? The header page? Than how do I specify where it goes? with CSS?

Seems to be working fine now...

OK, you fixed it while I was reading your post:)

For the home/login/etc., you might want to put the code in tpl_main_page.php just above the breadcrumb code. You can adjust the position from there with CSS.

I tried looking for the code to use through the developers tool kit but I couldn't find it. what is the code for those links?

It is in tpl_header.php, in the
<div id="navMainWrapper">
section.

Ok, the log in link is on the page, I can't seem to position it with CSS without re-positioning other elements of the page. Maybe there is another CSS setting I could use. Do you know which one? Or could I just specify the position in the code? There is also the home link that I still need to add, I didn't see that one but I will keep hunting, maybe I didn't recognize it near the log in link code. Thanks!

Merry Christmas!

I have the links where I want them now. I entered the exact position in the code on the tpl_main_page.php file. I need to get rid of the bullet points and customize text and color. Not sure the best way to do that.

I also need to get rid of the home link on the bottom. couldn't figure that out. please let me know.

thank you so much for your help so far. I have been really impressed by Zen Cart so far. I started with the Wordpress e-commerce plugin but had a lot of problems with simple things.

I am looking forward to the end result with Zen Cart!

You have transplanted the link code without any identifiers, so it is hard to style specifically. Add an id to the div that holds the links, like

<div id="navLinks">

and then you can style in your stylesheet

Code:

---

#navLinks ul {
    list-style: none;
    font-family: arial verdana sans-serif;
    }

#navLinks a {
    color: #112233;
    }

---

Adjust to taste.

Note - you seem to have left out the opening <ul> tag, which you should have to start a list. Put it after the <div id="navLinks"> and before the first <li>. Actually, you have a lot of missing tags here. Assuming you want the three links in the upper right, you should change the code from what outputs this

Code:

---

<td id="navColumnOne" class="columnLeft" style="width: 0">
<div id="navColumnOneWrapper" style="width: 0px"></div></td>

 
<div style="position:absolute;top:100px;left:700px;width:140px;height:20px;-adbe-c:c">
<div align="left">
<li><a href="http://originoftheliquidman.com/fundraiser_zen/index.php?main_page=login">login/register</a></li>
<li><a href="http://originoftheliquidman.com/fundraiser_zen/">home</a></li>
<li><a href="http://originoftheliquidman.com">film</a></li>

    <td valign ="top">
 
<!-- bof  breadcrumb -->
<!-- eof breadcrumb -->

---

to what outputs this

Code:

---

<td id="navColumnOne" class="columnLeft" style="width: 0">
<div id="navColumnOneWrapper" style="width: 0px"></div></td>

 
    <td valign ="top">
 
<div id="navLinks" style="position:absolute;top:100px;left:700px;width:140px;height:20px;-adbe-c:c">
<ul>
<li><a href="http://originoftheliquidman.com/fundraiser_zen/index.php?main_page=login">login/register</a></li>
<li><a href="http://originoftheliquidman.com/fundraiser_zen/">home</a></li>
<li><a href="http://originoftheliquidman.com">film</a></li>
</ul>
</div>

<!-- bof  breadcrumb -->
<!-- eof breadcrumb -->

---

Ok, I did that. So basically I just created an identifier for those links that I can specifically control in a style sheet?

I will go to the CSS now (which I have been editing in Go-live) to see if I can find the definition to use for this. Or will I have to create a new definition sense we added these links and ID? I think that is what you where getting at with the first part of your post. reads like I need to create a new definition called #navlinks ul, navlinks a.

I will go check it out.

This was a great task, now I understand better how CSS works.

I created an id style called:

#navlinks ul li a

and a another id style called:

#navlinks a:hover

I was than able to customize the font, color, etc. and hover action but I still can't seem to get rid of those bullet points.

It is the <ul> or its <li> that has the bullets, so trying to eliminate them from the <a> element won't work - they don't belong to that.
You need a rule like

Code:

---

#navlinks ul {
    list-style: none;
    }

---

to remove the bullets.

(#navlinks ul { or #navlinks li { or #navlinks ul li { would all work; keeping the selector high-level and simple is a good practice.)

Cool, done. I added a style id #navlinks ul li and set the list style to none.

I now need to get rid of the home link at the footer. I imagine that is another simple task?

I found the code for that home link. It was pretty cryptic. It was:

<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>

on the tpl_footer.php template page. I just deleted it, I hope that was the right thing to do. seems ok so far.

If you deleted that last </li>, you have a hanging <li> still in the code. Go back and delete that so you have balanced tags.
Otherwise, you got it.

HAPPY NEW YEAR!!

Yeah, looks like i left one in there. I deleted it. I am moving forward with a bunch of other stuff and I think I will need help with the following:

1. Do not allow add to cart unless one of the values in each available attribute is selected.

2. Grid view for products category display

3. There is a page that comes up after you use the trash icon to empty a shopping cart. "Your shopping cart is empty, new products for January". I would rather the customer get sent back to the last product info page he/she was on or the last category product listing he/she was on.

4. I would like to use pop up lists for the links in the footer bar so that I can condense it and add more links like those from the information links side box. Any recommendations?

5. Is there a log out link anywhere that I can recycle and put with my list at the top of the page?

1: Use a dummy attribute in each set that says "Select" or whatever, and make that one "Default" and "Display Only" when adding it to the product.

2: Column Layout Grid mod in Free Addons.

3:...

4:Clydejones has a Footer Menu mod which may help you add links easily. I have also done an ez-page footer columns mod (not yet released) that will definitely let you add and organize links easily. To get a pop-up style, you would probably have to adapt one of the CSS dropdown/flyout menus or something else.

5: The header navbar has a logout link which is only active when a user is logged in, and you could adapt/transplant that code.

1: I used the "print only" attribute as the default and display only value added the print only price to the product as the product price, since that is the base price. However I am now getting an error message when adding print only to the cart. "invalid option values selected"

previously I had the product price at 0 and only priced the attributes.

The product I am trying this with is A-2-23 in the animals category.

You don't set a real option as Default/Display Only; make a new option value for the relevant option name (in Option Values Manager) called "Select" or whatever you like, and add that as an attribute with Default and Display Only.

Ok, I guess I just don't like the idea of having a value being displayed that is not usable, or maybe I am misunderstanding. Did you do that on your cart? I will take a look at it again.

On another note, I got the grid add on up and working. I would like to adjust the vertical spacing to my liking and change the vertical alignment per image to center. I haven't been able to figure that out.

yeah, I like your product info page. How you can only select one option, and the prices are attached to the option with no starting price. And one option always has to be selected. how did you set that up?

In my case, there is generally one basic version of the product that will be most likely to be chosen, and with the only price display on the options, confusion is minimized.

I set the basic option as Default, and enter the total price for each option attribute, with a blank instead of a + in the prefix field. This can easily become too complex to work; three either/or variables (silver/gold, pin/pendant, with/without stone) means eight buttons, which is about the limit of practicality. I would have a separate option set for with/without stone, except that that price difference is dependent on whether the piece is silver or gold.

You can hide the "Select" radiobutton with CSS because each button has a unique id, so it is possible to start with no visible selections, yet force a conscious choice to be made rather than rely on a default. This will be something like

#attrib12-34, #attrib12-34+label {display: none;}

to hide the Select button for that option set on every product.

Ok, I figured it out. It was just a matter of using the radio buttons instead of the checkbox and setting a default.

I have it set up the same as yours.

How did you get rid of the "Starting At:" field on your product info page?

I commented it out in the PHP file (4 years ago), but an easier way of doing it would be to add to your stylesheet

Code:

---

#productPrices {display: none;}

---

this is all I could find for the log off link code:

define('HEADER_TITLE_LOGOFF', 'Log Out');

I stuck in there a few different ways but nothing. It seems like there should be more to it than that.

That is not the link code, just the text display definition. It will be in tpl_header.php, in the navigation section, bundled with the Login and Checkout link code.

Found it, placed it, its working.

I would like to uncapitalize the text fro the link. Didn't the text in the code. How can I change that?

also, I am having some positioning issues from browser to browser. The position of these links and some other thinks I have moved around are different in Safari and Firefox, and possibly other browsers.

There is a help link on the shopping cart page that I would like to get rid of. I can't find the code...

The Log In text is capitalized in the source, so it is not an effect of styling. Perhaps double-check that the definition is not now capitalized?

The help link is javascript, so if you can find a call to that at the top of the tpl file, you may be able to remove it that way.
There is not a clear identifier for CSS to handle it by.

I found the text for the header links in the header.php file under:

header text in includes/header.php

I could than edit the text however I want for each link.

I got rid of the "help" in the tpl_shopping_cart_default.php file by deleting:

<?php echo TEXT_VISITORS_CART; ?></div>

I hope you didn't delete </div> unless you also deleted a <div> before the code you mention.

There was part of that line of code that I had to leave to keep the page intact so I added a </div> at the end of that.

Here are some other things I am having issues with.

1. I can't figure out how to adjust the vertical alignment for the product listing grid layout.

2. some of the elements I have repositioned in CSS or in the code are showing up very differently in firefox and safari. I have noticed it with my links in the upper right which I originally positioned in the code and the add to shopping cart icon which I repositioned with CSS.

Quote:

---

Originally Posted by mskala23

3. There is a page that comes up after you use the trash icon to empty a shopping cart. "Your shopping cart is empty, new products for January". I would rather the customer get sent back to the last product info page he/she was on or the last category product listing he/she was on.

---

I figured this out. I had to go to Configuration/stock in admin and turn off all the option that said "show xyz when cart is empty."

now a new page comes up that just says, "your cart is empty". which is fine.

Quote:

---

Originally Posted by mskala23

1. I can't figure out how to adjust the vertical alignment for the product listing grid layout.

---

still trying to figure this out. tried some CSS but nothing is happening...

tried adjusting the height of certain CSS ID's but nothing has targeted the ProductListing alone.

Add to your stylesheet

Code:

---

.centerBoxContentsProducts {height: 13.0em;}

---

Adjust to taste.

Rad! 13.0em was perfect! thanks!

I would like to put an image behind the "log in/join" and "home" navigation links at the top right of the page. How do I do that?

and... can I change the color of the background for the window that pops up with the large image when you click on the thumb on the product info page?

I tried a few things but again have failed:no:

hello Totally Zenned,

i am panicking right now because I just discovered my add to cart button isn't working. Please help, I hope I didn't loose you, thanks!