Adding CSS Menu to my site

**caesartrading** · 2 Jul 2011, 02:27 PM

Hello all,

I recently created a CSS menu using EngIn Site CSS Editor, so that I could replace my current navigation bar (currently powered by the EZ Pages section).

At the moment, this is what I have: https://www.the-ishop.co.uk, and this is using the EZ Pages bit.

However, I want to add my own one. I have the HTML code, and the CSS code ready and waiting, but have no idea how to go about implementing it in my site.

Here's the code I have got:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> 
<html><head> 
<title>CSS DropDown Menu without JavaScript, PureCSS, Rollover</title> 
<style type="text/css"> 
body { padding: 3em; }
 
#cssm1 *  { padding:0; margin: 0; font: 1em arial; }
 
#cssm1 { margin: 0 auto; float: left; line-height: 50px; }
 
#cssm1 a { display: block; font-family:verdana; border: 1px solid #fff; height:30px; background: #001133; color:#DDD; text-align: center; text-decoration:none; font-weight:none; padding: 3px 10px; }
#cssm1 a:hover { color:#FFCC00; }
 
 
#cssm1 ul li, #cssm1 ul li ul li  { width: 120px; list-style-type:none; }
 
#cssm1 ul li { float: left; width: 120px; }
 
#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{ 
	display:none;
	list-style-type:none; 
	width: 120px;
	}
 
#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul { 
	display:block;
	}
 
#cssm1:hover ul li:hover ul li:hover ul { 
	position: absolute;
	margin-left: 120px;
	margin-top: -20px;
	}
 
 
 
 
</style> 
 
</head><body> 
<div id="cssm1"> 
	<ul> 
		<li><a href="#">Apple</a> 
				<ul> 
				<li><a href="https://www.the-ishop.co.uk/apple-iphone-4-c-51_2.html">iPhone 4</a></li> 
				<li><a href="https://www.the-ishop.co.uk/apple-iphone-3gs3g2g-c-51_3.html">iPhone 3G/S</a></li>
				<li><a href="https://www.the-ishop.co.uk/apple-ipad-c-51_4.html">iPad</a></li>
				<li><a href="https://www.the-ishop.co.uk/apple-ipad-2-c-51_44.html">iPad 2</a></li> 
				<li><a href="https://www.the-ishop.co.uk/apple-ipod-touch-c-51_5.html">iPod Touch</a></li> 			
				</ul> 
		
		</li> 
		<li><a href="#">BlackBerry</a>
		       		<ul> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-torch-c-6_61.html">Torch</a></li> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-bold-c-6_73.html">Bold</a></li>
				<li><a href="https://www.the-ishop.co.uk/blackberry-curve-c-6_63.html">Curve</a></li>
				<li><a href="https://www.the-ishop.co.uk/blackberry-storm-c-6_74.html">Storm</a></li> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-pearl-c-6_62.html">Pearl</a></li> 			
				</ul> 
		</li>
				
		<li><a href="#">HTC</a>
		       		<ul> 
				<li><a href="#">Sensation</a></li>
    				<li><a href="#">Evo 3D</a></li>
				<li><a href="#">Flyer</a></li> 
				<li><a href="#">ChaCha</a></li>
				<li><a href="#">Salsa</a></li> 
				<li><a href="#">Incredible</a></li>
				<li><a href="#">HD7</a></li> 
				<li><a href="#">7</a>
		  		       <ul> 
				       <li><a href="#">Mozart</a> 
				       <li><a href="#">Trophy</a> 
				       </ul> 
				       </li>
     	                        <li><a href="#">Wildfire</a>
     	                               <ul> 
				       <li><a href="#">Wildfire</a> 
				       <li><a href="#">Wildfire S</a> 
				       </ul>
				       </li> 
				<li><a href="#">Desire</a>
				       <ul> 
				       <li><a href="#">Desire</a> 
				       <li><a href="#">Desire HD</a> 
				       <li><a href="#">Desire S</a> 
				       <li><a href="#">Desire Z</a> 
				       </ul> 
				       </li>
				<li><a href="#">Legend</a></li>
				<li><a href="#">Smart</a></li>
				<li><a href="#">Other</a></li>
				</ul> 
		</li>
		
		<li><a href="#">Samsung</a>
		       		<ul> 
				<li><a href="https://www.the-ishop.co.uk/samsung-galaxy-tab-p1000-c-52_48.html">Galaxy Tab</a></li> 
				</ul> 
		</li>
		
		<li><a href="https://www.the-ishop.co.uk/blog">Blog</a></li>		
		<li><a href="https://www.the-ishop.co.uk/faq-ezp-1.html">FAQ</a></li> 
		<li><a href="https://www.the-ishop.co.uk/account.html">Account</a></li> 
		       	        		
	</ul> 
