Jump to content

Passage à la ligne dans le block top menu

fab59000
 Share

Recommended Posts

fab59000 Newbie

fab59000

Posted
Posted

Bonjour je cherche une solution pour passer mon texte à la ligne dans le block top menu car mes libellés sont trop longs.

je pensais agir dans le fichier TPL mais je ne sais pas ou

qui peux m'aider

merci

 

{if $MENU != ''}
    <!-- Menu -->
    <div id="block_top_menu" class="sf-contener clearfix col-lg-12">
        <div class="cat-title">{l s="Categories" mod="blocktopmenu"}</div>
        <ul class="sf-menu clearfix menu-content">
            {$MENU}
            {if $MENU_SEARCH}
                <li class="sf-search noBack" style="float:right">
                    <form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
                        <p>
                            <input type="hidden" name="controller" value="search" />
                            <input type="hidden" value="position" name="orderby"/>
                            <input type="hidden" value="desc" name="orderway"/>
                            <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
                        </p>
                    </form>
                </li>
            {/if}
        </ul>
    </div>
    <!--/ Menu -->
{/if}

Link to comment
Share on other sites
Embalim Newbie

Embalim

Posted
Posted (edited)

Hello Fab,

 

Je ne vois pas trop à quoi ressemble tes libellés mais tu peux essayer ceci :

 

A chaque fin de ligne de code (où se situe ton libellé) tu ajoutes cette balise : </br> ou <br>, c'est un saut de ligne ;)

 

Ou alors tu modifies ton CSS pour changer les tailles de tes <div>.

Edited by Embalim (see edit history)
Link to comment
Share on other sites
fab59000 Newbie

fab59000

Posted
  • Author
Posted

J'ai regardé je ne vois pas trop ou toucher :(

/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  float: left;
  width: 100%; }

.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }

.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #827A67;
  background: #827A67; }
  @media (max-width: 767px) {
    .sf-menu {
      display: none; } }

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #A69F8D; }
  @media (max-width: 767px) {
    .sf-menu ul {
      position: relative; } }

.sf-menu ul li {
  width: 100%; }

.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ }

.sf-menu > li {
  float: left;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px; }
  @media (max-width: 767px) {
    .sf-menu > li {
      float: none;
      position: relative;
      border-right: none; }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
        top: 20px;
        width: 30px;
        height: 30px;
        z-index: 2; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 20px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }
  .sf-menu > li > a {
    font: 600 14px "Open Sans", sans-serif;
    text-transform: uppercase;
    color: #FFFFFF;
    display: inline-block;
    padding: 15px 18px;
    font-weight: normal
    border-bottom: 3px solid #e9e9e9; }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #A69F8D;
    border-bottom-color: #666666;
    color: #fff; }

.sf-menu li li li a {
  display: inline-block;
  position: relative;
  color: #FFFFFF;
  font-size: 13px;
  line-height: 16px;
  font-weight: bold;
  padding-bottom: 10px; }
  .sf-menu li li li a:before {
    content: "\f105";
    display: inline-block;
    font-family: "FontAwesome";
    padding-right: 10px; }
  .sf-menu li li li a:hover {
    color: #333; }

.sf-menu li ul {
  display: none;
  left: 0;
  top: 59px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0; } }

.sf-menu li li ul {
  position: static;
  display: block !important;
  opacity: 1 !important;
  background: none;
  -moz-box-shadow: transparent 0px 0px 0px;
  -webkit-box-shadow: transparent 0px 0px 0px;
  box-shadow: transparent 0px 0px 0px; }

.sf-menu li li li ul {
  padding: 0 0 0 20px; }

.sf-menu li li li ul {
  width: 220px; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%; }
  .sf-menu > li > ul > li > a {
    text-transform: uppercase;
    font: 600 16px/20px "Open Sans", sans-serif;
    color: #333; }
    .sf-menu > li > ul > li > a:hover {
      color: #515151; }

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 15px; }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%;
      padding-bottom: 20px; } }
  @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }
  @media (min-width: 480px) and (max-width: 767px) {
    .sf-menu > li > ul > li.first-in-line-xs {
      clear: left; } }

