Different text colours for sub/sub categories in BlockCategories module

[lateral]

Hi guys,

 

I have modified the blockcategories.css so that the first lower level of category text is a different colour to parent category in order to make it more obvious when the user clicks the "down/expand" menu arrow.

 

This is fine if the is only a parent and a single child but I have a parent with a child that when the child is clicked expands into another lower level child category..

 

My question is this.. how can I change the blockcategories.css file so that the lower child (the last) is a different colour than it parent?

 

I hope this makes sense.

 

Here is a copy of my blockcategories.css.

 

@charset "UTF-8";
#categories_block_top {
  clear: both;
  position: relative;
  top: 30px; }
  #categories_block_top .sf-menu {
    position: relative; }
    #categories_block_top .sf-menu > li {
      position: static; }
      #categories_block_top .sf-menu > li > ul {
        width: 100%;
        top: 60px;
        margin: 0 20px; }
        #categories_block_top .sf-menu > li > ul > li {
          display: block;
          float: left;
          width: 20%;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          padding: 0 10px; }
        #categories_block_top .sf-menu > li > ul > .category_thumb {
          display: block;
          clear: both;
          overflow: hidden;
          width: 100%; }
          #categories_block_top .sf-menu > li > ul > .category_thumb img {
            display: inline-block;
            width: 33%; }
      #categories_block_top .sf-menu > li h4 a {
        font-size: 1.1em; }
        #categories_block_top .sf-menu > li h4 a:before {
          display: none; }
      #categories_block_top .sf-menu > li .main-level-submenus {
        position: relative;
        display: block !important;
        visibility: visible !important;
        top: 0;
        background: none;
        box-shadow: none;
        padding: 0;
        left: 0; }
    #categories_block_top .sf-menu .category_thumb {
      display: none; }

#categories_block_left {
  margin-bottom: 15px; }
  @media (max-width: 767px) {
    #categories_block_left {
      display: none; } }
  #categories_block_left .title_block {
    font: 500 23px/24px "Roboto", sans-serif;
    color: black;
    text-transform: uppercase;
    padding: 12px 0 15px 18px;
    color: #fff;
    margin-bottom: 13px;
    background: #fea800;
    overflow: hidden;
    border: none; }
    @media (max-width: 991px) {
      #categories_block_left .title_block {
        font: 500 18px/24px "Roboto", sans-serif; } }
  #categories_block_left li {
    position: relative;
    padding: 13px 0 11px 19px;
    border-top: 1px solid #c6c6c6; }
    @media (min-width: 992px) and (max-width: 1199px) {
      #categories_block_left li {
        padding: 13px 0 11px 9px; } }
    @media (max-width: 991px) {
      #categories_block_left li {
        padding: 13px 0 11px 9px; } }
    #categories_block_left li:first-child {
      border: none;
      padding-top: 0; }
    #categories_block_left li a {
      font: 700 16px/18px "Roboto", sans-serif;
      color: #000;
      text-transform: uppercase;
      display: inline-block;
      padding: 0 0px 0 0px; }
      @media (min-width: 992px) and (max-width: 1199px) {
        #categories_block_left li a {
          font: 700 14px/18px "Roboto", sans-serif; } }
      @media (max-width: 991px) {
        #categories_block_left li a {
          font: 700 14px/18px "Roboto", sans-serif; } }
    #categories_block_left li span.grower {
      display: block;
      background: #ffff;
      position: absolute;
      right: 0;
      top: 7px;
      cursor: pointer;
      font-family: "FontAwesome";
      font-size: 14px; }
      #categories_block_left li span.grower.OPEN:before, #categories_block_left li span.grower.CLOSE:before {
        content: "";
        display: block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        color: #777;
        line-height: 30px;
        text-align: center; }
      #categories_block_left li span.grower.CLOSE:before {
        content: "";
        color: #000; }
    #categories_block_left li span.grower:hover + a,
    #categories_block_left li a:hover,
    #categories_block_left li a.selected {
      color: #fea800; }
    #categories_block_left li ul {
      padding-top: 14px;
      padding-bottom: 0px; }
      #categories_block_left li ul li {
        padding: 0 0 8px 3px;
        border: none; }
        #categories_block_left li ul li a {
          color: #0c70ff;
          font: 700 13px/18px "Roboto", sans-serif; }
          #categories_block_left li ul li a:before {
            content: "";
            font-family: "FontAwesome";
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            padding-right: 5px;
            color: #fea800; }

 

Thanks for any help.

Cheers

Greg
 

[cynthia1301]

Hello,

 

I am in the same questionning (excuse my english, i am french).

 

I found a beginning in this : https://www.prestashop.com/forums/topic/267940-solved-different-color-for-each-category-background/?hl=%2Bcss+%2Bdifferent+%2Bcategories+%2Bblockcategories&do=findComment&comment=1339423

 

But i guess you work on a more recent version of PS (such as i do).

 

i am sorry not to have the answer but a start of reflexion.

 

Regards