Very critical page layout issues

[vishalon]

I am using Zen Cart 1.3.8a I made lots of changes on my home with the help and guidance of this forum. Now again I stuck on few things

1. I want to remove Links
EZPages :: Privacy Notice :: Shared :: Zen Cart From TOP
and
:: My Account :: Site Map :: Privacy Notice :: Shared :: Action DVDs From Bottom

2. I want to shift the header at top. On top there should not be any black space

3. I want to put
Username with textbox
Password with textbox
beside the company logo (right aligned)

I have my own CSS which I used in my actual layout how I can use my CSS settings in Zen cart's home page

Please refer the image attached... Can any body give me

Regards and thanx

[Graphic Content]

Hi There,

Is the site on a server at the moment or local?

If it's on a server post the URL.

Thanks
Matt

[vishalon]

Thanx for considering my problem, but unfortunately I am not uploaded site on my server till now I am learning on localhost.

Can my problem have any solution, please help me. Here is my own css, Which I am using for my design... How can I use my tags in Zen Cart

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #D1E9A3;
	background-repeat: repeat-x;
	background-color: #000000;
	background-image: url(images/img01.gif);
}
#main{
	height: auto;
	width: 980px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #FFFFFF;
}
#cantaner{
	height: auto;
	width: 963px;
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
}



/* Header */

#header {
	width: 980px;
	height: 140px;
	margin: 0 auto;
	background: #D1E9A3 url(images/img02.gif) repeat-x;
}
#logoarea{
	height: 100px;
	width: 970px;
}
#logo {
	float: left;
	height: 95px;
	color: #36393D;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
	background-image: url(images/oemXterra.gif);
	background-repeat: no-repeat;
	width: 300px;
	margin-left: 20px;
	margin-top: 0px;
}

#logo h1 {
	padding: 20px 0 0 0;
	background-image: url(images/oemXterra.gif);
}

#login{
	float: left;
	height: 70px;
	width: 250px;
	font-family: Arial;
	font-size: 10px;
	color: #333333;
	text-decoration: none;
	margin-top: 10px;
	margin-left: 365px;
}
#logo a {
	text-decoration: none;
	color: #36393D;
}
#tag {
	height: 35px;
	width: 200px;
	margin-top: 65px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	margin-left: 40px;
	margin-right: 60px;
}



#search{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	background-color: #91a763;
	height: 23px;
	width: 959px;
}

.Search{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	padding-left: 8px;
}


#menu {
	clear: both;
	height: 40px;
	background-image: url(images/img09.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}

#menu ul {
	height: 28px;
	padding: 12px 0 0 20px;
	background: url(images/img08.gif) no-repeat left bottom;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	padding: 0 20px;
	background: url(images/img06.gif) no-repeat left center;
	text-decoration: none;
	font-weight: bold;
	color: #36393D;
}

#menu a:hover {
	text-decoration: underline;
}

#menu .current_page_item a {
	background: url(images/img07.gif) no-repeat left center;
	color: #B42600;
}
#helpbox{
	height: auto;
	border: 1px solid #DAEDB5;
	margin-left: 5px;
	width: 650px;
	background-color: #f7fdea;
}
#help{
	height: auto;
	width: 600px;
	border-top-color: #DAEDB5;
	border-right-color: #DAEDB5;
	border-bottom-color: #DAEDB5;
	border-left-color: #DAEDB5;
	padding-left: 30px;
}

#imagetextbox{
	height: 110px;
	width: 250px;
	border: 1px solid #D4EAAA;
	margin-top: 5px;
	margin-left: 3px;
}
#showimage{
	width: 240px;
	text-align: center;
	margin-left: 4px;
	height: 80px;
}
/* Page */

#page {
	width: 980px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	background-color: #FFFFFF;
}

.headingtext{
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
.headingtext a{
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
.headingtext a:hover{
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: underline;
}

/* Footer */

#footer{
	height: 71px;
	width: 980px;
	background-image: url(images/footer.gif);
	font-family: Arial;
	font-size: 12px;
	color: #333333;
	background-repeat: repeat-x;
}
#footerarea{
	float: left;
	height: 30px;
	width: 560px;
	padding-top: 25px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 225px;
}
.footertext{
	font-size: 11px;
	font-weight:normal;
	font-family: Arial;
	color: #333333;
}

.footertext a{
	font-family: Arial;
	font-size: 11px;
	font-weight: normal;
	color: #333333;
	text-decoration: none;
	padding-bottom: 5px;
	padding-left: 5px;
}

.footertext a:hover{
	text-decoration: underline;
}


#notice{
	font-family: Arial;
	font-size: 12px;
	color: #333333;
	text-decoration: none;
	background-image: url(images/notic.jpg);
	background-repeat: no-repeat;
	height: 190px;
	width: 240px;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 30px;
}


#formbox{
	height: auto;
	border: 1px solid #DAEDB5;
	margin-left: 5px;
	width: 600px;
}
#formbox2{
	height: auto;
	border: 3px solid #c6d6a8;
	margin-left: 10px;
	width: 915px;
	background-color: #f7fdea;
}