.sf-menu > li > ul > li.category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-right: 0; }
  .sf-menu > li > ul > li.category-thumbnail > div {
    float: left;
    padding-left: 10px;
    width: 33.333%; }
    @media (max-width: 479px) {
      .sf-menu > li > ul > li.category-thumbnail > div {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        text-align: center; } }
    .sf-menu > li > ul > li.category-thumbnail > div:first-child {
      padding-left: 0; }
    .sf-menu > li > ul > li.category-thumbnail > div img {
      max-width: 100%;
      display: block; }

.cat-title {
  display: none; }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 600 18px/22px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #484848;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #e9e9e9;
      background: #FF0000;
      position: relative; }
      .cat-title:hover {
        background: #333;
        border-bottom-color: #666666;
        color: #fff; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }

.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }

#block_top_menu .category-thumbnail {
  clear: both;
  width: 100%;
  float: none; }
  #block_top_menu .category-thumbnail div {
    float: left;
    width: 33.33333%; }
    #block_top_menu .category-thumbnail div img {
      max-width: 100%; }
#block_top_menu li.category-thumbnail {
  padding-right: 0; }

/*# sourceMappingURL=superfish-modified.css.map */

 

merci

Link to comment
Share on other sites
fab59000 Newbie

fab59000

Posted
  • Author
Posted

Les libellés sont en base

{if $MENU != ''}
    <!-- Menu -->
    <div id="block_top_menu" class="sf-contener clearfix col-lg-12">
        <div class="cat-title">{l s="Categories" mod="blocktopmenu"}</div>
        <ul class="sf-menu clearfix menu-content">
            {$MENU}
            {if $MENU_SEARCH}
                <li class="sf-search noBack" style="float:right">
                    <form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
                        <p>
                            <input type="hidden" name="controller" value="search" />
                            <input type="hidden" value="position" name="orderby"/>
                            <input type="hidden" value="desc" name="orderway"/>
                            <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
                        </p>
                    </form>
                </li>
            {/if}
        </ul>
    </div>
    <!--/ Menu -->
{/if}

Link to comment
Share on other sites
fab59000 Newbie

fab59000

Posted
  • Author
Posted

Si j'ai bien compris cette ligne

 <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />

 

va lire la BD afin de récupérer les libellés du menu. Ces libellés sont renseignés via le module dans le back office

Je veux par exemple pour un libellé long le faire passer à la ligne

 

"PROTECTION DE BOXE THAI"

 

devient

 

"PROTECTION DE

BOXE THAI"

 

on ne peux pas ajouter de BR dans le back office

merci

Link to comment
Share on other sites
Embalim Newbie

Embalim

Posted
Posted

A quoi correspond la première ligne ? dans quel fichier est-elle ?

 

BD ? c'est à dire ?

 

Je pense que tu devras faire les modifications dans ton CSS...

 

Après, sans voir ton site, j'ai du mal à visualiser ^^

Link to comment
Share on other sites
fab59000 Newbie

fab59000

Posted
  • Author
Posted

Mon site est en local sous wamp,la premier eligne est extraite du menu.tpl

{if $MENU != ''}
    <!-- Menu -->
    <div id="block_top_menu" class="sf-contener clearfix col-lg-12">
        <div class="cat-title">{l s="Categories" mod="blocktopmenu"}</div>
        <ul class="sf-menu clearfix menu-content">
            {$MENU}
            {if $MENU_SEARCH}
                <li class="sf-search noBack" style="float:right">
                    <form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
                        <p>
                            <input type="hidden" name="controller" value="search" />
                            <input type="hidden" value="position" name="orderby"/>
                            <input type="hidden" value="desc" name="orderway"/>
                            <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
                        </p>
                    </form>
                </li>
            {/if}
        </ul>
    </div>
    <!--/ Menu -->
{/if}

 

BD base de donnée :) merci

Link to comment
Share on other sites
Embalim Newbie

Embalim

Posted
Posted

Hum ok !

 

Je ne connais pas plus loin le fonctionnement de Prestashop après donc ça va être compliqué pour moi ^^

 

Peut-être qu'il faut mettre le <br> à un autre endroit dans le code... ou ce n'est pas le bon fichier.tpl lol

 

Je laisse la place à quelqu'un de plus expérimenté :)

 

Bon courage !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...