Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Redesigning my header


Comesticage

Recommended Posts

Posted

Hello all,

 

Initially, i customized this template_top.php (because i decided not to use header.php) and focus on it.

 

The end result.. oxytarm-ap.com

 

I manage to change the background of the entire website to a light blue tone and keeping the content and wrapper to be white -> this achieves a tiny winy improvement that my website is not "floating"

 

My next aim, is to redesign the header. I am green with envy to change the design to something like "evolution-slimming.******com/ (remove ****** to see)

 

- have a nice background to my header, focusing on my brand and spreading across the screen (filling up the grid, edge to edge)

- nice fonts

- new 3 buttons, beautiful icons

- nice drop down menu

 

Any good suggestions on this customization project?

 

I think a professional feel to a ecommerce website lies greatly in the header and footer (my next project).

 

TIA!

 

Regards,

 

<?php
/*
 $Id$
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2010 osCommerce
 Released under the GNU General Public License
*/
 $oscTemplate->buildBlocks();
 if (!$oscTemplate->hasBlocks('boxes_column_left')) {
   $oscTemplate->setGridContentWidth($oscTemplate->getGridContentWidth() + $oscTemplate->getGridLeftColumnWidth());
 }
 if (!$oscTemplate->hasBlocks('boxes_column_right')) {
   $oscTemplate->setGridContentWidth($oscTemplate->getGridContentWidth() + $oscTemplate->getGridRightColumnWidth());
 }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?>>
<head>
<?php
/*** Begin Header Tags SEO ***/
if ( file_exists(DIR_WS_INCLUDES . 'header_tags.php') ) {
 require(DIR_WS_INCLUDES . 'header_tags.php');
} else {
?>
 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
 <title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>
<?php
}
/*** End Header Tags SEO ***/
?>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<link rel="stylesheet" href="/shop/catalog/ext/jquery/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/shop/catalog/ext/jquery/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<!--link rel="stylesheet" type="text/css" href="ext/jquery/ui/newpink/jquery-ui-1.10.3.custom.css" /-->
<!--link rel="stylesheet" type="text/css" href="ext/jquery/ui/newpink/jquery-ui-1.10.3.custom.css" /-->
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/bluepink/jquery-ui-1.8.24.custom.css" />
<script type="text/javascript" src="/shop/catalog/ext/simpletreemenu/simpletreemenu.js"></script>
<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>
<?php
 if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
?>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
 }
?>
<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<?php
 if ($oscTemplate->getGridContainerWidth() != '24') {
 $oscTemplate->setGridMarginWidth(20);
 }
 if (defined(MODULE_960GS_CSS_DEVELOPER_COLUMNS_STATUS) && MODULE_960GS_CSS_DEVELOPER_COLUMNS_STATUS == 'True') {
?>
<style>
#bodyWrapper<?php echo $oscTemplate->getBlocks('960grid_css_developer'); ?> {
 background: url("ext/960gs/grid_draw.php?w=960&c=<?php echo $oscTemplate->getGridContainerWidth(); ?>&m=<?php echo $oscTemplate->getGridMarginWidth(); ?>") repeat-y scroll 0 0 transparent;
}
</style>
<?php
 }
