1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Ładniejsza stopka w sklepie Click Shop

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 22 Lipiec 2015.

  1. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    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:
    Kod:
    .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:
    Kod:
     <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:
    Kod:
      <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:
    footer.png
     
    akkir, trifit.pl, MałgorzataK oraz 1 dodatkowa osoba lubi tego posta.
  2. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    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.
     
  3. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    za chwilkę jeszcze jedna stopka która może się przydać :)
     
    Ostatnia modyfikacja: 22 Lipiec 2015
  4. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Stopka czarna z jasnymi napisami.
    W tym przypadku nie modyfikujemy stylu a jedynie plik footer.tpl




    Wyszukujemy:
    Kod:
      <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:
    Kod:
    <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:
    footer2.png
     
  5. zapachciszy

    zapachciszy Praktyk

    Wiadomości:
    32
    Docenione treści:
    1
    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/
     
  6. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Kod:
    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;
    }
     
    zapachciszy lubi to.
  7. zapachciszy

    zapachciszy Praktyk

    Wiadomości:
    32
    Docenione treści:
    1
    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/

    dylemat_02.png

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

    zapachciszy Praktyk

    Wiadomości:
    32
    Docenione treści:
    1
    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.
     
  9. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    jeśli chodzi o zmianę na kolor biały to wystarczy w stylu za footer { dodać:
    Kod:
    color:#ffffff;
    
     
  10. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    a zmiana na biały niebieski po najechaniu:
    Kod:
    footer .innerfooter a:hover {
    color:blue;
    }
    
    ale w sumie wtedy należałoby nie dodawać tego z poprzedniego postu ale dodać też
    Kod:
    footer .innerfooter a {
    color:#ffffff;
    }
    
     
  11. zapachciszy

    zapachciszy Praktyk

    Wiadomości:
    32
    Docenione treści:
    1
    Dziękuję jak zwykle PIĘKNIE TheL - sprawdzę to pózniej - mam nadzieję - że będzie tak jak trzeba :)
     
  12. zapachciszy

    zapachciszy Praktyk

    Wiadomości:
    32
    Docenione treści:
    1
    Niestety TheL - nic się nie zmienia - zero ruchu w kierunku moich zapotrzebowań wizualnych.
    :( - może coś wykombinujesz innego?!?!?!

    Z samym białym - też nici :(
     
  13. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    @zapachciszy spróbuj tego
    Kod:
    .innerfooter ul li a:hover {
        color: #ffffff;
    }
     
  14. zapachciszy

    zapachciszy Praktyk

    Wiadomości:
    32
    Docenione treści:
    1
    JEST :)
    oczywiście po gamoniowatemu musiałam dojść do tego aby wstawić wcześniej footer. :)
    DZIĘKI michalhockey
     
  15. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Faktycznie - zapomniałem o tym :) Szkoda, że nie mogę edytować mojej poprzedniej wiadomości aby było poprawnie napisane
     
  16. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    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! :)
     
  17. zapachciszy

    zapachciszy Praktyk

    Wiadomości:
    32
    Docenione treści:
    1
    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 :)
     
  18. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Dokładny kod do wstawienia tła do stopki to:
    Kod:
    .footer {
    margin-bottom: 3em;
    padding-bottom: 1.5em;
    background-image: url("http://linkdoobrazka");
    background-position: 0 -5px;
    }
    
     
  19. e-swiece

    e-swiece Nowicjusz

    Wiadomości:
    24
    Docenione treści:
    2
    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.
     
    Ostatnia modyfikacja: 24 Listopad 2015
  20. Grzesiek

    Grzesiek Centrum Pomocy home.pl

    Wiadomości:
    3 660
    Docenione treści:
    333
    @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.
     

Poleć forum znajomym