Forums / Templates, Stylesheets, Page Layout / change the color of active links category

change the color of active links category

Started by diamond1 on 15 Oct 2015, 7:01 PM · Views: 1,635

Results 1 to 19 of 19
15 Oct 2015, 7:01 PM
#1
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

change the color of active links category

I wish the link of the category when clicked will change color, that include a: active. My templates is old comes from 12leaves put the link of the template where there is an online demo to not put your link on my site.
http://demo.zen-cart-themes.com/furniture/
I would be really grateful if someone helps me.

Giovanni,
Zen Cart V2.1

15 Oct 2015, 7:31 PM
#2
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,897
Plugin Contributions:
21

Re: change the color of active links category

Unfortunately, most store-bought templates are nowhere near compatible with Zen Cart. So... they take to creating MANY stylesheets to try to cover up for their code changes. You will need to find out which of the stylesheets is controlling a particular "a" tag. Then, you can look at that stylesheet for an "a:active" call and try changing that.
If you use firefox and firebug, you can do this on the fly.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

15 Oct 2015, 8:17 PM
#3
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

hello, using firebug but does not work a: active style sheet is this

/*Version 1.3.9b*/
/*Cornflowerblue Menu CSS*/
#vert_categoriescss.leftBoxContainer { 
   background: #d########3; 
   border: 1px solid #0000ff; 
   padding-bottom: 10px;
}

#vert_categoriescssHeading.leftBoxHeading {
   background: #87ceeb; 
   border-bottom: 1px solid #0000ff; 
   margin-bottom: 1px;
}

#vert_nav-cat {
   margin: 0 0 0 0px;
   background-color: #F3FAFA; 
   font-weight:bold;
   border: 2px solid #E8E8E8;
   border-width: 1px 2px 2px 2px;
   padding: 0;
}

#vert_nav-cat ul {
   margin: 0; 
   padding: 0; 
}

#vert_nav-cat ul.level2 {background-color: #fff;}
#vert_nav-cat ul.level3 {background-color: #fff;}
#vert_nav-cat ul.level4 {background-color: #fff;}
#vert_nav-cat ul.level5 {background-color: #fff;}
#vert_nav-cat ul.level6 {background-color: #fff;}

#vert_nav-cat li {
   position: relative; 
   list-style: none; 
   margin: 0;
   margin-top: 0px; /* change this to put space between buttons*/
   /* *display:inline-block; */
}
#vert_nav-cat li+li {
	border-top: 1px solid #E5E5E5;
	*margin: 0;
}
#vert_nav-cat li+li.submenu {
	*margin: 0;
}
#vert_nav-cat li li {
   margin: 0; /* overrides the margin-top above */
}

#vert_nav-cat li:hover {
   z-index: 1000;
}

#vert_nav-cat li a:hover {
   background-color: #E2F0F7;color: #f76218;
}
#vert_nav-cat li.submenu>a:hover {
	background: #E2F0F7 url("../images/arrow_hover.gif") no-repeat scroll 94% center;
}
#vert_nav-cat li a {
   display: block; 
   padding: 6px 2px 6px 10px;
   text-decoration: none; 
   width: 100%;
   color: #444444;
}
#vert_nav-cat li.submenu>a {
   background: url("../images/arrow.gif") no-repeat scroll 94% center transparent;
}
#vert_nav-cat>ul a {
   width: auto;
}

#vert_nav-cat ul ul {
   position: absolute; 
   top: 0;
   right: -178px;
   display: none;
   width: 180px;
   border: 1px solid #E4E4E4;

	-moz-box-shadow: 1px 2px 3px #555555;
	-webkit-box-shadow: 1px 2px 3px #555555;
	box-shadow: 1px 2px 3px #555555;
}

#vert_nav-cat ul ul li a {
	font: bold 12px/13px Arial;
	color: #444;
	padding: 6px 2px 6px 10px;
}
#vert_nav-cat ul.level1 li.submenu:hover ul.level2,
#vert_nav-cat ul.level2 li.submenu:hover ul.level3,
#vert_nav-cat ul.level3 li.submenu:hover ul.level4,
#vert_nav-cat ul.level4 li.submenu:hover ul.level5,
#vert_nav-cat ul.level5 li.submenu:hover ul.level6 {
   display:block; 
}
/*stylesheet_columnar_pr.css*/
#productListing {padding-bottom: 25px;}

.centerBoxContentsProducts .c-product-wrp {
	min-height: 295px;
	padding: 10px 10px 5px;
}
.centerBoxContentsProducts  .button_buy_now {display: inline-block;}
.itemTitle {text-align: left; padding-bottom: 3px;font-weight: bold;}
.itemTitle  a:hover {color: red; font-size: 12pt;font-weight: normal;}
.centerBoxContentsProducts .c-product-wrp img { padding: 10px 0;}

