tpl_header.php file additions with html

13 Sep 2007, 5:05 AM

#1

New Zenner

Join Date:: Sep 2007
Posts:: 6
Plugin Contributions:: 0

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

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.

13 Sep 2007, 8:00 AM

#2

kobra

Black Belt

Join Date:: Aug 2005
Location:: Arizona
Posts:: 31,500
Plugin Contributions:: 4

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

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

13 Sep 2007, 10:15 PM

#3

kitchen_table_legs

New Zenner

Join Date:: Sep 2007
Posts:: 6
Plugin Contributions:: 0

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

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.

13 Sep 2007, 11:40 PM

#4

drbyte

Sensei

Join Date:: Jan 2004
Posts:: 63,513
Plugin Contributions:: 177

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

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.

14 Sep 2007, 12:55 AM

#5

kobra

Black Belt

Join Date:: Aug 2005
Location:: Arizona
Posts:: 31,500
Plugin Contributions:: 4

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

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

<!--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:

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

18 Sep 2007, 8:36 PM

#6

kitchen_table_legs

New Zenner

Join Date:: Sep 2007
Posts:: 6
Plugin Contributions:: 0

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

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.

19 Sep 2007, 6:25 AM

#7

kobra

Black Belt

Join Date:: Aug 2005
Location:: Arizona
Posts:: 31,500
Plugin Contributions:: 4

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

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

19 Sep 2007, 12:41 PM

#8

kitchen_table_legs

New Zenner

Join Date:: Sep 2007
Posts:: 6
Plugin Contributions:: 0

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

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.

19 Sep 2007, 11:13 PM

#9

kobra

Black Belt

Join Date:: Aug 2005
Location:: Arizona
Posts:: 31,500
Plugin Contributions:: 4

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

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:

#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.

#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:

#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;
	}

20 Sep 2007, 6:26 AM

#10

kitchen_table_legs

New Zenner

Join Date:: Sep 2007
Posts:: 6
Plugin Contributions:: 0

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

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?

20 Sep 2007, 7:12 AM

#11

kobra

Black Belt

Join Date:: Aug 2005
Location:: Arizona
Posts:: 31,500
Plugin Contributions:: 4

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

You really need to go over your css and look at some of the css tutorial sites as you have calls/entries that are now allowed

i.e.

#logoWrapper{
	background-image: url(../images/top.gif); align: center;
	background-repeat: no;
	background-color: #000000;
	height:250px;

There is no align center or no for repeat...
backround-repeat: none; is correct I would suspect that you have others
You also have place holders for things that you are not using like the tagline that are taking space up

20 Sep 2007, 5:17 PM

#12

kitchen_table_legs

New Zenner

Join Date:: Sep 2007
Posts:: 6
Plugin Contributions:: 0

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

Oh, thanks, I will definitely go through some of tutorials.
that background-repeat error was just laziness on my part, i should have done that correctly and put the alignment in the div.

i went ahead and removed the

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

I don't really know what is in the code that is useless, since a lot of it came with the template.

Do you happen to know what would be the place holder beneath the #logowrapper that is created the gap before the #shopnav ?

21 Sep 2007, 3:53 AM

#13

kobra

Black Belt

Join Date:: Aug 2005
Location:: Arizona
Posts:: 31,500
Plugin Contributions:: 4

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

i went ahead and removed the

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}
This only removes the css styling for this div/tag and not the code that is inserting the space for it.
You can use the admin > tools > developers tool kit to find snippetts of text in the files and use Fire Fax and the web developers tools extention and many use the firebug extention to locate and determine what tags are there & where

21 Sep 2007, 7:09 AM

#14

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

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

Or you can change the tagline declaration to
#tagline {
display: none;
}

"that background-repeat error was just laziness on my part, i should have done that correctly and put the alignment in the div. "
The stylesheet is the correct place for things like specifying alignment - you just need to write it correctly:
text-align: center;