Comesticage Posted January 7, 2014 Posted January 7, 2014 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');?>
burt Posted January 7, 2014 Posted January 7, 2014 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.