.table-price {
	padding: 2px 0 5px;
	display: block;
}
#gridSorter {margin: 1px 0 8px; padding: 4px 8px; background: #feea01; border-bottom: 1px solid #ddd;}
#gridSorter ul {list-style-type: none; padding: 0; margin: 0; display: inline-block;}
#gridSorter > span {display: inline-block;}
#gridSorter ul li {display: inline-block; padding: 0 10px 0;}

@media (max-width: 480px) { .centerBoxContentsProducts .c-product-wrp img {max-width: 100px !important;} }
/*Fine stylesheet_columnar_pr.css*/

/*stylesheet_login_header.css*/
.loginbox {
	position: absolute; z-index: 100; right: 0; display: none; box-shadow: 12px 12px 66px rgba(0,0,0,0.4);
}
.loginbox .sideBoxContent {
	padding: 15px 14px;
	border: 1px solid #e6e6e6;
}
.loginbox .sideBoxContent input[type=text], .loginbox .sideBoxContent input[type=password] {
	font-size: 14px;
	font-weight: bold;
	padding: 5px 3px;
	margin: 6px 0 8px;
	border: 1px solid #ccc;
	background-color: #f8f8f8;
}
.loginbox .sideBoxContent .button_login {
	font-size: 12px;
	margin: 6px 0 0;
	padding: 5px 17px;
}
#login_logout_section {
	position: relative;
}
#nav-cat ul ul, .popup-win, #vert_nav-cat ul ul {
	box-shadow: 1px 2px 5px rgba(0,0,0,0.35) !important;		
}
/* Fine stylesheet_login_header.css*/

**I post this but it seems to work
**

#vert_nav-cat li a:active {
   color: #A52A2A;
}

Giovanni,
Zen Cart V2.1

15 Oct 2015, 8:34 PM
#4
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,897
Plugin Contributions:
21

Re: change the color of active links category

have you noticed that the template seems to be for 1.3.9b? Have you checked with the creator to see if the template is really 1.5.4 compatible? I know they claim it works with 1.5.x but, there are some big differences in just the 1.5 series.
Also, they claim that any color you choose will cause "Necessary elements change color automatically".
You can always post something for us to look at by using the yoursiteDOTcom method. That hides the site from the SEs till you're ready for them to look.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

15 Oct 2015, 8:45 PM
#5
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

It works well with 1:54, ok place link horibalandDOTcom

Giovanni,
Zen Cart V2.1

15 Oct 2015, 8:52 PM
#6
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,897
Plugin Contributions:
21

Re: change the color of active links category

Been 41 years since I was first stationed at Aviano, Italy. Lovely place. On the bucket list for get back there.:yes:
How's about a specific page we can talk about? Or, are you talking about the categories in the left sidebox?

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

15 Oct 2015, 8:56 PM
#7
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

We can talk you remember that I do not speak English and I translate everything with a translator must have a little patience when I read

Giovanni,
Zen Cart V2.1

15 Oct 2015, 9:02 PM
#8
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,897
Plugin Contributions:
21

Re: change the color of active links category

Ciao! Proviamo questo . Il prolem è che non trovo il foglio di stile che lei ha citato in uso sul tuo sito. Mi può dare il nome del foglio di stile che hai postato sul forum ?

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

15 Oct 2015, 9:05 PM
#9
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

Voila
includes/templates/mobishop_blue/css/stylesheet_vert_categories_menu.css
stylesheet_vert_categories_menu.css

Giovanni,
Zen Cart V2.1

15 Oct 2015, 9:06 PM
#10
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,897
Plugin Contributions:
21

Re: change the color of active links category

E ' tarda notte per voi . Possiamo continuare domani, se vi piace .

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

15 Oct 2015, 9:09 PM
#11
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

Thank you that we can

ps
after 20H00 Paris now if that's all right

Giovanni,
Zen Cart V2.1

15 Oct 2015, 9:16 PM
#12
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,897
Plugin Contributions:
21

Re: change the color of active links category

Ora capisco che cosa si vuole , credo . Si dovrà creare il codice contro un foglio di stile per evidenziare quale categoria viene utilizzato dal cliente. Il foglio di stile non sa che "li" si sta guardando . Si sa solo di cambiare il suo colore se attivo . C'è un collegamento per un possibile risposta a .... https://www.google.com/url?sa=t&rct=...pkEDTSOcju0mCQ

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

15 Oct 2015, 9:17 PM
#13
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,897
Plugin Contributions:
21

Re: change the color of active links category

Buona Notte

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

16 Oct 2015, 7:30 PM
#14
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

