Edycja górnej belki menu

Burnago · March 3, 2020

Cześć. Jestem w fazie budowy sklepu. Zmodyfikowałem sam wiele rzeczy czasami z pomocą innych osób lecz nie umiem sobie poradzić z jedną rzeczą.

Na wstępie powiem, że nie znam się na tym dlatego proszę o w miarę proste słownictwo.

Na sklepie z szablonem prestige_fashion próbuję edytować górną belkę tak, aby dodać na sztywno 1-2 przyciski. Chciałem do tych przycisków dodać inne klasy w pliku css aby napis się wyróżniał od pozostałych (jakaś animacja lub kolor). Standardowo z poziomu zaplecza nie da się tego zrobić.

Znalazłem plik odpowiadający za tą część i jest to ps_mainmenu.tpl

Znalazłem pod koniec fragment kodu który odpowiada za wyświetlenie belki.

<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" id="_desktop_top_menu">
{menu nodes=$menu.children}
</div>

{menu nodes=$menu.children} jest rozpisane wyżej w pliku. Jest to cała budowa jak ma to menu się wyświetlać. W samej budowie nic nie zmieniam bo burzy to całą belkę. Przycisk chciałem dodać poza {menu nodes=$menu.children}.

Kod na przycisk wymyślony metodą prób i błędów to:

	<div class="row">
		<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" >
			<ul class="top-menu" >
				<li class="link" >
                    <a class="dropdown-item" href="https://google.pl" data-depth="0">test</a>
                </li>
			</ul>
		</div>
	</div>

Teraz pojawia się problem. Jak dodać ten kod aby przycisk wyświetlał się z boku belki a nie pod nią? Jak dodaję kod zaraz przed {menu nodes=$menu.children} to przycisk pojawia się na belce przed menu na właściwej wysokości lecz dużo przed samymi kategoriami. Jak dodam kod po {menu nodes=$menu.children} jak cytat poniżej to przycisk ląduje pod menu.

<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" id="_desktop_top_menu">
{menu nodes=$menu.children}
<div class="row">
		<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" >
			<ul class="top-menu" >
				<li class="link" >
                    <a class="dropdown-item" href="https://google.pl" data-depth="0">test</a>
                </li>
			</ul>
		</div>
	</div>
</div>

Jak uprzedzałem, nie jestem programistą, sam próbuję coś po pracy działać lecz akurat z tym szczególnie nie daje sobie rady.

Ktoś coś pomoże?

Pozdrawiam.

Edited March 3, 2020 by Burnago (see edit history)

atomek · March 23, 2020

Dla każdego elementu elementu li w menu jest dodawane id, np. dla elementu "Promocje" id="lnk-promocje"

Aby zmienić kolor czcionki w linku (a) tym elemencie dodaj do css regułę, np:

#top-menu li#lnk-promocje > a {
color: red !important;
}

Powinno działać,

endriu107 · March 4, 2020

Czy menu ma możliwość dodawania własnych linków? Jeśli tak to najlepiej tak zrobić a osobne klasy dla nich nie są potrzebne ponieważ można skorzystać z selektora css :nth-child.

Druga opcja z dodanymi na sztywno linkami tak jak próbujesz to prawdopodobnie kwestia również ostylowania, menu za pewne jest budowane w kontrolerze i najlepiej tam dodać linki wtedy będzie wszystko integralne.

Burnago · March 4, 2020

endriu107 menu ma możliwość dodawania linków na zapleczu - posiadam prestę 1.7.6.1. Z tym nie ma problemu.

Próbuję dodany przycisk ostylować inaczej niż reszta. Z poziomu zaplecza przycisk dodaje się na każde inne w menu a chcę żeby wyglądał inaczej. Dlatego zacząłem od edycji mainmenu.tpl. Plan był taki aby tam dodać kod na przycisk omijając zaplecze.

Trzeba przerobić ten kod:

<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" id="_desktop_top_menu">
{menu nodes=$menu.children}
	<div class="row">
		<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" >
			<ul class="top-menu" >
				<li class="link" >
                    <a class="dropdown-item" href="https://google.pl" data-depth="0">test</a>
                </li>
			</ul>
		</div>
	</div>
</div>

w taki sposób żeby zrobić przycisk "test" koło zestawu przycisków kategorii.

Trzeba wykombinować coś aby przycisk:

    <div class="row">
        <div class="menu col-lg-12 js-top-menu position-static hidden-md-down" >
            <ul class="top-menu" >
                <li class="link" >
                    <a class="dropdown-item" href="https://google.pl" data-depth="0">test</a>
                </li>
            </ul>
        </div>
    </div>

oraz zestaw kategorii:

{menu nodes=$menu.children}

Były obok siebie tak jak by to było jedno menu.

Edited March 4, 2020 by Burnago (see edit history)

endriu107 · March 4, 2020

Dodaj jako link w module menu ten dodatkowy przycisk i ostyluj go używając selektora.

Tutaj masz przykład gdzie wszystkie elementy w menu mają tą samą klasę ale jeden jest ostylowany inaczej używając selektora https://jsfiddle.net/2drhk69m/

Burnago · March 4, 2020

To co mi wysłałeś to świetna sprawa, dużo mi wyjaśnia i przyda się na przyszłość dobrze. Jak ostylować już wiem. Dziękuje.

Natomiast tak jak we wcześniejszym poście problemem jest to aby ten przycisk był zaraz obok innych w menu.

Chałpniczo częściowo poradziłem sobie za pomocą tabel Jest to mało profesjonalne ale ja nie jestem profesjonalistą. Na razie bez stylowania. Aby ustawić przycisk test obok menu napisałem taką funkcję:

