tpl_header.php file additions with html - wheres the css ?

**kitchen table legs** · 13 Sep 2007, 06:05 AM

Hi, in the tpl_header.php file I added an html section to create a series of links just below my header image. To try and control the way the text appears, I tried to link the html file to a css file within the /common/ folder that holds the tpl_header file. This did not work, though. I am not even sure if I went about this the right way, but it is appearing the way I would like, except for the text format/colors. Should I use inline css in the html part? Is there a better way to link to the css file to format the text?

Thank you for your help.

**kobra** · 13 Sep 2007, 09:00 AM

s there a better way to link to the css file to format the text?

Got little idea what you have added but in general - if you add some item try containing it a new div. Then in the style sheet you can add the div tag and styling

**kitchen table legs** · 13 Sep 2007, 11:15 PM

Here is the code I added:



<html>
<head>
<title>--__KITCHEN TABLE LEGS DESIGN__--__RICHMOND | VIRGINIA__-</title>
<meta http-equiv="Kitchen Table Legs" content="html/text; charset=iso-8859-1">
<meta name="keywords" content="independant art and design richmond virignia">
<meta name="description" content="-----art">

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

<LINK REL="SHORTCUT ICON" HREF="http://www.kitchentablelegs.com/ktl.ico">

</head>

<body>
<div align="left">
<p>
<a href="http://www.kitchentablelegs.com/main.html">HOME</a> <a href="http://www.kitchentablelegs.com/filter">ARCHIVES</a> <a href="http://www.kitchentablelegs.com/shop">SHOP</a> <a href="http://www.kitchentablelegs.com/about.html">ABOUT US</a> <a href="http://www.kitchentablelegs.com/contact.html">CONTACT</a> <a href="http://www.kitchentablelegs.com/links.html">LINKS</a>
</p>
</div>
</body>
</html>

hopefully that helps, i think that is with it in a div? so im not sure why it is not responding.

**DrByte** · 14 Sep 2007, 12:40 AM

Originally Posted by kitchen table legs

To try and control the way the text appears, I tried to link the html file to a css file within the /common/ folder that holds the tpl_header file. This did not work, though. I am not even sure if I went about this the right way, but it is appearing the way I would like, except for the text format/colors. Should I use inline css in the html part? Is there a better way to link to the css file to format the text?

The Zen Cart structure has the stylesheet in your /includes/templates/YOURTEMPLATE/css folder. Adding to the existing file or adding your own additional file named style_mine.css will allow you to not have to specify any additional references to stylesheets, since Zen Cart will auto-load them using this method.

**kobra** · 14 Sep 2007, 01:55 AM

If I am comprehending what you are seeking correctly then all that is required in the tpl file is the following and I have highlighted and named the div - Why? So that you can add styling to it in the stylesheet by tag name.
the rest of the html is not required as this is in other pieces that make up the page

Code:

<!--eof-header logo and navigation display-->
<br class="clearBoth" />
<div id="mydiv">
<p>
<a href="http://www.kitchentablelegs.com/main.html">HOME</a> 
<a href="http://www.kitchentablelegs.com/filter">ARCHIVES</a>
<a href="http://www.kitchentablelegs.com/shop">SHOP</a>
<a href="http://www.kitchentablelegs.com/about.html">ABOUT US</a>
<a href="http://www.kitchentablelegs.com/contact.html">CONTACT</a>
<a href="http://www.kitchentablelegs.com/links.html">LINKS</a>
</p>
</div>

You can then add to the stylesheet something like this or what ever you want:

Code:

#mydiv {
	color:#ffffff;
	font-size: 2em;
	text-align : center;
	vertical-align: middle;
	}

**kitchen table legs** · 18 Sep 2007, 09:36 PM

Great, thanks. That worked.

Last question (for now) : The area that holds these links creates a huge gap between the header img and the rest of the page. Since my text is only 10 px tall, is it possible to shrink the area that holds it? I assume this entire area is the tpl_header. Is there a height set for this space?

Thanks again.

**kobra** · 19 Sep 2007, 07:25 AM

I assume this entire area is the tpl_header. Is there a height set for this space?

This is the file name and not the css tag for this.

Post a url to this page

**kitchen table legs** · 19 Sep 2007, 01:41 PM

oh, ok. the page is located at http://www.kitchentablelegs.com/shop

the area with the nav links under the main image is what i'm trying to adjust. thanks.

**kobra** · 20 Sep 2007, 12:13 AM

You will most likely have to define height for navMainWrapper and the headerWrapper and a background color for same will start to get you where you want to be. So find this:

Code:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

Seperate the header out so that it looks like this and you can add and adjust the height by adding a height entry but I would first define one for the navMainWrapper.

Code:

#headerWrapper {
        background-color: #000000;
	margin: 0em;
	padding: 0em;
        }

#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

You will most likely have to also add this:

Code:

#shopnav {
	color:#333333;
	font-size: 10px;
	text-align : left;
	vertical-align: middle;
a:visited:color: #333333; text-decoration: none;
a:hover: color: #333333;
a:active: color: #333333;
	background-color: #CCDDBB;
	}

**kitchen table legs** · 20 Sep 2007, 07:26 AM

Ok, I think I'm getting it. I was able to bring the main section of the page up, but I can't seem to find what is creating the gap. It seems like it is a buffer between the main logo image, top.gif, and everything under it. I can bring the sidebars and center section up, but I can't figure out what will bring my nav links directly below the main image. Is there a height setting I'm missing?

Thread: tpl_header.php file additions with html - wheres the css ?

Thread Tools

Search Thread

Display

tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Re: tpl_header.php file additions with html - wheres the css ?

Similar Threads

I cant get the php include statement to work in the tpl_header file.

Error with tpl_header.php file. FILE ATTACHED PLEASE SOMEONE SPOT ERROR

Oops! Help with tpl_header.php file.

SEO url's. Wheres the file?

Help with html additions

Bookmarks

Bookmarks

Posting Permissions