Buona sera

Here I am, you and the left sidebar categories I want the active link.

Giovanni,
Zen Cart V2.1

16 Oct 2015, 11:02 PM
#15
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,897
Plugin Contributions:
21

Re: change the color of active links category

I have not been able to find anything that will highlight the category box in the left-hand column while the category is displayed. Marking the "li" as active only lasts until the category page is displayed.

Hopefully, someone with a little more knowledge can help us out.

I think you would need some code that recognizes which category is being accessed and change the background color for that category's link in the menu.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

17 Oct 2015, 8:52 AM
#16
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

Ok thank you, we hope that someone will help me.

Giovanni,
Zen Cart V2.1

17 Oct 2015, 10:02 AM
#17
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

I understand which file to change, but I did not understand how to do hihih
includes/templates/MY_templates/sidebox/tpl_categories.php

This is my file tpl_categories.php

<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright (c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: tpl_categories_css.php 2004/06/23 00:00:00 DrByteZen Exp $
//
  $content = "";

    $content .= '<div id="vert_nav-cat">';
    $content .= $menulist; // see the modules/sideboxes/YOURTEMPLATE/categories_css.php for this

  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true'){
    $content .= '';  // insert a blank line/box in the menu
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      $content .= '<ul class="vert_level1"><li><a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a></li></ul>';
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      $content .= '<ul class="vert_level1"><li><a href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a></li></ul>';
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<ul class="vert_level1"><li><a href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a></li></ul>';
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<ul class="vert_level1"><li><a href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a></li></ul>';
    }
  }
  $content .= '</div>';
// May want to add ............onfocus="this.blur()"...... to each A HREF to get rid of the dotted-box around links when they're clicked.
// just parse the $content string and insert it into each A HREF tag

?>

Giovanni,
Zen Cart V2.1

18 Oct 2015, 5:02 PM
#18
keneso avatar

keneso

Totally Zenned

Join Date:
May 2009
Posts:
1,273
Plugin Contributions:
3

Re: change the color of active links category

EN
I took a look at the site and category is highlighted, unless I misunderstood your request.

IT
Ho dato un'occhiata al sito e le categorie sono evidenziate, a meno che non abbia mal interpretato la richiesta.

19 Oct 2015, 6:02 AM
#19
diamond1 avatar

diamond1

Zen Follower

Join Date:
Jan 2010
Location:
France
Posts:
295
Plugin Contributions:
0

Re: change the color of active links category

Keneso thanks, I solved the case.

Keneso thanks, I solved it by editing tpl_categories.php.

<?php
/**
* Template designed by 12leaves.com
* 12leaves.com - Free ecommerce templates and design services
* 
* Side Box Template
*
* @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_categories.php 4162 2006-08-17 03:55:02Z ajeh $
*/
  $content = "";
  
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break;
      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;
      case ($box_categories_array[$i]['has_sub_cat']):
        $new_style = 'category-subs';
        break;
      default:
        $new_style = 'category-products';
      }
     if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
        // skip if this is for the document box (==3)
      } else {

	  /*#### Wel*/
	  if ($i == 0) { $top = 'no-dots'; } else { $top = ''; }
/*	  $content .= '<div class="categories-top-list">';*/
	  if ($new_style == 'category-products' || $new_style == 'category-subs') { $open_tag = '<div class="subcategory">'; } else { $open_tag = '<div class="categories-top-list ' . $top . '">'; };
	  /*#### /Wel*/

      $content .= $open_tag . '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

      if ($box_categories_array[$i]['current']) {
        if ($box_categories_array[$i]['has_sub_cat']) {
          $content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';
        } else {
          $content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';
        }
      } else {
        $content .= $box_categories_array[$i]['name']/* . 'top down'*/;
      }

      if ($box_categories_array[$i]['has_sub_cat']) {
        $content .= CATEGORIES_SEPARATOR;
      }
      $content .= '</a>';

      if (SHOW_COUNTS == 'true') {
        if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
          $content .= '<span class="sub-count">' . CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX . '</span>';
        }
      }
	  /*#### Wel*/
	  if ($new_style == 'category-products' || $new_style == 'category-subs') { $close_tag = '</div>'; } else { $close_tag = '</div>'; };
	  /*#### /Wel*/

      $content .= $close_tag . "\n";
    }
  }

  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      // display limits
//      $display_limit = zen_get_products_new_timelimit();
      $display_limit = zen_get_new_date_range();

      $show_this = $db->Execute("select p.products_id
                                 from " . TABLE_PRODUCTS . " p
                                 where p.products_status = 1 " . $display_limit . " limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
  }
  $content .= '</div>';
?>

Giovanni,
Zen Cart V2.1