BigCommerce - Hosted Ecommerce Software by Interspire

Interspire Forum

 
Go Back   Interspire Forum > Interspire Shopping Cart Community Forum > Customization and Integration > Layout and Store Design Customization

Reply
 
Thread Tools Display Modes
  #1  
Old 05-13-2011, 10:51 AM
aengus + aengus is offline
Interspire Customer
 
Join Date: Mar 2010
Posts: 4
Default [solved] highlight current category in sidecategorylist with css

Hi,

I have 3-level category set up, and I've a custom design template almost completed, based on Magnificent (blue) template. My only issue is that I cannot see an easy way to use CSS to highlight (e.g. text-decoration:underline) the currently active parent category. After a lot of digging, I think I will need to make extensive changes to sidecategorylist.php so that some code logic checks for current category, and then applies a class to the <li> for the category name. This seems overly complicated, I wonder if there is an easier way?

Thanks for any help,
Aengus

Last edited by aengus; 05-16-2011 at 08:55 AM..
Reply With Quote
  #2  
Old 05-16-2011, 08:57 AM
aengus + aengus is offline
Interspire Customer
 
Join Date: Mar 2010
Posts: 4
Default

I was able to resolve this with jQuery, based on code from the thread about accordion menu. I added following to htmlhead file:

<script type="text/javascript">$(function() {



var m = location.href;
var n = m.substring(0,m.indexOf('?'));

if (n.length < 5) {
$("a[href="+m+"]").parent().parent().parent().parent().show();
$("a[href="+m+"]").parent().parent().show();
$("a[href="+m+"]").next().show();
$("a[href="+m+"]").css("color","#790000");
}
else {
$("a[href="+n+"]").parent().parent().parent().parent().show();
$("a[href="+n+"]").parent().parent().show();
$("a[href="+m+"]").next().show();
$("a[href="+n+"]").css("color","#790000");
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p != null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
$("a[href="+p+"]").parent().parent().parent().parent().show();
$("a[href="+p+"]").parent().parent().show();
$("a[href="+p+"]").not('.Content a').css("color","#790000");
};
});
</script>

This highlighted the current category in a specific color, which was effect I needed. Hope this helps someone,

Aengus
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump