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

Zmiana kolorów elementów takich jak koszyk etc.

Dyskusja w 'Zmiana wyglądu sklepu i edycja zaawansowana' rozpoczęta przez użytkownika MagdaM, 6 Lipiec 2015.

  1. MagdaM

    MagdaM Uczestnik

    Wiadomości:
    29
    Docenione treści:
    1
    Czy mogłabym poprosić o podanie jak można w CSS zmodyfikować kolor takich elementów jak:
    - koszyk
    - domek pod logo, ten który pozwala powrócić na stronę główną
    - oznaczenie promocja
     
  2. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Oznaczenie promocja przy produkcie (np. na stronie głównej). Kod #000000 oznacza, że tło oznaczenia promocja będzie czarne. Możesz zmienić kolor, wpisując inne oznaczenie koloru.

    Zmiany wykonujesz w Konfiguracja --> Wygląd --> Aktywny styl graficzny --> Własny styl CSS, dodając odpowiednie fragmenty kodu.


    Kod:
    .product .tags .promo {
        background-color: #000000;
    }


    Domek pod logo (np. na stronie głównej). Kod #000000 oznacza, że tło "domku" będzie czarne. Możesz zmienić kolor, wpisując inne oznaczenie koloru.
    Kod:
    .menu .innermenu .menu-list li.home-link-menu-li a {
        background-color: #000000;
    }


    Ikona koszyk w prawym górnym rogu ekranu (np. na stronie głównej sklepu). Kod #000000 oznacza, że tło obszaru o nazwie "Koszyk" będzie czarne.
    Kod:
    .logo-bar .basket {
      background: #FC2D20 url("../../styles/../images/arrow-white-down.png") no-repeat scroll 96% 50%;
    }
     
    Ostatnia modyfikacja: 7 Lipiec 2015
  3. MagdaM

    MagdaM Uczestnik

    Wiadomości:
    29
    Docenione treści:
    1
    Super. Dziękuję!

    Nie zadziałał mi tylko kod do koszyka. To znaczy zmienił kolor, ale nie koszykowi w prawym górnym rogu ekranu, a pod produktami na stronie głównej.

    [​IMG]
     

    Załączone pliki:

  4. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Kod do koszyka, który podałem w poprzednim poście, zmienia kolor koszyka w prawym górnym rogu ekranu sklepu. W przypadku przycisku "Do koszyka" kod jest następujący:
    Kod:
    .btn.btn-red {
        background-color: #000000;
    }

    edit: kod do zmiany koloru koszyka w poprzednim poście został zaktualizowany. Powinien teraz zmieniać kolor przycisku w prawym górnym rogu ekranu.
     
    Ostatnia modyfikacja: 6 Lipiec 2015
  5. MagdaM

    MagdaM Uczestnik

    Wiadomości:
    29
    Docenione treści:
    1
    Niestety teraz po wklejeniu tego zmodyfikowanego kodu do zmiany koloru koszyka, nie widać żadnych zmian.

    Przy okazji czy mogę poprosić o kod do zmiany koloru oznaczenie promocja przy produkcie na stronie produktu?
     
  6. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Zmień kolor w kodzie oraz dodaj na końcu wartość !important poniżej jest przyklad:
    Kod:
    .logo-bar .basket {
      background: #000000 url("../../styles/../images/arrow-white-down.png") no-repeat scroll 96% 50%!important;
    }

    W tym przypadku skorzystaj z poniższego kodu, pamiętaj o zmianie koloru z #000000 (czarnego) na inny. Sprawdź też proszę czy kolor innych elementów się nie zmienił.
    Kod:
    #box_productfull .productimg .promo {
        background-color: #000000;
    }
     
  7. MagdaM

    MagdaM Uczestnik

    Wiadomości:
    29
    Docenione treści:
    1
    zmianakolorukoszyk2.jpg
    Po dodaniu wartość !important kolor się zmienił, ale jest do zmiany jeszcze ramka i tło pod koszykiem. Czy mogę poprosić o odpowiednie modyfikacje do kodu?
     
  8. Grzesiek

    Grzesiek Centrum Pomocy home.pl

    Wiadomości:
    3 660
    Docenione treści:
    333
    Sprawdź to, zmień tylko kod koloru:

    Kod:
    header .logo-bar .basket > a img {
        background: #ffff33;
    }
     
  9. MagdaM

    MagdaM Uczestnik

    Wiadomości:
    29
    Docenione treści:
    1
    zmianakolorukoszyk3.jpg
    To mamy teraz taki wygląd. Jest jeszcze ramka i obrazek koszyka zniknął.
     
  10. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Znajdź poniższy kod w polu "Własny kod CSS":
    Kod:
    .logo-bar .basket {
      background: #B2CD17 url("../../styles/../images/arrow-white-down.png") no-repeat scroll 96% 50%!important;
    }

    I zamień go na poniższy kod:
    Kod:
    header .logo-bar .basket > a img {
      background: url("http://jemy.biz/skins/user/rwd_clickshop_1/images/cart-white.png") no-repeat scroll 96% 50%!important;
    }
    

    Znajdź poniższy kod w polu "Własny styl CSS":
    Kod:
    header .logo-bar .basket > a img {
        background: #B2CD17;
    }

    I zamień go na poniższy kod:
    Kod:
    header .logo-bar .basket {
      background: #B2CD17!important;
    }



    home.pl współpracuje z dwoma agencjami interaktywnymi: Flexcommerce oraz Gabiec
     
  11. drk001

    drk001 Stały bywalec

    Wiadomości:
    36
    Docenione treści:
    0
    Witam, podpinam się pod temat. Mam kilka pytań:
    - jak zmienić kolor panelu "zaloguj się/zarejstruj" aby tło było białe a napisy czarne? Jak skasować główkę z napisu "zarejestruj się"?
    - jak skasować całkowicie "domek" a napisy "promocje" i nowości obniżyć w stronę obrazka i powiększyć czcionkę?
    Będę wdzięczny za podpowiedzi.
    pozdrawiam
     

    Załączone pliki:

    • fff.jpg
      fff.jpg
      Rozmiar pliku:
      75,2 KB
      Wyświetleń:
      698
  12. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Kod:
    .login-bar a {
    
        color:#000;
    }
    
    .login-bar {
    
        background-color:#FFF;
    }
    
    .login-bar a.login img, .login-bar a.logout img {
    
        background:#000;
    }
    
    .login-bar a.register img {
    
        display:none;
    
    }
    
    .menu .innermenu .menu-list li.home-link-menu-li a img {
    
        display:none;
    
    }
    
    Wielkość czcionki ---> konfiguracja/wygląd/aktywny styl graficzny --->prawy górny róg (edytor stylów) [ikonka koła zębatego];

    Podaj sklep to będzie można coś więcej pomyśleć o tym "przesuwaniu".
     
  13. drk001

    drk001 Stały bywalec

    Wiadomości:
    36
    Docenione treści:
    0
    Dziękuję. adres to: ortico.pl

    Jeszcze pytanie jak zlikwidować ten czarny kwadrat przy zaloguj się i czy jest możliwość edycji kolorów napisu "zarejestruj" "zaloguj" aby pasowało kolorystycznie do sekcji "menu" "mowości" "promocje" znajdujące się pod logo?

    Dziękuję.
     
    Ostatnia modyfikacja: 8 Październik 2015
  14. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Za kolor odpowiada właściwość... 'color'. Miało być biało-czarno i tak ustawiłem. Jeśli chciałbyś "potestować" to i owo - to zmień wartość pierwszej właściwości. Aktualna to: #000.

    Czarny kwadrat to tło [background:#000;] - możesz usunąć, ale wtedy nie będzie się wyświetlał obrazek.

    Ja to trochę zepsułem. Popraw:
    Kod:
    .login-bar a.login img, .login-bar a.logout img {
    
    background: transparent url ("http://www.ortico.pl/skins/user/rwd_clickshop_2/images/login.png") no-repeat scroll right top #000;
    
    }
    Obrazek jest jasny, zatem musi być na ciemnym tle - jeśli chciałbyś inaczej - stwórz własny obrazek - ciemny - wrzuć na serwer i podmień ścieżkę, usuwając #000 z kodu powyżej.

    -----------------------------------

    Taka sugestia jeszcze. Po najechaniu na przyciski menu pojawia się zielony kolor. Warto zmienić:
    https://forum.home.pl/threads/zmiana-koloru-menu-nawigacji-w-skorce-rwd.141/
     
    Ostatnia modyfikacja: 8 Październik 2015
  15. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    Podnoszę temat. Przeszukałam całe forum. Sporo uzyskałam pomocy. Jesteście niezastąpieni
    Zrobiłam wg tego jak powyżej ale mam jeszcze inne prośby :
    1/ jak zmienić kolor tła koszyka na biały a kolor czcionki na swój (73706C)
    2/ jak zmienić kolor czcionki "zaloguj się" "zarejestruj się" na powyższy,
    3/ jak zmniejszyć pasek z logo
    4/ jak zwiększyć wielkość czcionki w kategoriach i produktach w menu.
    5/ jak słowo Menu zmienić na duże litery MENU
     
  16. tr_

    tr_ Spryciarz

    Wiadomości:
    47
    Docenione treści:
    7
    1)
    Kod:
    header .logo-bar .basket.empty-basket, header .logo-bar .basket {
        background: #FFFFFF;
    }
    
    header .logo-bar .basket a {
        color: #73706C;
    }
    

    2)
    Kod:
    .login-bar a {
        color: #73706C;
    }
    

    3) tzn?

    4)
    Kod:
    .#box_menu ul li a {
       font-size: 14px;
    }
    5)
    Kod:
    #box_menu .large.standard.boxhead > span {
       text-transform: uppercase;
    }
     
    Ostatnia modyfikacja: 6 Styczeń 2016
  17. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    Dzięki, wczoraj wyłączyłam już kompa bo ranko musiałam wstać.

    Nie wszystko zadziałało
    1/ "Koszyk" jest na moim kolorze a czcionka biała. Miało być odwrotnie.
    2/ ok
    3/
    logo mam małe a pasek (tło) wysokie. Wygląda to brzydko.

    4/ ...
    5/ dalej jest Menu a chciałabym aby było MENU (wszystkie duże literki)

    No i kolejne - jak zlikwidować czarny kwadracik przed zaloguj się. Nie podałam, że to styl RWD Może to jakaś różnica
     
  18. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    Oj, wciąż coś !!!!!!!!
    Jak zmnienić czcionkę "zaloguj się" "rejestracja"?
    Chciałabym aby była taka sama jak jest w "strony informacyjne - nagłowek i stopka"
    W RWD nie poszaleje się z czcionką. Chciałabym móc zmieniać ją ale to co proponują w edytorze stylu jest ubogie.
    Czy mogę dołożyć czcionki? jeśłi tak to jak.
    Wrócę po 17-ej
     
  19. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    https://forum.home.pl/threads/czy-mozna-dodac-wlasne-fonty-do-sklepu.456/#post-2649
     
  20. domowykosmetyk

    domowykosmetyk Kandydat

    Wiadomości:
    104
    Docenione treści:
    3
    WItam,
    dzięki za sporą pomoc. Niestety nie wszystko wyszło tak jak bym chciała.
    1/ tło koszyka nadal jest szare.a czcionka biała. Chciałabym aby było odwrotnie - tak jak jest z "zaloguj się"
    2/ jak zlikwidować kwadracik przed "zaloguj się"
    3/ jak wkleić własne ikonki np koszyka,
    4/ litery słowa Menu nadal nie zmieniły się. Chciałabym aby były same duże - tak jak pozostałe w nagłówku. (dodałam Menu do nagłówka jako link)
     

    Załączone pliki:

Poleć forum znajomym