PORADNIK Ładniejsza stopka w sklepie Click Shop

sprawę 5 kolumny mamy rozwiązaną, tzn: brak rozwiązania
a co z linią nad stopką? ja mam tak www.e-swiece.pl a chce tak www.e-dewocjonalia.eu (cieńka linia nad stopką)
proszę o wskazówki

 

@e-swiece mam wrażenie, że widzę w obu podanych projektach ciemną linię nad stopką. Udało Ci się rozwiązać już ten temat?

 

u mnie coś drugie menu stopki nie zadziałało możesz sprawdzić co się podziało ?

 

sprawdź czy masz styl dla footgroup5, ja robiłem tylko dla 1,2,3,4, zamień w moim stylu z 3 na 5 i zadziała

 

Niedługo nowa wersja stopki w pełni RWD tylko muszę posiedzieć jeszcze trochę nad nią

 

chętnie poczekam i ją wykorzystam

 

super działa
dzięki @TheL

 

nie ma za co, cieszę się, że udało mi się pomóc

 

Stopka poprawiona aby dobrze skalowała się razem ze stroną.
Wynik
Stopka zwykła

Stopka mniejsza (po skalowaniu okna)

Stopka mobilna



Kod CSS (wstawiamy we własny Styl)

Code:

@media (max-width: 780px){
.focla {background-color:#000000;margin-top:10px;color:#ffffff;padding-top:20px;}
.foul {border-left: 1px solid #ffffff;border-bottom: 1px solid #ffffff;margin-bottom: 14px;padding-bottom: 0px;min-height:130px;max-width:95%;}
.foli {color:#dadada;display:block;font-size:20px;height:30px;margin-left:10px;}
.foa {color:#ffffff;margin-left:10px;}
}
@media (min-width: 780px){
.focla {background-color:#000000;margin-top:10px;color:#ffffff;padding-top:20px;}
.foul {border-left: 3px solid #ffffff;}
.foli {color:#dadada;display:block;font-size:20px;height:30px;margin-left:10px;}
.foa {color:#ffffff;margin-left:10px;}
}

Następnie edytujemy kod stopki czyli plik footer.tpl
Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Edycja zaawansowana
Należy najechać na zębatkę i wybrać Edytuj

Kod:

Code:

<footer class="footer row">
<div class="innerfooter container row">
<ul class="overall{if 1 == count($footergroups)} singlecol{/if}">
{foreach from=$footergroups item=group name=groups}
<li class="overall flex flex-{$footergroups|count}" id="footgroup{$group->getIdentifier()}">
<ul>
<li class="head hidden">{$group->group->name|escape}</li>
{foreach from=$group->links item=link name=links}
{if $link->getHref()}
<li>
<a href="{$link->getHref()|escape}" {if $link->isPopup()}target="_blank"{/if} title="{$link->getTitle()|escape}" id="footlink{$link->getIdentifier()}">
<img alt="" src="{baseDir}/public/images/1px.gif">
{$link->getTitle()|escape}
</a>

zastępujemy kodem:

Code:

<footer class="focla">
  <div class="container row">
  <ul class="overall{if 1 == count($footergroups)} singlecol{/if}">
  {foreach from=$footergroups item=group name=groups}
  <li class="overall flex flex-{$footergroups|count}" id="footgroup{$group->getIdentifier()}">
  <ul class="foul">
  <li class="foli">{$group->group->name|escape}</li>
  {foreach from=$group->links item=link name=links}
  {if $link->getHref()}
  <li class="scrfootlink">
  <a class="foa" href="{$link->getHref()|escape}" {if $link->isPopup()}target="_blank"{/if} title="{$link->getTitle()|escape}" id="footlink{$link->getIdentifier()}">
  <img alt="" src="{baseDir}/public/images/1px.gif">
  {$link->getTitle()|escape}
  </a>
  

Testowane tylko na 4 kolumnach w stopce, nie wiem jak zachowa się z 5 i czy nie trzeba będzie wymiarów zmienić.

 

wow super ale @TheL możesz taką zmianę zrobić również dla tej stopki co proponowałeś z kolorami - jak u nas najtanszegadztey.pl

 

Przy kolorowej jest nieco więcej zabawy, w wolnej chwili poprawię kod.

 

no to ja już się nie mogę doczekać - kolorowa jest gitesik

 

czyli nie będzie kolorowej :/

 

ale chodzi Ci o tą poprawioną bo jakiś czas mnie nie było i się pogubiłem

 

tak , mzieniłem kolorową stopkę na na stronie działa jest super ale ona się nie wyświetla prawidłowo na mobilnej wersji.

 

a dokładnie chodzi o to - zrzut

 

@TheL a da rade zmniejszyc width stopki np. na 90%? zeby byla wysrodkowana? ;/

 

@najtanszegadzety.pl w opisanym przez Ciebie przypadku, próbowałbym ukryć te elementy za pomocą poniższego kodu:

Code:

@media screen and (max-width: 767px)
.rwd footer .innerfooter ul li {
    display: none;
}

Kod ten powinien spowodować nie wyświetlanie zaznaczonych przez Ciebie na zrzucie ekranu elementów na wersji mobilnej sklepu. Oznacza to, że po włączeniu mobilnej wersji sklepu, pokazane na zrzucie elementy zostaną ukryte. Sprawdź czy działa to poprawnie u Ciebie na sklepie w wersji mobilnej.

 

a gdzie to mam wklić we własny CSS ?

 

Tak dokładnie. Wklejenie zaproponowanego przez ze mnie kodu we "Własny CSS" powinno spowodować nie wyświetlanie zaznaczonego przez Ciebie elementu na wersji mobilnej sklepu.