Jump to content

Edit History

MrSoulPC915

MrSoulPC915

Bon, pas très compliqué, tout se passe dans le fichier /themes/classic_child/modules/ps_mainmenu/ps_mainmenu.tpl. Deux méthodes :

Facile :

On remplace : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >

par : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{if $node.type == "cms-category"}#{else}{$node.url}{/if}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >

Ça fonctionne direct, ça créer des liens interne vide (c'est pas idéal).

Avancé :

On remplace : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>

par : 

              {if $node.type == "cms-category"}
                <span
                  class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                  data-depth="{$depth}"
                  {if $node.open_in_new_window} target="_blank" {/if}
                >
                  {if $node.children|count}
                    {* Cannot use page identifier as we can have the same page several times *}
                    {assign var=_expand_id value=10|mt_rand:100000}
                    <span class="float-xs-right hidden-md-up">
                      <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                        <i class="material-icons add">&#xE313;</i>
                        <i class="material-icons remove">&#xE316;</i>
                      </span>
                    </span>
                  {/if}
                  {$node.label}
                </span>
              {else}
                <a
                  class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                  href="{$node.url}" data-depth="{$depth}"
                  {if $node.open_in_new_window} target="_blank" {/if}
                >
                  {if $node.children|count}
                    {* Cannot use page identifier as we can have the same page several times *}
                    {assign var=_expand_id value=10|mt_rand:100000}
                    <span class="float-xs-right hidden-md-up">
                      <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                        <i class="material-icons add">&#xE313;</i>
                        <i class="material-icons remove">&#xE316;</i>
                      </span>
                    </span>
                  {/if}
                  {$node.label}
                </a>
              {/if}

C'est idéal car les catégories CMS ne sont plus des liens, mais il faut rajouter un pointe de CSS pour que les balises span du menu aient le même aspect que les a.

Donc on rajoute dans /themes/classic_child/config/theme.yml : 

assets:
  use_parent_assets: true
  css:
  all:
    - id: custom-style
    path: assets/css/custom.css

et dans /themes/classic_child/assets/css/custom.css : 

#header .header-top span[data-depth="0"] {
  color: #7a7a7a;
  text-transform: uppercase;
  cursor: pointer;
}
.top-menu span[data-depth="0"] {
  padding: .625rem;
  font-size: 1rem;
  font-weight: 600;
}

 

PS : Et évidemment, on vide le cache !

MrSoulPC915

MrSoulPC915

Bon, pas très compliqué, tout se passe dans le fichier /themes/classic_child/modules/ps_mainmenu/ps_mainmenu.tpl. Deux méthodes :

Facile :

On remplace : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >

par : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{if $node.type == "cms-category"}#{else}{$node.url}{/if}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >

Ça fonctionne direct, ça créer des liens interne vide (c'est pas idéal).

Avancé :

On remplace : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>

par : 

              {if $node.type == "cms-category"}
                <span
                  class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                  data-depth="{$depth}"
                  {if $node.open_in_new_window} target="_blank" {/if}
                >
                  {if $node.children|count}
                    {* Cannot use page identifier as we can have the same page several times *}
                    {assign var=_expand_id value=10|mt_rand:100000}
                    <span class="float-xs-right hidden-md-up">
                      <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                        <i class="material-icons add">&#xE313;</i>
                        <i class="material-icons remove">&#xE316;</i>
                      </span>
                    </span>
                  {/if}
                  {$node.label}
                </span>
              {else}
                <a
                  class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                  href="{$node.url}" data-depth="{$depth}"
                  {if $node.open_in_new_window} target="_blank" {/if}
                >
                  {if $node.children|count}
                    {* Cannot use page identifier as we can have the same page several times *}
                    {assign var=_expand_id value=10|mt_rand:100000}
                    <span class="float-xs-right hidden-md-up">
                      <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                        <i class="material-icons add">&#xE313;</i>
                        <i class="material-icons remove">&#xE316;</i>
                      </span>
                    </span>
                  {/if}
                  {$node.label}
                </a>
              {/if}

C'est idéal car les catégories CMS ne sont plus des liens, mais il faut rajouter un pointe de CSS pour que les balises span du menu aient le même aspect que les a.

Donc on rajoute dans /themes/classic_child/config/theme.yml : 

assets:
  use_parent_assets: true
  css:
  all:
    - id: custom-style
    path: assets/css/custom.css

et dans /themes/classic_child/assets/css/custom.css : 

#header .header-top span[data-depth="0"] {
  color: #7a7a7a;
  text-transform: uppercase;
  cursor: pointer;
}
.top-menu span[data-depth="0"] {
  padding: .625rem;
  font-size: 1rem;
  font-weight: 600;
}

 

PS : Et évidemment, on vide le cache !

MrSoulPC915

MrSoulPC915

Bon, pas très compliqué, tout se passe dans le fichier /themes/classic_child/modules/ps_mainmenu/ps_mainmenu.tpl. Deux méthodes :

Facile :

On remplace : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >

par : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{if $node.type == "cms-category"}#{else}{$node.url}{/if}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >

Ça fonctionne direct, ça créer des liens interne vide (c'est pas idéal).

Avancé :

On remplace : 

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>

par : 

              {if $node.type == "cms-category"}
                <span
                  class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                  href="{$node.url}" data-depth="{$depth}"
                  {if $node.open_in_new_window} target="_blank" {/if}
                >
                  {if $node.children|count}
                    {* Cannot use page identifier as we can have the same page several times *}
                    {assign var=_expand_id value=10|mt_rand:100000}
                    <span class="float-xs-right hidden-md-up">
                      <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                        <i class="material-icons add">&#xE313;</i>
                        <i class="material-icons remove">&#xE316;</i>
                      </span>
                    </span>
                  {/if}
                  {$node.label}
                </span>
              {else}
                <a
                  class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                  href="{$node.url}" data-depth="{$depth}"
                  {if $node.open_in_new_window} target="_blank" {/if}
                >
                  {if $node.children|count}
                    {* Cannot use page identifier as we can have the same page several times *}
                    {assign var=_expand_id value=10|mt_rand:100000}
                    <span class="float-xs-right hidden-md-up">
                      <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                        <i class="material-icons add">&#xE313;</i>
                        <i class="material-icons remove">&#xE316;</i>
                      </span>
                    </span>
                  {/if}
                  {$node.label}
                </a>
              {/if}

C'est idéal car les catégories CMS ne sont plus des liens, mais il faut rajouter un pointe de CSS pour que les balises span du menu aient le même aspect que les a.

Donc on rajoute dans /themes/classic_child/config/theme.yml : 

assets:
  use_parent_assets: true
  css:
  all:
    - id: custom-style
    path: assets/css/custom.css

et dans /themes/classic_child/assets/css/custom.css : 

#header .header-top span[data-depth="0"] {
  color: #7a7a7a;
  text-transform: uppercase;
  cursor: pointer;
}
.top-menu span[data-depth="0"] {
  padding: .625rem;
  font-size: 1rem;
  font-weight: 600;
}

 

PS : Et évidemment, on vide le cache !

×
×
  • Create New...