</div> 
</body></html>

Obviously the HTML bit will go into something like the tpl_header.php file, but where would I put the CSS stuff, and link it to the HTMl code?

All help appreciated!

**kuroi** · 2 Jul 2011, 04:45 PM

You put the css in a file prefixed by "stylesheet_" and put that in your templates css folder.

**caesartrading** · 2 Jul 2011, 05:08 PM

Does it need to be put into a particular stylesheet file though? oR do I need to create a new one?

**kuroi** · 2 Jul 2011, 05:32 PM

That's up to you. Easiest to create a new one, but that's an extra file to be loaded when a visitor first comes to your site. Or you could add it your template's main stylesheet, if you prefer.

**caesartrading** · 8 Jul 2011, 08:10 PM

Hi, sorry for taking so long to reply! Got sidetracked with other projects on the website (like getting sales....)

If I were to add the CSS part to my main stylesheet, how exactly would I go about adding it? Obviously I wouldn't just put in anywhere! Is there a way that I need to connect the CSS stuff with the HTML code in the tpl_header.php file?

Cheers

**rstevenson** · 8 Jul 2011, 09:59 PM

When adding custom stuff to the default stylesheet.css file, you should create a section at the bottom and put all your custom code there. This ensures that your custom css gets read last and therefore not overridden. And use some comments to make it easier to remember what you did next year when you want to change it. :)

Rob

**caesartrading** · 8 Jul 2011, 10:39 PM

Yes, I appreciate that, but you're missing the point of my question:
How do I add the CSS to the file? Do I just copy and paste it there with a special heading, or do I need to connect the CSS and respective HTML separately?

**clydejones** · 8 Jul 2011, 11:10 PM

Originally Posted by caesartrading

Yes, I appreciate that, but you're missing the point of my question:
How do I add the CSS to the file? Do I just copy and paste it there with a special heading, or do I need to connect the CSS and respective HTML separately?

open your includes/templates/YOUR_TEMPLATE/css/stylesheet.css

in your text editor

copy and paste the following at the bottom of the stylesheet.css

Code:

#cssm1 *  { padding:0; margin: 0; font: 1em arial; }
 
#cssm1 { margin: 0 auto; float: left; line-height: 50px; }
 
#cssm1 a { display: block; font-family:verdana; border: 1px solid #fff; height:30px; background: #001133; color:#DDD; text-align: center; text-decoration:none; font-weight:none; padding: 3px 10px; }
#cssm1 a:hover { color:#FFCC00; }
 
 
#cssm1 ul li, #cssm1 ul li ul li  { width: 120px; list-style-type:none; }
 
#cssm1 ul li { float: left; width: 120px; }
 
#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{ 
	display:none;
	list-style-type:none; 
	width: 120px;
	}
 
#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul { 
	display:block;
	}
 
#cssm1:hover ul li:hover ul li:hover ul { 
	position: absolute;
	margin-left: 120px;
	margin-top: -20px;
	}

save the file and upload it to your server.

**caesartrading** · 8 Jul 2011, 11:40 PM

