PORADNIK Ładniejsza stopka w sklepie Click Shop

Czy już znudziła Wam się zwykła stopka w sklepie? Może już czas na podmiankę
Poniżej poradnik jak odrobinkę uatrakcyjnić stopkę naszego sklepu.

We własny kod CSS
Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Własny styl CSS
wklejamy:

Code:

.scrfootlink {
  margin-left:10px;
}
.scrfoot1 {
  color: #0f58a3;
  display: block;
  font-size: 20px;
  height: 30px;
  margin-left:10px;
}
.scrfoota1 {
  border-left: 6px solid #0f58a3;
}
.scrfoot2 {
  color: #e80f0f;
  display: block;
  font-size: 20px;
  height: 30px;
  margin-left:10px;
}
.scrfoota2 {
  border-left: 6px solid #e80f0f;
}
.scrfoot3 {
  color: #26820d;
  display: block;
  font-size: 20px;
  height: 30px;
  margin-left:10px;
}
.scrfoota3 {
  border-left: 6px solid #26820d;
}
.scrfoot4 {
  color: #820d60;
  display: block;
  font-size: 20px;
  height: 30px;
  margin-left:10px;
}
.scrfoota4 {
  border-left: 6px solid #820d60;
}

Z zaznaczeniem, że każdy zestaw klas scrfoot i scrfoota odpowiada za jedną kolumnę w stopce, jeśli tych kolumn będziemy mieli więcej po prostu dodajemy kolejne klasy scrfoot5 oraz scrfoota5 (6,7 itd) dobierając im kolor przy color: oraz border-left.

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

Teraz szukamy:

Code:

 <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>

i zamieniamy na:

Code:

  <li class="overall flex flex-{$footergroups|count}" id="footgroup{$group->getIdentifier()}">
  <ul class="scrfoota{$group->getIdentifier()}">
  <li class="scrfoot{$group->getIdentifier()}">{$group->group->name|escape}</li>
  {foreach from=$group->links item=link name=links}
  {if $link->getHref()}
  <li class="scrfootlink">

Oto efekt zmian:

 

Nasz ekspert od sklepów Click Shop nie daje o sobie zapomnieć . Dzięki poradnikowi od użytkownika @TheL możecie trochę pokolorować wygląd stopki w Click Shop.

 

za chwilkę jeszcze jedna stopka która może się przydać

 

Stopka czarna z jasnymi napisami.
W tym przypadku nie modyfikujemy stylu a jedynie plik footer.tpl




Wyszukujemy:

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>

Zamieniamy na:

Code:

<footer style="background-color:#000000;margin-top:10px;color:#ffffff;padding-top:20px;">
  <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 style="border-left: 3px solid #ffffff;">
  <li style="color:#dadada;display:block;font-size:20px;height:30px;margin-left:10px;">{$group->group->name|escape}</li>
  {foreach from=$group->links item=link name=links}
  {if $link->getHref()}
  <li class="scrfootlink">
  <a style="color:#ffffff;margin-left:10px;" 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>

Nie ważne ile wstawimy kolumn, wszystkie będą wyglądały tak samo. Wiersz stopki jest na całą szerokość strony.

Efekt:

 

Ciekawi mnie jeszcze jedno rozwiązanie...
...jak wrzucić w stopce tło - takie jak na górnym panelu z logo.
hmmm???
link na stronkę - http://sklep1505671.home.pl/

 

Code:

footer {
margin-bottom: 3em;
padding-bottom: 1.5em;
background-color: #FFF;
background-image: url("http://sklep1505671.home.pl/skins/user/rwd_clickshop_5/images/logo_background.png");
background-position: 0 -5px;
}

 

Dziękuję ślicznie Stau
Już prawie pięknie to wygląda - ale...
...wstawiłam skrypcik jaki podał TheL na początku posta - wszystko ok ale opisy na czarno tak jak widać w załączonym zdjęciu lepiej będą wyglądały białe.
I jak to zrobić???

Oprócz tego jeszcze ten nieszczęsny pasek (na zdjęciu kolor żółty) - da się jakoś go przerobić na czarny???

Jak zwykle - z góry ŚLICZNIE DZIĘKUJĘ

link na stronkę - http://sklep1505671.home.pl/



P.S.
Adminku bez wścieklizny - tematy tu mi się łączą

 

Stau - z paseczkami już sprawa załatwiona - ZADZIAŁAŁO jak trzeba
Co do zmiany napisów w/z zdjęciu...
...oprócz zamiany na kolor biały poproszę o jeszcze jedno rozwiązanie - może być ciekawie
Otóż jak zmienić (wspomniane czarne napisy) - aby po najechaniu na nie - zmieniały się na kolor biały - a nie jak teraz na szary - plum.

Modzę - ale szukam jakiegoś ciekawego wyjścia
DZIĘKI z górki.

 

jeśli chodzi o zmianę na kolor biały to wystarczy w stylu za footer { dodać:

Code:

color:#ffffff;

 

a zmiana na biały niebieski po najechaniu:

Code:

footer .innerfooter a:hover {
color:blue;
}

ale w sumie wtedy należałoby nie dodawać tego z poprzedniego postu ale dodać też

Code:

footer .innerfooter a {
color:#ffffff;
}

 

Dziękuję jak zwykle PIĘKNIE TheL - sprawdzę to pózniej - mam nadzieję - że będzie tak jak trzeba

 

Niestety TheL - nic się nie zmienia - zero ruchu w kierunku moich zapotrzebowań wizualnych.
- może coś wykombinujesz innego?!?!?!

Z samym białym - też nici

 

@zapachciszy spróbuj tego

Code:

.innerfooter ul li a:hover {
    color: #ffffff;
}

 

JEST
oczywiście po gamoniowatemu musiałam dojść do tego aby wstawić wcześniej footer.
DZIĘKI michalhockey

 

Faktycznie - zapomniałem o tym Szkoda, że nie mogę edytować mojej poprzedniej wiadomości aby było poprawnie napisane

 

Zastanowimy się nad zmianą zasad edycji postów. Z różnych względów postanowiliśmy zablokować edycje postów czasowo (możliwość edycji dostępna jest kilkadziesiąt minut po zapisaniu ostatniej wersji posta).

Cieszę się, że udało wam się wspólnymi siłami rozwiązać kwestię poruszoną przez nową użytkowniczkę @zapachciszy - korzystając z okazji serdecznie witam i ufam, że zostaniesz z nami na dłużej!

 

Jak najbardziej - a nawet WIĘCEJ.
Miło jest zawsze otrzymywać szybką pomoc - a tutaj wszystko gra jak w szwajcarskim zegarku.
Nie wspominając o miłym TOWARZYSTWIE
Pozdrawiam

 

Dokładny kod do wstawienia tła do stopki to:

Code:

.footer {
margin-bottom: 3em;
padding-bottom: 1.5em;
background-image: url("http://linkdoobrazka");
background-position: 0 -5px;
}

 

Witam, chcę podłączyć się pod temat: jak dodać linię nad stopką? www.e-swiece.pl
oraz zgodnie ze wskazówkami, dodaje cześć 5 stopki, i mimo zmienienia kolorów - nie działa ta piata kolumna stopki.

 

@Stau faktycznie, dla 5 kolumny niezależnie gdzie ją dodamy, nie działa ten styl. Dodatkowo, niestety, to rozwiązanie koliduje z RWD. Przy mniejszym ekranie stopka już nie rozwija się. Jest bezużyteczna. To zadanie przerasta moje umiejętności.