?>
<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_<?php echo $oscTemplate->getGridContainerWidth(); ?>_col.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<?php echo $oscTemplate->getBlocks('header_tags'); ?>


	 <style>

	 <style type="text/css">  
	  #topBarMenu{
	   vertical-align:text-top;				   
	  }

	  a.menuLink{					
	   color:#666666;
	   font-size:15px;		  
	   vertical-align:text-top;		  
	   text-decoration: none;
	  }

	  a.menuLink:hover
	  {
	   background-color:white;
	   text-decoration: none;
	   color:#3399CC;	 
	   /*font-weight:bold;*/
	  }		  

	  td.menuLinkTD{
	   text-align: center;
	   font-weight:bold;
	   text-decoration: none;

	   /* IE10 */
	   background-image: -ms-linear-gradient(top, #DEDEDE 0%, #FEFEFE 100%);
	   /* Mozilla Firefox */
	   background-image: -moz-linear-gradient(top, #DEDEDE 0%, #FEFEFE 100%);
	   /* Opera */
	   background-image: -o-linear-gradient(top, #DEDEDE 0%, #FEFEFE 100%);
	   /* Webkit (Safari/Chrome 10) */
	   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DEDEDE), color-stop(1, #FEFEFE));
	   /* Webkit (Chrome 11+) */
	   background-image: -webkit-linear-gradient(top, #DEDEDE 0%, #FEFEFE 100%);
	   /* Proposed W3C Markup */
	   background-image: linear-gradient(top, #DEDEDE 0%, #FEFEFE 100%);

	   border: 1px solid black; border-color: #EEEEEE; border-style:solid; border-width: thin	  
	  }

	  td.menuLinkTDHover{
	   text-decoration: none;
	   font-weight:bold;
	   text-align: center;
	   background-color:white;		  
	   border: 1px solid black; border-color: #EEEEEE; border-style:solid; border-width: thin	  
	  } 








/*popupmenu stuff*/
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 100%;
	   color:#666666;
	   font-size:15px;		  
	   vertical-align:text-top;		  
	   text-decoration: none;

text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #FFFFFF
color:#3399CC;
}
#sddm div
{
z-index:1000;
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #FFFFFF;
border: 1px solid #DDDDDD}
#sddm div a
{ position: relative;
 display: block;
 margin: 0;
 padding: 5px 10px;
 width: auto;
 white-space: nowrap;
 text-align: left;
 text-decoration: none;
 background: #F8F8F8;
 color: #666666;

	   border: 1px solid black; border-color: #EEEEEE; border-style:solid; border-width: thin   
 }
#sddm div a:hover
{ background: transparent;
 color:#3399CC;} 




/* nivo slider stuff */
.theme-default #slider {
   margin:100px auto 0 auto;
   width:618px; /* Make sure your images are the same size */
   height:246px; /* Make sure your images are the same size */
   margin:5px auto 0 auto;
   width:780px; /* Make sure your images are the same size */
   height:300px; /* Make sure your images are the same size */
   z-index:0;  
}

/* for general text styles */	   
TD.oxytarm_infoText {
 font-family: Verdana, Arial, sans-serif;
 /*font-size: 12px;*/
 font-size: 15px;
 /*font-weight: bold;*/
 background: #F8F8F8;
 color: #666666;
}

Table.oxytarm_infoTable {
 font-family: Verdana, Arial, sans-serif;
 /*font-size: 12px;*/
 font-size: 15px;
 /*font-weight: bold;*/
 background: #F8F8F8;
 color: #666666;
}		 
a.oxytarm_infoLink{					
color:#666666;		   
font-weight:bold;
text-decoration: none;
} 
a.oxytarm_infoLink:hover
{
background-color:white;
text-decoration: none;
color:#3399CC;	  
}

	 </style>
	 <script type="text/javascript" language="Javascript1.2">
			   <!--
				 function clearThis(it){
				   it.value = "";
				 }
			   //-->



<!-- popup menu stuff
// Copyright 2006-2007 javascript-array.com
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
 window.clearTimeout(closetimer);
 closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
-->				  
	 </script>
</head>
<body>
	 <div id="headerPictures" class="container_24">				  
<table width="100%">
<tr>
<td width = "40%">
 <a class="menuLink" href="/shop/catalog/ordering.php"><b>Order via Online or Phone + 65 9876 6045!</b></a></li>
<?php include(DIR_WS_MODULES . 'newsletter_footer.php'); ?>
 <p align="centre"></p>
   </td>
<td width = "60%">
   <div id="headerShortcuts">	  
  <?php
 echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
   tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
   tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));
 if (tep_session_is_registered('customer_id')) {
   echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
 }
  ?>


  <!--form name="quick_find" method="get" action="./advanced_search_result.php"  style="width=200px; height=100px; border: 1px solid black; border-color: #DDDDDD; border-style:solid; border-width: thin"-->	  

   <!--input type="text" style="width=200px; border: none" name="keywords" size="15" maxlength="50" style="width: 110px" value="Search..." onfocus="clearThis(this);" style="width: 90px"-->
   <!--input type="image" style="width=200px; border: none" src="../pics/search.gif" alt="Quick Find" title="Quick Find"-->
   <!--input type="checkbox" name="search_in_description" alt="Search in descriptions" title="Search in descriptions" value="1"-->
  <!--/form-->


  <form name="quick_find" method="get" action="http://www.google.com/search"  style="width=200px; height=100px; border: 1px solid black; border-color: #DDDDDD; border-style:solid; border-width: thin">
    <input type="image" value="Google Search" style="width=200px; border: none" src="../pics/search.gif" alt="Quick Find" title="Quick Find">
   <input type="hidden"  name="sitesearch" value="oxytarm-ap.com/" checked />
  </form>
		    </div>
</td>
</tr>
</table>

<table width="100%">
<tr>
<td width = "20%">
 <img border="0" src="./../pics/logo.JPG" alt="Oxytarm" width= "180px;"/>
</td>
<td width = "80%">

	   <table cellpadding="0" cellspacing = "0" width="100%" height="18px" style="background-color: #EFEFEF; border: 1px solid black; border-color: #EEEEEE; border-style:solid; border-width: thin">

   <tr>
  <td width="13%" class = "menuLinkTD" onmouseover="className='menuLinkTDHover'" onmouseout="className='menuLinkTD'"><a class="menuLink" href="http://oxytarm-ap.com/shop/catalog/Home.php">Home</a></td>
  <td width="15%" class = "menuLinkTD" onmouseover="className='menuLinkTDHover'" onmouseout="className='menuLinkTD'"><a class="menuLink" href="http://oxytarm-ap.com/shop/catalog/AboutUs.php">About Us</a></td>
  <!--td class = "menuLinkTD" onmouseover="className='menuLinkTDHover'" onmouseout="className='menuLinkTD'"><a class="menuLink" href="http://oxytarm-ap.com/shop/catalog/PromotionSales.php">Promotion Sales</a></td-->
  <td width="17%" class = "menuLinkTD" onmouseover="className='menuLinkTDHover'" onmouseout="className='menuLinkTD'">

    <ul id="sddm">
  <li>   
   <a class="menuLink" href="http://oxytarm-ap.com/shop/catalog/Home.php"
   onmouseover="mopen('popupmenu')"
   onmouseout="mclosetime()">
 Products</a>  
   <div id="popupmenu"
 onmouseover="mcancelclosetime()"
 onmouseout="mclosetime()">
   <!--a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=31">2-In-1 Value Pack</a-->
   <a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=42"><span style="color:#00ff66;">*NEW* Soursop Extract Plus+</span></a>			   
		    <a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=29"><img alt="heart" height="20" src="http://htmleditor.in/ckeditor/plugins/smiley/images/heart.gif" title="heart" width="20" />PROMO<img alt="heart" height="20" src="http://htmleditor.in/ckeditor/plugins/smiley/images/heart.gif" title="heart" width="20" /> - Oxytarm </a></p>
 <a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=35"><font color="red">*HOT*</font> Raspberry Ketone Plus+ <font color="red">*HOT*</font></a>
		    <a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=30">Sucobloc</a>
   <a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=32"><font color="blue">BUY NOW!</font> SECRETcombo®</a>
   <a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=34">BELIEVEuCan®</a>
						   <a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=36"><font color="red">*HOT*</font> PERFECTmatch® <font color="red">*HOT*</font></a> 
		    <a href="http://oxytarm-ap.com/shop/catalog/product_info.php?products_id=37"><font color="blue">MOST POPULAR!</font> 3X FASTresults® </a>

		    </div>
  </li>		   
    </li>
    </ul>			 
  </td>
  <td width="28%" class = "menuLinkTD" onmouseover="className='menuLinkTDHover'" onmouseout="className='menuLinkTD'"><a class="menuLink" href="http://oxytarm-ap.com/shop/catalog/Guides.php">Guides / Tips <br/> Healthy Lifestyle</a></td>
  <td width="9%" class = "menuLinkTD" onmouseover="className='menuLinkTDHover'" onmouseout="className='menuLinkTD'"><a class="menuLink" href="http://oxytarm-ap.com/shop/catalog/Faqs.php">FAQs</a></td>
  <td width="18%" class = "menuLinkTD" onmouseover="className='menuLinkTDHover'" onmouseout="className='menuLinkTD'"><a class="menuLink" href="http://oxytarm-ap.com/shop/catalog/contact_us.php">Contact Us</a></td>

   </tr>		  
	   </table>

</td>
</tr>
</table>

	 </div><!-- container_24-->

<div id="bodyWrapper<?php echo $oscTemplate->getBlocks('960grid_css_developer'); ?>" class="container_<?php echo $oscTemplate->getGridContainerWidth(); ?>">
<div class="fb-like" data-href="http://www.facebook.com/Oxytarm" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div> 
<?php //JOEY: save space so remove header
//require(DIR_WS_INCLUDES . 'header.php'); ?>
<div id="bodyContent" class="grid_<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'push_' . $oscTemplate->getGridLeftColumnWidth() : ''); ?>">

<?php require_once('socialsetting.php');?>

Posted

Get rid of the music in your site. Way to turn off a potential shopper.

 

Then you need to make a piece of paper with 24 columns (aka grids). On this, sketch your design for the header.

 

Once you are done with the sketch, you have a starting place for your design. Now visualise this sketch into grids and put placeholders, example:

 

<div class="grid_24">
 <div  class="grid_12 alpha">
   Telephone Number<br>Welcome Guest message
 </div>
 <div  class="grid_12 omega">
   <div class="grid_2 alpha">currency</div>
   <div class="grid_5">basket</div>
   <div class="grid_5 alpha">checkout button</div>
 </div>
 <div class="grid_24 alpha">LOGO</div>
 <div class="grid_24 alpha">Menu System</div>
</div>

 

Now change the placeholders appropriately and give some overall style (using .css).

 

 

Here is a blog post from 6 years ago (prior to 960 grid, prior to 2.3), showing a broadly similar idea:

http://www.clubosc.com/making-a-design-work-in-oscommerce.html

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...