beginner asking layout about changes - how to

I been trying to search the forum but not been able to find following answares.

1. I need to have header image that is higher and wider than the original.
2. I need the center part of the page to be wider.
3. I need to edit product listing page so that I have several product images per row and price below image.

I am a coder but would need som direction how to proceed.
I have allready red the basic FAQ about hows to create own template.
Well it dont tell mutch how to do editing only how to make a start directory tree to build templates on.

marksu

Some solution I allready found.

Defining the height of the header pic.
#logoWrapper {
width:100%;
height:146px; /defining of hight of header image/
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-position:center;
text-align:center;
padding-top:5px;
}

How do i make the page wider so it covers the most of the monitor width?

Solution>

/wrappers - page or section containers/
#mainWrapper {
background-color: #FFFFFF;
text-align: left;
width: 90%; /this makes the hole site 90% of the monitor width/
vertical-align: top;
}

How to have product list display several products in a row?

Solution>

Install module named Column Layout Grid for Product Listing

donload http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_47&products_id=77

Good for you for finding these by yourself!

You should also edit /includes/languages/english/header.php (save as /includes/languages/english/your_template/header.php) to set the logo height and width, and other important items.

Interesting file that header.php my next task was to figure out the logo editing.
For current template I have the logo integrated in header image so the logo image is a bit unnecessary.

Is there a was way to disable the logo.

editing header.php
define('HEADER_ALT_TEXT', '');
define('HEADER_SALES_TEXT', '');
define('HEADER_LOGO_WIDTH', '192px');
define('HEADER_LOGO_HEIGHT', '64px');
** define('HEADER_LOGO_IMAGE', '');**

Well that in firefox looks OK but in IE it shows red cross.
Well sure I can edit the logo.gif to be one transparent pixel, but is there no disable feature.
Just curious.

EDIT:

Well maybe best way to do it trough css adding
#logo {display: none;}

Or is there a separate disable property?
Well I am just curious.

marksu

gjh42:

Good for you for finding these by yourself!

You should also edit /includes/languages/english/header.php (save as /includes/languages/english/your_template/header.php) to set the logo height and width, and other important items.

The CSS display: none; works fine, or you can comment out the logo display code in /includes/templates/your_template/common/tpl_header.php (the <!--bof branding display--> section).

Thank you for that info.

marksu

gjh42:

The CSS display: none; works fine, or you can comment out the logo display code in /includes/templates/your_template/common/tpl_header.php (the <!--bof branding display--> section).

Hi,

I know this is gonna sound stupid but i've gone to the stylesheet.css and the coding appears completely different. For example:

stylesheet.css
File Type: ASCII C program text, with very long lines, with CRLF line terminators

/**

• Main CSS Stylesheet
• @package templateSystem
• @copyright Copyright 2003-2005 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
• @version $Id: stylesheet.css 5347 2006-12-22 20:26:09Z birdbrain $
  */

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #e5edf5;
}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
color: #3300FF;
text-decoration: none;
}

a:visited {
color: #3300FF;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000;
}

a:active {
color: #0000FF;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.3em;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}

Is em the sizing? Everything else on the forums are in px.

Help this stupid person......please!

Now you are talking about font size. Not quit what my thread is about but..

em is a font size that can be used instead of px.
Em is a relative fonts size.
If you use em to set font users can change the font size on page directrly from browser menu.

Using px the font size is always fixed.

Next time better to start own thread.
If you still are confused I would succest to google "font size em".

marksu

Sorry :-(