#loginmid{
	background-image: url(images/mid_05.gif);
	background-repeat: repeat-x;
	height: 152px;
	width: 290px;
}
.logintext{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #333333;
	padding-top: 10px;
	padding-right: 5px;
	padding-left: 6px;
}
.loginnormaltext{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-top: 2px;
	padding-left: 10px;
	color: #000000;
	text-decoration: none;
}
.loginnormaltext a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-top: 2px;
	padding-left: 10px;
	color: #000000;
	text-decoration: none;
}
.loginnormaltext a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-top: 2px;
	padding-left: 10px;
	text-decoration: underline;
	color: #000000;
}
.formtext{
	font-family: Arial, Helvetica, sans-serif;
	color: #394423;
	font-size: 12px;
	font-weight: 400;
	padding-top: 3px;
	padding-left: 5px;
}
.formheadtext{
	font-family: Arial, Helvetica, sans-serif;
	color: #394423;
	font-size: 16px;
	font-weight: 800;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 12px;
}
.star{
	font-family: Arial, Helvetica, sans-serif;
	color: #FF0000;
	font-size: 16px;
	font-weight: 800;
}
.username{
	font-family: Arial, Helvetica, sans-serif;
	color: #FF0000;
	font-size: 14px;
	font-weight: 800;
}
.tr{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D6EBAE;
	padding-bottom: 5px;
	padding-top: 5px;
}
#box{
	height: 150px;
	width: 300px;
	border: 1px solid #c6d6a8;
	margin-left: 10px;
}
.normaltext{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	text-decoration: none;
	padding-right: 2px;
	text-align: justify;
}
.normaltext a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 0px;
	text-decoration: none;
}
.normaltext a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 0px;
	text-decoration: underline;
}
#box2{
	height: auto;
	width: 900px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #c6d6a8;
	border-right-color: #c6d6a8;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#box2 .tdcolour{
	font-family: Arial;
	font-size: 11px;
	color: #000000;
	background-color: #DBEDB7;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
	height: auto;
	width: auto;
	font-weight: bold;
}
#box2 .td{
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
	background-color: #FFFFFF;
}
#box3{
	height: 150px;
	width: 400px;
	margin-left: 10px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #c6d6a8;
	border-right-color: #c6d6a8;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
}
#box4{
	height: auto;
	width: 580px;
	margin-left: 10px;
	padding-left: 30px;
	padding-right: 8px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #c6d6a8;
	border-right-color: #c6d6a8;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
}

#box5{
	height: auto;
	width: 610px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #c6d6a8;
	border-right-color: #c6d6a8;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#box5 .tdcolour{
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	background-color: #DAEDB4;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
}
#box5 .td{
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
	background-color: #FFFFFF;
}

#box7{
	height: auto;
	width: 890px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #c6d6a8;
	border-right-color: #c6d6a8;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#box7 .tdcolour{
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	background-color: #DAEDB4;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
}
#box7 .td{
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
	background-color: #FFFFFF;
}


#box6{
	background-color: #f7fdea;
	border: 1px solid #c6d6a8;
}

.parttext{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #059CFC;
	text-decoration: none;
	padding-top: 6px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
}
.row{
	border-right-color: #c6d6a8;
	border-bottom-color: #c6d6a8;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
}

#box8{
	height: auto;
	width: 936px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #c6d6a8;
	border-right-color: #c6d6a8;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 13px;
}
#box8 .tdcolour{
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	background-color: #DAEDB4;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
}
#box8 .td{
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #c6d6a8;
	border-left-color: #c6d6a8;
	background-color: #FFFFFF;
}
.price{
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: bold;
	color: #FF0000;
}
.pricecolor{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #3399FF;
	background-color: #FFFFFF;
	padding-left: 4px;
}

.price2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FF0000;
	text-decoration: none;
}
.smalltext{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	text-decoration: none;
	padding-left: 18px;
}
.smalllinktext{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	text-decoration: none;
	padding-bottom: 5px;
}
.smalllinktext a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	text-decoration: none;
	padding-bottom: 5px;
}
.smalllinktext a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	text-decoration: underline;
	padding-bottom: 5px;
}
.bule{
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	color: #0033CC;
	text-decoration: none;
}
.bule a{
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	color: #0033CC;
	text-decoration: none;
}
.bule a:hover{
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	color: #0033CC;
	text-decoration: none;
}
.linkpath{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0099FF;
	text-decoration: none;
}
.linkpath a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0099FF;
	text-decoration: none;
}
.linkpath a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0099FF;
	text-decoration: underline;
}

Thank you again with Regards

[Graphic Content]

Hi there,

yeah of course.

You need to go into your /includes/your_template/common/tpl_header.php and find -

<div id="navMain">
    <ul class="back">
    <li><?php //echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php //echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>

This contains your login box. simply cut and paste it into your

<div id="logoWrapper">

and then apply float:right;

in your css

That should do the trick. Regarding the space at the top I would suggest if you don't have it already get the 'Fire Fox' developers add-on (firebug) you can then edit your CSS live on the server and with a little play of the margins and padding you should be able to get rid of the space.

Let me know how you get on.

Thanks
Matt

[Graphic Content]

Oh sorry I forgot for your EZpages header links go to -

ADMIN > CONFIGURATION >EZ-PAGES SETTINGS > EZ PAGES DISPLAY STATUS and set it to 0.

That will remove the links.

Matt

[vishalon]

Hi Matt

I tried as per your instructions please see the changed code
C:\xampplite\htdocs\oemxtrade\includes\templates\template_default\common\tpl_hea der.php
Red colored code is for my Logo which is on my page.

<div id="logoWrapper">
   [COLOR="Red"] <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . 

zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, 

HEADER_ALT_TEXT) . '</a>'; ?>
[/COLOR]
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; 

?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
</div>

Nothing happen Matt...

Please do something