Ok, thanks clydejones.

I added that to the bottom, under /* ------ Navigation bar -----*/ etc etc.

Now, with the tpl_header.php file, how do I add it?
This is the original file here:

Code:

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
 */
?>
<?php

	
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

    <div id="header">
		<div class="top-tail2"></div>
		<div class="top">
			<div class="top-bg">
			<div class="main-width">
				<div class="logo">
					<!-- ========== LOGO ========== -->
						<a href="<?php echo zen_href_link(FILENAME_DEFAULT);?>"><?php echo zen_image(DIR_WS_TEMPLATE.'images/logo.gif'); ?></a>

					<!-- ========================== -->
				</div>
							
				<div class="social-media">
					<div class="alignright">
					<!-- ========== Social Media ========== -->
						<a href="https://www.the-ishop.co.uk/blog"> 															<img src="https://www.the-ishop.co.uk/images/banners/blog.png" width="61" height="50" style="margin-top:40px" alt="The iShop Blog" />
</a>						
						<a href="https://www.facebook.com/the.ishop" target="_blank"> 														<img src="https://www.the-ishop.co.uk/images/banners/facebook.png" width="50" height="50" style="margin-top:40px" alt="The iShop on Facebook" />
</a>
						<a href="https://twitter.com/The_iShop" target="_blank"> 
						<img src="https://www.the-ishop.co.uk/images/banners/twitter.png" width="50" height="50" style="margin-top:40px" style="vertical-align:middle" alt="The iShop on Twitter"/>						
</a>
						<a href="https://www.youtube.com/user/theishoptv" target="_blank"> 
						<img src="https://www.the-ishop.co.uk/images/banners/youtube.png" width="50" height="50" style="margin-top:40px; margin-right:40px" style="vertical-align:middle" alt="The iShop on Twitter"/>						
</a>											
				
					<!-- ================================== -->					
					
	
					
			<div class="cart">
				<div class="alignright">
					<div class="cart-bg">
						<div class="cart-icon">
								<!-- ========== SHOPPING CART ========== -->
									<?php 
										if ($_SESSION['cart']->count_contents() == 0) {
											$cart_text = 'Items: <a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '">' . $_SESSION['cart']->count_contents() . ' items</a>';
										} elseif ($_SESSION['cart']->count_contents() == 1) {
											$cart_text = 'Items: <a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '">' . $_SESSION['cart']->count_contents() . ' item</a>';
										} else {
											$cart_text = 'Items: <a href="' . zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '">' . $_SESSION['cart']->count_contents() . ' items</a>';
										}
									?>
									<span><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo BOX_HEADING_SHOPPING_CART;?></a>:</span> <?php echo $cart_text ?> 

							<!-- =================================== -->
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
		

							<!-- ========== Contact Details ========== -->

					<a><img src="https://www.the-ishop.co.uk/images/banners/contact.png" width="461" height="28" style="margin-left:40px" />