<center>
<table border frame="void" border rules="none">
   <tr>
		<td algin="right">
			<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" id="_desktop_top_menu">{menu nodes=$menu.children}</div>
		</td> 
		<td algin="left">
			<div class="row">
				<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" >
					<ul class="top-menu" >
						<li class="link" >
							<a class="dropdown-item" href="https://google.pl" data-depth="0">test</a>
						</li>
					</ul>
				</div>
			</div>
		</td>
   </tr>
</table>
</center>

Wynik tego działania jest taki jak na załączonym PS. Jest to rozwiązanie nie dobre ponieważ między "Promocje" i "test" robi się przerwa. Czy masz pomysł jak to napisać aby nie było przerwy między przyciskami presty i dopisanymi?

Edited March 4, 2020 by Burnago (see edit history)

endriu107 · March 5, 2020

Nie rozumiem dlaczego chcesz to cały czas robić od strony kodu skoro przycisk Test możesz dodać od strony konfiguracji modułu menu i ostylować tak jak pokazałem. Dodatkowo to rozwiązanie usunie potencjalne problemy wyświetlaniem na urządzeniach mobilnych.

Odpowiadając na ostatnie pytanie to przerwa za pewne jest spowodowana tym że blok menu posiada zdeklarowany padding po prawej i lewej stronie.

Burnago · March 5, 2020

Hmm bo całe menu jest generowane dynamicznie w taki magiczny sposób, że nie wiem jaki "adres" ma ten konkretny przycisk.

Wszystkie pozycje menu są w nawiasach { }.

Kod wygląda mniej więcej tak:

{function name="menu" nodes=[] depth=0 parent=null}  
	{if $nodes|count}
      <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {foreach from=$nodes item=node}
			<li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <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="pull-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 $node.children|count}
              <div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                {menu nodes=$node.children depth=$node.depth parent=$node}
              	{if $node.image_urls}
					<div class="banerek_menus">
					  {foreach from=$node.image_urls item=image_url}
						<div class="banerek_menu">
							<img src="{$image_url}" alt="" />
						</div>
					  {/foreach}
					</div>
				{/if}
			  </div>
              {/if}
			</li>
        {/foreach}
</ul>
{/if}
{/function}

Działanie na tabelach przyniosło taki efekt jak na załączonym screenie. Aby przesunąć i usunąć te przerwy dodałem style margin left i right ze znakiem minus.

Niestety, tak jak mówiłeś. Nie wyświetla się to na smartfonach w ogóle. Także sposób realizacji wydaje się być niewłaściwy.

Edited March 5, 2020 by Burnago (see edit history)

endriu107 · March 5, 2020

Wydaje mi się że nie pomogę ponieważ nie potrafię ogarnąć tego dlaczego cały czas chcesz to zrobić edytując kod tpl...

Na moje myślenie wątek powinien się zakończyć po mojej pierwszej odpowiedzi.

Burnago · March 5, 2020

Chyba już wiem o co Ci chodziło.

Trzeba policzyć klasy żeby wiedzieć która to jest z kolei. Najlepiej sprawdzić to na konsoli w z przegladarce bo tam już jest kod wygenerowany. Później w theme.css dodać selektor na tą klasę (na przykład piątą) a kod sam rozpozna który to przycisk?

Jeżeli dobrze zrozumiałem to wygląda to dobrze tylko po dodaniu jakiś elementów do górnego menu w module menu trzeba zmienić selektor.

Dobrze myślę?

endriu107 · March 5, 2020

Wszystkie elementy w menu mają wspólną klasę dla której selektorem nth-child możesz nadać inne właściwości dla wybranych elementów. Czyli mając 10 elementów w menu chcąc nadać inny wygląd dla elementu 8 z kolei w nth-child podajesz wartość 8. Selektor posiada wiele możliwości można określić jakie dokładnie elementy ma obejmować ale to już podstawy css. Wcześniej podałem link w którym można testować działanie.

Burnago · March 5, 2020

Zrobiłem jak powiedziałeś Dobry pomysł. Niestety nth-child działa w tym przypadku na listę czyli na znaczniki li.link - ta klasa opisuje tło przycisku a nie sam napis - czcionkę. Napis jest w klasie .top-menu a[data-depth="0"]

Narzucenie czcionki na selektor li link nie zmienia nic w widoku przycisku. Jak próbuję zamienić li.link na ul.top-menu to nic się nie dzieje.

<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" id="_desktop_top_menu">{menu nodes=$menu.children}</div>
		</td> 
		<td algin="left">
			<div class="row">
				<div class="menu col-lg-12 js-top-menu position-static hidden-md-down" >
					<ul class="top-menu" >
						<li class="link" >
							<a class="dropdown-item" href="https://google.pl" data-depth="0">test</a>
						</li>
					</ul>
				</div>
			</div>

.top-menu a[data-depth="0"] {
    font-size: 18px;
    padding: 1.625rem 1rem;
	  font-family: 'FuturaNewDemi-Reg';
    color: #333333 !important;
    font-weight: 300;
    transition: 0.4s;
    width: 100%;
    text-decoration: none;
    }

Edited March 5, 2020 by Burnago (see edit history)

endriu107 · March 6, 2020

Podaj link do sklepu.

Burnago · March 6, 2020

Cześć. Domena bluewear.online.

Burnago · March 22, 2020

Odświeżam temat. Nadal nie udało mi się zastosować funkcji nth-child do tekstu w górnej belce - menu. Czy może ktoś pomóc?

Rozwiązanie zaproponowane przez endriu działa tylko w tle przycisku a nie w samym tekście.

Edited March 22, 2020 by Burnago (see edit history)

Burnago · March 23, 2020

Działa tego właśnie szukałem. Dziękuje.

Edycja górnej belki menu

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in