Post by indigo » Thu Jul 29, 2010 1:16 pm

Hi all - Well have just started using opencart as a converted OSCommerce user & am really impressed with it ...Thanks for a great project ...

I need some help with the CSS on the tab images at the top - as I'd like to convert the text tabs to graphics..
So far I've managed to add a new CSS rule for the 'selected' state but am having issues with the 'original' state as per the pic below . Also the 'logout' tab once logged in. I understand all tabs are under the DiV4 class and the id is included within the link ... but I've been playing around adding new classes and rules but it's just not working for me! and now I'm a little confused...

Hoping someone can assist!!
Many thanks :)
Indigo

Screenshot below ....
Image

Newbie

Posts

Joined
Thu Jul 29, 2010 1:02 pm

Post by mystifier » Thu Jul 29, 2010 2:36 pm

It is not possible to comment on your unselected tab state without seeing your css.

There are two tabs, tab_login and tab_logout, that conditionally occupy the place depending on $logged. You have only changed the first one.

Free v1.4.9 Extensions: Default Specials | Improved Search | Customer Activity Report | Customer Groups | Royal Mail With Handling | Improved Product Page | Random Products | Stock Report | All Products


User avatar
Active Member

Posts

Joined
Tue May 18, 2010 5:15 pm

Post by indigo » Thu Jul 29, 2010 3:01 pm

Hi Mystifier thanks for replying - That is exactly where I'm having the problems - changing the second one :)

Here's the code I've changed in my header tpl

Code: Select all

$(document).ready(function() {
	route = getURLVar('route');
	
	if (!route) {
		$('#tab_home').addClass('selected');
	} else {
		part = route.split('/');
		
		if (route == 'common/home') {
			$('#tab_home').addClass('selected');
		} else if (route == 'account/login') {
			$('#tab_login').addClass('selected2a');	
		} else if (part[0] == 'account') {
			$('#tab_account').addClass('selected2b');
		} else if (route == 'checkout/cart') {
			$('#tab_cart').addClass('selected2c');
		} else if (part[0] == 'checkout') {
			$('#tab_checkout').addClass('selected2d');
		} else {
			$('#tab_home').addClass('selected');
		}
	}
});
My new CSS

Code: Select all

#header .div4 {
	width: 510px;
	clear: right;
	float: right;
	height: 32px;
	padding-right: 14px;
}
#header .div4 a {
	float: left;
	margin-right: 2px;
	width: 100px;
	height: 18px;
	padding-top: 9px;
	padding-bottom: 9px;
	background: url('../image/tab_1.png') no-repeat;
	text-align: center;
	color: #333333;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	position: relative;
	z-index: 0;
}
#header .div4 a.selected {
	background: url('../image/tab_2.png') no-repeat;
	padding-bottom: 10px;
	z-index: 3;
}
#header .div4 a.selected2a {
	background: url('../image/tab_2a.png') no-repeat;
	padding-bottom: 10px;
	z-index: 3;
}
#header .div4 a.selected2b {
	background: url('../image/tab_2b.png') no-repeat;
	padding-bottom: 10px;
	z-index: 3;
}
#header .div4 a.selected2c {
	background: url('../image/tab_2c.png') no-repeat;
	padding-bottom: 10px;
	z-index: 3;
}
#header .div4 a.selected2d{
	background: url('../image/tab_2d.png') no-repeat;
	padding-bottom: 10px;
	z-index: 3;
}
and realise I need to adjust between the "div4 tag" & this area in the header.tpl (below) as well .... but not exactly sure how!

Code: Select all

<div class="div4"><a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"></a>
      <?php if (!$logged) { ?>
      <a href="<?php echo str_replace('&', '&', $login); ?>" id="tab_login"></a>
      <?php } else { ?>
      <a href="<?php echo str_replace('&', '&', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
      <?php } ?>
      <a href="<?php echo str_replace('&', '&', $account); ?>" id="tab_account"></a><a href="<?php echo str_replace('&', '&', $cart); ?>" id="tab_cart"></a><a href="<?php echo str_replace('&', '&', $checkout); ?>" id="tab_checkout"></a></div>
Thanks :)

Newbie

Posts

Joined
Thu Jul 29, 2010 1:02 pm

Post by mystifier » Thu Jul 29, 2010 3:46 pm

You have a set of .div4 a.selected classes but you will also need a set of classes for each .div4 a (unselected) classes to reference the individual tab_1.png graphics.

Free v1.4.9 Extensions: Default Specials | Improved Search | Customer Activity Report | Customer Groups | Royal Mail With Handling | Improved Product Page | Random Products | Stock Report | All Products


User avatar
Active Member

Posts

Joined
Tue May 18, 2010 5:15 pm

Post by indigo » Thu Jul 29, 2010 3:52 pm

Yep! I have those too - But I can't get them to show correctly without breaking the code .. Any ideas?

Newbie

Posts

Joined
Thu Jul 29, 2010 1:02 pm
Who is online

Users browsing this forum: No registered users and 7 guests