</a>						
							<!-- ===================================== -->
			<div class="row">
			<div class="main-width">
				<div class="nav-links">
					<div class="left-corner">
						<div class="right-corner">
							<!-- ========== NAVIGATION LINKS ========== -->
									<a href="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>
									
								<?php if ($_SESSION['customer_id']) { ?>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> 
								<?php
									  } else {
										if (STORE_STATUS == '0') {
								?>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>  
								<?php } } ?>  
								
								<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
									&nbsp; &nbsp;|&nbsp; &nbsp; <a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
								<?php } ?>
							<!-- ====================================== -->
						</div>
					</div>
				</div>

						<div class="lang">
						<!-- ========== LANGUAGES ========== -->
							<?php 
								if (!isset($lng) || (isset($lng) && !is_object($lng))) {
									$lng = new language;
								}
							
								reset($lng->catalog_languages);
							
								while (list($key, $value) = each($lng->catalog_languages)) {
									echo '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '">' . zen_image(DIR_WS_LANGUAGES.$value['directory'].'/images/'.$value['image'], $value['name'], '', '', ' style="vertical-align:middle;"') . '</a>';
								}
							?>
						<!-- =============================== -->
					</div>
					<div class="search">
						<!-- ========== SEARCH ========== -->
							<?php echo zen_draw_form('quick_find_header', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get');?>
								<div>
							<?php 
								echo zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT);
								echo zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id();
							?>
							<?php echo zen_draw_input_field('keyword', '', 'class="input1"');?><?php echo zen_image_submit ('search.gif', HEADER_SEARCH_BUTTON);?>
								</div>
							</form>
						<!-- ============================ -->
					</div>
					<div class="currencies">
						<!-- ========== CURRENCIES ========= -->
							<?php echo zen_draw_form('currencies', zen_href_link(basename(ereg_replace('.php','', $PHP_SELF)), '', $request_type, false), 'get'); ?>
								<div>
									<?php echo BOX_HEADING_CURRENCIES;?>:
							
									<?
										if (isset($currencies) && is_object($currencies)) {
									
										  reset($currencies->currencies);
										  $currencies_array = array();
										  while (list($key, $value) = each($currencies->currencies)) {
											$currencies_array[] = array('id' => $key, 'text' => $value['title']);
										  }
									
										  $hidden_get_variables = '';
										  reset($_GET);
										  while (list($key, $value) = each($_GET)) {
											if ( ($key != 'currency') && ($key != zen_session_name()) && ($key != 'x') && ($key != 'y') ) {
											  $hidden_get_variables .= zen_draw_hidden_field($key, $value);
											}
										  }
										}
									?>
									<?php echo zen_draw_pull_down_menu('currency', $currencies_array, $_SESSION['currency'], 'class="select" onchange="this.form.submit();"') . $hidden_get_variables . zen_hide_session_id()?>
								</div>
							</form>
						<!-- ====================================== -->


<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>					
					</div>
			</div>
		</div>
		<div class="main-width">
		<?php 
			if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) {
				if (HEADER_SALES_TEXT != '') {
		?>
				<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
		<?php
				}
			}
		?>
	
		<!-- ========== CATEGORIES TABS ========= -->
			<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
		<!-- ==================================== -->
		</div>
	</div>

<!-- Start of PunchTab Script -->
<script type="text/javascript" charset="utf-8">
  var is_ssl = ("https:" == document.location.protocol);
  var asset_host = is_ssl ? "https://www.punchtab.com/" : "http://www.punchtab.com/";
  document.write(unescape("%3Cscript src='" + asset_host + "s/js/pt.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript" charset="utf-8">
  var _ptq = _ptq || [];
  var reward_widget_options = {};
  reward_widget_options.key = "65dd3c2baab91d74fa3161424ea948aa";
  reward_widget_options.host = "www.punchtab.com";
  reward_widget_options.display = "tab";
  reward_widget_options.position = {x:"right",y:"top"};
  var reward_widget = new PT.reward_widget(reward_widget_options);
</script>
<!-- End of PunchTab Script -->

	
<!-- Start of Zopim Live Chat Script -->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=
z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o
){z.set._.push(o)};$.setAttribute('charset','utf-8');$.async=!0;z.set.
_=[];$.src=('https:'==d.location.protocol?'https://ssl':'http://cdn')+
'.zopim.com/?oxzJMmQgAKVITOhZGTyiqedEPtou0ckb';$.type='text/java'+s;z.
t=+new Date;z._=[];e.parentNode.insertBefore($,e)})(document,'script')
</script>
<!-- End of Zopim Live Chat Script -->

<?php } ?>

And here is the HTML section I was given by my CSS Editor:

Code:

