Jak? Zmiana drobnych elementów strony

Discussion in 'Zmiana wyglądu sklepu i edycja zaawansowana' started by zapachciszy, Oct 26, 2015.

  1. zapachciszy

    zapachciszy Praktyk

    Messages:
    32
    Likes Received:
    1
    Witam ponownie,
    potrzebuję kilku drobnych zmian w szacie strony sklepu. Czas pędzi potwornie - miał mi pomóc TheL - ale zapewne ma bardziej pilne sprawy na głowie niż moje "pierdołki" - a chcę jak najszybciej zakończyć przynajmniej sprawy wizualne strony.
    Szukałam rozwiązań w innych tematach - ale niestety - albo nic - albo brak efektów po moich zmianach.

    Więc do rzeczy:
    RWD - zapachciszy.sklep.pl

    1. Pierwsza sprawa TŁO pod Logiem - nie wypełnia całego obszaru - tak jak w Stopce.
    tlo pod logiem.png

    2. Co wpisać we własnym stylu aby po najechaniu na przycisk "do koszyka" (wszędzie gdzie jest umieszczony) - zmienić kolor tła i kolor czcionki - to samo w przycisku "Zaloguj się"

    Oprócz tego ujednolicić wielkość czcionki w CENACH
    koszyk po najechaniu_wielkosc cen.png zaloguj sie.png

    3. Jak zmienić wielkość przycisku 'Wyślji" - jest za toporny - no i czciona - po co ten bold.
    przycisk wyslji.png

    Na ten czas tyle - zapewne jakieś drobnice jeszcze znajdę.

    Z drugiej strony - mam nieśmiały pomysł - aby zrobić w formacie pdf_u jakiś mały podręcznik - który pokazywałby jak wykonać drobne poprawki w Sklepie (np. tak jak w/t).
    Krótkie opisy z przykładami w formie grafik.
    Oczywiście za jakiś czas - bo teraz wiele innych spraw mam na głowie.

    Co Wy na to?
    Co Ty Adminku na to?

    Pozdrawiam - Jola
     
    Last edited: Oct 26, 2015
  2. TheL

    TheL @Lider VIP Beta-tester

    Messages:
    2,403
    Likes Received:
    535
    ile ja się nasiedziałem nad tym tłem na górze i bym tak siedział pewnie jeszcze długo gdybym nie zobaczył, że ono jest malutkie :) wystarczyło zrobić obrazek z kopią oryginału powtarzającego się 3 razy obok siebie i tło wyświetla się na całości :D
    Zobaczę resztę :D
     
    zapachciszy likes this.
  3. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Messages:
    3,087
    Likes Received:
    302
    Poniżej wklejam kod CSS ze stylem, który jest odpowiedzialny za wygląd przycisku "Wyślij" na karcie opinii produktu. Aby usunąć bold usuń całą linijkę "font-weight: bold;". Nie dokońca rozumiem określenie "toporny", dlatego wkleiłem poniżej cały styl odpowiedzialny za przycisk (możemy go odpowiednio zmodyfikowac, tylko napisz co chcesz zmienić).
    Code:
    .box_productcomments .btn {
        background-color: #D3980B;
        border: medium none;
        color: #FFF;
        font-size: 1.3em;
        }
    Post został zaktualizowany. Usunięte zostało pogrubienie tekstu oraz powiększenie obrazka. Już nie powinien występować komunikat błędu Less.
     
    Last edited: Oct 27, 2015
  4. TheL

    TheL @Lider VIP Beta-tester

    Messages:
    2,403
    Likes Received:
    535
    do koszyka po najechaniu np tak
    Code:
    .products.viewphot .product .buttons .addtobasket:hover, .products.viewphot .product .buttons .availability-notifier-btn {
      background-color: #dddddd;
      font-size: 1.1em;
      font-weight: bold;
      padding: 0.8em 1em;
    }
    
    
    wkleiłem Ci już z opisem ale nie zmienia górnego koszyka
     
  5. zapachciszy

    zapachciszy Praktyk

    Messages:
    32
    Likes Received:
    1
    Ten skrypt już wcześniej gdzieś się pojawiał TheL - dotyczy przycisku "do koszyka z grafiką" - głównie na głównej stronie.
    Mi chodzi o te - które zaznaczyłam wyżej w zamieszczonych fotkach.
    Tam - gdzie jest tylko napis "do koszyka" - we wszelkich miejscach w których się pojawia ;)
     
  6. zapachciszy

    zapachciszy Praktyk

    Messages:
    32
    Likes Received:
    1
    Dobra - dobra ;) - zeszłam na dalszy plan i tyle :)
    DZIĘKI za górny paseczek - a teraz zapewne tydzień czekania na następne popraweczki :)
    Pozdrawiam TheL.
     
  7. zapachciszy

    zapachciszy Praktyk

    Messages:
    32
    Likes Received:
    1
    Niestety nie działa - występuje błąd "LESS" - a dokładniej chodziło mi o to - że w porównaniu z innymi przyciskami jest on proporcjonalnie za duży.
    Czepiam się? - troszeczkę ;) - wystarczyła by taka sama wielkość jak np. "do koszyka" - i zwykła czcionka.

    No cóż - oprócz poprawionego przez Mastera TheL_a paseczka - reszta jest w stanie nienaruszonym - plum.
    LICZĘ na Was - BARDZO :)
    I co myślicie o tym małym planie dotyczącym podręcznika?
     
  8. michalhockey

    michalhockey Opiekun

    Messages:
    174
    Likes Received:
    44
    Ten kod zamknij klamerką "}"
     
    Mariusz likes this.
  9. zapachciszy

    zapachciszy Praktyk

    Messages:
    32
    Likes Received:
    1
    Tak też zrobiłam - niestety ciągle bez zmian ;(
     
  10. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Messages:
    3,087
    Likes Received:
    302
    @zapachciszy zaktualizowałem mój kod w moim poście, spróbuj teraz.

    Z mojego kodu usunąłem font-weight: bold (czyli pogrubienie tekstu).

    Dodatkowo usunąłem ze stylu wartość: padding: 1em 2em (która powodowała, że przycisk był powiększony).

    @michalhockey dzięki, że zauważyłeś ;) czasem zapominam klamerek :)
     
  11. zapachciszy

    zapachciszy Praktyk

    Messages:
    32
    Likes Received:
    1
    Nie mam pojęcia Panowie co się dzieje - a raczej nie dzieje - ciągle bez zmian.
     
  12. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Messages:
    3,087
    Likes Received:
    302
    Spróbuj tym kodem, powinno zadziałać na 99,9%. Przycisk wyślij powinien zostać zmniejszony, natomiast napis wyślij nie powinien być już pogrubiony:

    Code:
    #box_productcomments .btn {
    font-weight: normal!important;
    padding: 6px!important;    
    }  
     
  13. TheL

    TheL @Lider VIP Beta-tester

    Messages:
    2,403
    Likes Received:
    535
    Code:
    /*Wszystkie parametry przycisku wyślij przy zapytaniu o produkt*/
    .ask-for-product .btn {
      background-color: white;
      border: 1px solid #b1b1b1;
      color: #333;
      cursor: pointer;
      display: inline-block;
      line-height: 1.35;
      margin: 0;
      padding: 0.2em 0.2em;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-transform: lowercase;
      vertical-align: middle;
    }
    /*Wszystkie parametry przycisku wyślij przy zapytaniu o produkt - po najechaniu na niego*/
    .ask-for-product .btn:hover {
      background-color: blue;
      border: 1px solid #b1b1b1;
      color: #333;
      cursor: pointer;
      display: inline-block;
      line-height: 1.35;
      margin: 0;
      padding: 0.2em 0.2em;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-transform: lowercase;
      vertical-align: middle;
    }
    
     
  14. TheL

    TheL @Lider VIP Beta-tester

    Messages:
    2,403
    Likes Received:
    535
    Code:
    /*Wszystkie parametry przycisku wyślij przy opinii o produkcie*/
    #box_productcomments .btn {
      background-color: blue;
      border: 1px solid #b1b1b1;
      font-weight:normal;
      color: #333;
      cursor: pointer;
      display: inline-block;
      line-height: 1.35;
      margin: 0;
      padding: 0.2em 0.2em;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-transform: lowercase;
      vertical-align: middle;  
    }  
    
    /*Wszystkie parametry przycisku wyślij przy opinii o produkcie - po najechaniu*/
    #box_productcomments .btn:hover {
      background-color: red;
      border: 1px solid #b1b1b1;
      font-weight:normal;
      color: #333;
      cursor: pointer;
      display: inline-block;
      line-height: 1.35;
      margin: 0;
      padding: 0.2em 0.2em;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-transform: lowercase;
      vertical-align: middle;  
    }  
    
     
  15. TheL

    TheL @Lider VIP Beta-tester

    Messages:
    2,403
    Likes Received:
    535
    Code:
    
    /*Wszystkie parametry przycisku wyślij przy polecaniu produktu*/
    #box_mailfriend .btn {
      background-color: blue;
      border: 1px solid #b1b1b1;
      font-weight:normal;
      color: #333;
      cursor: pointer;
      display: inline-block;
      line-height: 1.35;
      margin: 0;
      padding: 0.2em 0.2em;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-transform: lowercase;
      vertical-align: middle;  
    }  
    
    /*Wszystkie parametry przycisku wyślij przy polecaniu - po najechaniu*/
    #box_mailfriend .btn:hover {
      background-color: red;
      border: 1px solid #b1b1b1;
      font-weight:normal;
      color: #333;
      cursor: pointer;
      display: inline-block;
      line-height: 1.35;
      margin: 0;
      padding: 0.2em 0.2em;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-transform: lowercase;
      vertical-align: middle;  
    } 
    
     
    zapachciszy likes this.
  16. TheL

    TheL @Lider VIP Beta-tester

    Messages:
    2,403
    Likes Received:
    535
    wielkość czcionki w menu:
    Code:
    /*czcionka w menu*/
    #box_menu ul li a {
      font-size: 1.2em;
      color:blue;
      padding-bottom: 0.2em;
      padding-left: 1.5em;
      padding-right: 1.5em;
      padding-top: 0.2em;}
    /*czcionka w menu po najechaniu*/
    #box_menu ul li a:hover {
      font-size: 1.2em;
      color:red;
      background:yellow;
      padding-bottom: 0.2em;
      padding-left: 1.5em;
      padding-right: 1.5em;
      padding-top: 0.2em;}
    
    przy okazji kolor i paddingi.
     
  17. zapachciszy

    zapachciszy Praktyk

    Messages:
    32
    Likes Received:
    1
    TheL - spłaszczyłam się po tym nawale skryptów - bogowie ledwo dyszę :) - idę odsypiać nockę - jutro dam znać.
    Kłaniam się pięknie - i OGROMNIE ponownie BARDZO DZIĘKUJĘ
     
  18. audet

    audet Bywalec

    Messages:
    16
    Likes Received:
    0
    Mam pytanie do tego kodu. Zwiększyłem rozmiar czcionki w menu, ale rozjechała się "ilość przedmiotów" wyświetlana przy każdej kategorii. Jest jakiś kod aby były one wyrównane np. do prawej strony?
    Drugie pytanie czy można zwiększyć odstępy między kategoriami?
     
  19. TheL

    TheL @Lider VIP Beta-tester

    Messages:
    2,403
    Likes Received:
    535
    Wrzuć proszę screen jak to wygląda u Ciebie.
     
  20. audet

    audet Bywalec

    Messages:
    16
    Likes Received:
    0
    Troszkę źle ująłem, że się rozjechały bo odległości są zachowane, tylko przy powiększonej czcionce kiepsko to wygląda. W załączniku przesyłam skan.
     

    Attached Files:

    • 1.jpg
      1.jpg
      File size:
      10.6 KB
      Views:
      566

Share This Page