View Full Version : Editing Left navigation layout (categories)
TomIntegraclick
January 29th, 2004, 08:38 AM
Under the section Product Catalog. I'd like the sub-category links to display differently than the category links.
What files do I need to edit to make this happen?
Thank Tom
TomIntegraclick
January 29th, 2004, 09:48 AM
also is it able to show subcategories all the time?
kkindopp
April 11th, 2004, 11:48 AM
Has anyone answered your question?
whiterabbit
January 1st, 2005, 03:20 PM
I'd like to know the answer too.
enchantedneedle
January 1st, 2005, 05:14 PM
You will have to edit the squirrelcart/themes/YOUR_THEME/store.css.
I have included a sample of my own code so that you can see the variables that you can use to change the apearance of the menu.
.category_collapsed {
text-align: left;
color: #736B39;
background-color: transparent;
font-weight: bold;
text-decoration: none;
width: 100%;
cursor: pointer;
line-height: 20px;
}
.category_collapsed:hover {
text-align: left;
background-color: #E6CCCC;
color: white;
text-decoration: none;
width: 100%;
cursor: pointer;
line-height: 20px;
}
.category_expanded {
text-align: left;
border-bottom: #98AC81 solid 1px;
font-weight: bold;
width: 100%;
cursor: pointer;
line-height: 20px;
background-color: #FAF0E6;
}
.category_expanded_surround {
border-color: #98AC81;
background-color: #FAF0E6;
border-style: solid;
border-width: 1px;
text-align: left;
margin-left: 2px;
margin-right: 2px;
width: 100%;
line-height: 20px;
}
.category_selected {
border-color: #98AC81;
border-style: solid;
border-width: 1px;text-align: left;
background-color: #C7D8B2;
color: #736B39;
width: 100%;
cursor: pointer;
line-height: 20px;
}
whiterabbit
January 1st, 2005, 05:24 PM
I have a little arrow gif that I want to insert before each category in that catalog list. any idea where I could insert that statement:
<img src="images/ArrowGreySmall.gif"/>
in order to get it inserted before my categories?
Category 1
Category 2
Category 3
enchantedneedle
January 1st, 2005, 05:43 PM
I'm afraid I don't know how to do that. That would probably require coding and I'm more of a design person.
pbxcom
January 6th, 2005, 05:58 PM
Whiterabbit, this can be done by modifying the show_categories.func.php file.
Before I go any further let me advise you to; first, backup the file before modifying it, and second, clearly document any changes as you will need to know about the change when you upgrade.
If you take a look at show_categories.func.php file you will see that lines 144 -155 are used to creat the links for the categories and subcategories.
print "
<div class=\"category_expanded_surround\">
<a class=\"category_expanded\" href=\"$href\">
<span class=\"category_selected\">$category_name</span>
</a>
";
// $crn is the category that was just clicked on
// $SC[last_cat_clicked] is the category that was clicked on before the last click
show_categories("links","$SC[www_cart_page]",$cat_rn,"sub_category_link");
print "</div>\n";
} else {
print "<a class=\"$class\" href=\"$href\"><div class=\"$class\">$category_name</div></a>";
}
Now I am not sure if you wanted to place your <img src="images/ArrowGreySmall.gif"> in front of all the categories (parent and child categories) or if you wanted it just infront of the children categories or parent categories, so I will explain how to do it all three ways (someone one else might find it useful)
To place an image in front of all categories replace lines 144 -155 with this code
print "
<div class=\"category_expanded_surround\">
<a class=\"category_expanded\" href=\"$href\">
<span class=\"category_selected\"><img src=\"images/ArrowGreySmall.gif\">$category_name</span>
</a>
";
// $crn is the category that was just clicked on
// $SC[last_cat_clicked] is the category that was clicked on before the last click
show_categories("links","$SC[www_cart_page]",$cat_rn,"sub_category_link");
print "</div>\n";
} else {
print "<a class=\"$class\" href=\"$href\"><div class=\"$class\"><img src=\"images/ArrowGreySmall.gif\">$category_name</div></a>";
}
To place the image in front of just the child categories (subcategories) replace lines 144 -155 with this code
print "
<div class=\"category_expanded_surround\">
<a class=\"category_expanded\" href=\"$href\">
<span class=\"category_selected\">$category_name</span>
</a>
";
// $crn is the category that was just clicked on
// $SC[last_cat_clicked] is the category that was clicked on before the last click
show_categories("links","$SC[www_cart_page]",$cat_rn,"sub_category_link");
print "</div>\n";
}
if (!$parent_cat){
print "<a class=\"$class\" href=\"$href\"><div class=\"$class\">$category_name</div></a>";
} else {
print "<a class=\"$class\" href=\"$href\"><div class=\"$class\"><img src=\"images/ArrowGreySmall.gif\">$category_name</div></a>";
}
And to place the image in front of just the parent categories replace lines 144 -155 with this code
print "
<div class=\"category_expanded_surround\">
<a class=\"category_expanded\" href=\"$href\">
<span class=\"category_selected\"><img src=\"images/ArrowGreySmall.gif\">$category_name</span>
</a>
";
// $crn is the category that was just clicked on
// $SC[last_cat_clicked] is the category that was clicked on before the last click
show_categories("links","$SC[www_cart_page]",$cat_rn,"sub_category_link");
print "</div>\n";
}
if (!$parent_cat){
print "<a class=\"$class\" href=\"$href\"><div class=\"$class\"><img src=\"images/ArrowGreySmall.gif\">$category_name</div></a>";
} else {
print "<a class=\"$class\" href=\"$href\"><div class=\"$class\">$category_name</div></a>";
}
whiterabbit
January 6th, 2005, 08:41 PM
Thank you for the help with the category/image code.
You might be a good person to help with another problem I have. Please take a look at this thread:
http://www.ldev.com/forums/showthread.php?t=1672
dbinteractive
August 25th, 2005, 04:12 PM
Hi,
I tried the above lines of script to have the arrow show next to the subcategories. It worked, but the parent category was repeated after the subcategories. I am using the new cart 1.6.3 cart and the lines referred to above are now on 146. I discovered the solution was to add in an extra bit of code as follows:
print "
<div class=\"category_expanded_surround\">
<a class=\"category_expanded\" href=\"$href\">
<span class=\"category_selected\">$category_name</span>
</a>
";
// $crn is the category that was just clicked on
// $SC[last_cat_clicked] is the category that was clicked on before the last click
show_categories("links","$SC[www_cart_page]",$cat_rn,"sub_category_link");
print "</div>\n";
} else {
if (!$parent_cat){
print "<a class=\"$class\" href=\"$href\"><div class=\"$class\">$category_name</div></a>";
} else {
print "<a class=\"$class\" href=\"$href\"><div class=\"$class\"><img src=\"images/arrowsmall.gif\" border=\"0\" hspace=\"3\">$category_name</div></a>";
}
}
Cheers,
Bob Payn
vBulletin® v3.7.4, Copyright ©2000-2009, Jelsoft Enterprises Ltd.