<div id="cssm1"> 
	<ul> 
		<li><a href="#">Apple</a> 
				<ul> 
				<li><a href="https://www.the-ishop.co.uk/apple-iphone-4-c-51_2.html">iPhone 4</a></li> 
				<li><a href="https://www.the-ishop.co.uk/apple-iphone-3gs3g2g-c-51_3.html">iPhone 3G/S</a></li>
				<li><a href="https://www.the-ishop.co.uk/apple-ipad-c-51_4.html">iPad</a></li>
				<li><a href="https://www.the-ishop.co.uk/apple-ipad-2-c-51_44.html">iPad 2</a></li> 
				<li><a href="https://www.the-ishop.co.uk/apple-ipod-touch-c-51_5.html">iPod Touch</a></li> 			
				</ul> 
		
		</li> 
		<li><a href="#">BlackBerry</a>
		       		<ul> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-torch-c-6_61.html">Torch</a></li> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-bold-c-6_73.html">Bold</a></li>
				<li><a href="https://www.the-ishop.co.uk/blackberry-curve-c-6_63.html">Curve</a></li>
				<li><a href="https://www.the-ishop.co.uk/blackberry-storm-c-6_74.html">Storm</a></li> 
				<li><a href="https://www.the-ishop.co.uk/blackberry-pearl-c-6_62.html">Pearl</a></li> 			
				</ul> 
		</li>
				
		<li><a href="#">HTC</a>
		       		<ul> 
				<li><a href="#">Sensation</a></li>
    				<li><a href="#">Evo 3D</a></li>
				<li><a href="#">Flyer</a></li> 
				<li><a href="#">ChaCha</a></li>
				<li><a href="#">Salsa</a></li> 
				<li><a href="#">Incredible</a></li>
				<li><a href="#">HD7</a></li> 
				<li><a href="#">7</a>
		  		       <ul> 
				       <li><a href="#">Mozart</a> 
				       <li><a href="#">Trophy</a> 
				       </ul> 
				       </li>
     	                        <li><a href="#">Wildfire</a>
     	                               <ul> 
				       <li><a href="#">Wildfire</a> 
				       <li><a href="#">Wildfire S</a> 
				       </ul>
				       </li> 
				<li><a href="#">Desire</a>
				       <ul> 
				       <li><a href="#">Desire</a> 
				       <li><a href="#">Desire HD</a> 
				       <li><a href="#">Desire S</a> 
				       <li><a href="#">Desire Z</a> 
				       </ul> 
				       </li>
				<li><a href="#">Legend</a></li>
				<li><a href="#">Smart</a></li>
				<li><a href="#">Other</a></li>
				</ul> 
		</li>
		
		<li><a href="#">Samsung</a>
		       		<ul> 
				<li><a href="https://www.the-ishop.co.uk/samsung-galaxy-tab-p1000-c-52_48.html">Galaxy Tab</a></li> 
				</ul> 
		</li>
		
		<li><a href="https://www.the-ishop.co.uk/blog">Blog</a></li>		
		<li><a href="https://www.the-ishop.co.uk/faq-ezp-1.html">FAQ</a></li> 
		<li><a href="https://www.the-ishop.co.uk/account.html">Account</a></li> 
		       	        		
	</ul> 
</div>

At the moment, I'm just replacing the NAVIGATION LINKS section with the HTML I was given, but it's not doing anything.

Also, is the NAVIGATION LINKS the EZ Pages ones, or the normal text based ones that you can turn on (tabs, I think they're called?)

Any help is much appreciated, of course!

**caesartrading** · 9 Jul 2011, 06:01 PM

I'm still looking for a way to sort this out, and have tried to play around with it, but to no avail.

Can anyone help me out?

Thread: Adding CSS Menu to my site

Thread Tools

Search Thread

Display

Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Re: Adding CSS Menu to my site

Similar Threads

layout changed after installed CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)

v151 How to uninstall CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)

Adding a CSS menu onto every page

Adding nice buttons to css flyout menu

CSS Horizontal Drop Down menu - dropdown menu width...

Bookmarks

Bookmarks

Posting Permissions