wdrożenia PrestaShop

Wygląd wyszukiwarki

  • 8 Odpowiedzi
  • 2393 Wyświetleń

0 użytkowników i 1 Gość przegląda ten wątek.

*

Offline f365446

  • Użytkownik
  • **
  • 22
  • 0
  • PrestaShop: 1.5.4
  • Status: forum
Wygląd wyszukiwarki
« dnia: Sierpień 08, 2013, 03:43:58 pm »
Na zdjęciu pokazane jest jak wygląda obecna wyszukiwarka i nowa do jakiej chcę dojść.



Trochę pogrzebałem i mam takie coś:




Jak dojść do poprawnej wersji ? Ciąć obrazek na 2 ? Jedna część służy jako button wyszukiwarki , druga część jako pole textowe ? W blocksearch.css nie widzę napisu do usunięcia "szukaj".

*

Offline And63

  • Stały użytkownik
  • ***
  • 89
  • 3
Odp: Wygląd wyszukiwarki
« Odpowiedź #1 dnia: Sierpień 08, 2013, 05:39:47 pm »
W blocksearch.css nie widzę napisu do usunięcia "szukaj".
Nie widzisz, bo trzeba to wyciąć w tpl-u, albo ukryć w css( #search_block_top .button - dodaj na początku wpisu taki kod visibility: hidden;).

Podaj linka do strony jeśli możesz - wtedy powiem coś więcej :)

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Wygląd wyszukiwarki
« Odpowiedź #2 dnia: Sierpień 08, 2013, 05:59:24 pm »
przy takim rozwiazaniu jak na grafice, raczej nie uzywalbym przycisku "szukaj" tylko za przycisk podstawil ikonke lupki. a co do reszty grafiki to na glowny blok <div> dajesz background z obrazkiem i pole <input>  wrzucasz po absolute z border:none; background:none; i masz wszystko pieknie i funkcjonalnie
design4VIP z innej strony...

*

Offline f365446

  • Użytkownik
  • **
  • 22
  • 0
  • PrestaShop: 1.5.4
  • Status: forum
Odp: Wygląd wyszukiwarki
« Odpowiedź #3 dnia: Sierpień 09, 2013, 08:14:13 am »
Nie widzisz, bo trzeba to wyciąć w tpl-u, albo ukryć w css( #search_block_top .button - dodaj na początku wpisu taki kod visibility: hidden;).

Podaj linka do strony jeśli możesz - wtedy powiem coś więcej :)

Gdzie dokładnie masz ten wpis "szukaj" ? Za przycisk ma robić tylko lupa bez textu na nim.

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Wygląd wyszukiwarki
« Odpowiedź #4 dnia: Sierpień 09, 2013, 12:00:24 pm »
Gdzie dokładnie masz ten wpis "szukaj" ?
na twojej grafice.... jak byk obok pola imput masz czarny przycisk "szukaj" i z firebuga pieknie opisany input.button, a co z nim zorib masz w poprzedniej wiadomsoci
design4VIP z innej strony...

*

Offline f365446

  • Użytkownik
  • **
  • 22
  • 0
  • PrestaShop: 1.5.4
  • Status: forum
Odp: Wygląd wyszukiwarki
« Odpowiedź #5 dnia: Sierpień 09, 2013, 12:23:43 pm »
Gdzie jest wpis o przycisku to wiem

#search_block_top .button {
    border:none;
    border-radius:0;
    color:#fff;
    text-transform:uppercase;
    background:url(img/search1.png);
    float: left;
    height: 37px;
    width:41px;
    visibility:hidden;

Dając visibility: hidden; przycisk zniknie całkowicie , a ja chcę mieć lupkę do wyszukiwania tylko bez napisu na nim.

 
ehh albo tak:
   
    color:transparent;


i problem z głowy  8)





Teraz pojawił się kolejny problem . Usuwając koszyk i lok linków logo i wyszukiwarka ucieka mi do wysokości header . Ustawiam na 0 ale i tak nie chce wyjść ponad jego wysokość.



Uploaded with ImageShack.us

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Wygląd wyszukiwarki
« Odpowiedź #6 dnia: Sierpień 09, 2013, 12:55:24 pm »
position: absolute/relative
design4VIP z innej strony...

*

Offline f365446

  • Użytkownik
  • **
  • 22
  • 0
  • PrestaShop: 1.5.4
  • Status: forum
Odp: Wygląd wyszukiwarki
« Odpowiedź #7 dnia: Sierpień 09, 2013, 02:14:01 pm »
logo dałem relative i podeszło do góry . Dając relative na search rozjeżdża się :



Uploaded with ImageShack.us

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Wygląd wyszukiwarki
« Odpowiedź #8 dnia: Sierpień 09, 2013, 07:49:14 pm »
sorka, bez jaj... to forum dotyczace prestashop a nie css.... poczytaj w pierwszej kolejnosci jakis kurs podstawowy odnosnie css, juz nawet nie css3 ale podstawy, podstaw, bo inaczej ten watek rozrosnie sie do rozmiarow 300 stronicowego albo lepiej.... nie da rady ot tak, za przeproszeniem, laikowi, w 3-4 zdaniach wylozyc calego zagadnienia pozycjonowania elementow poprzez style...

po pierwsze, albo absolute oraz relative, albo absolute oraz absolute, w zaleznosci od tego co chcesz osiagnac. po drugie, juz na pierwszy rzut screena widac, ze pozycjonujesz nie ten element co powinienes. po trzecie, dajac relativ dla relatywnego elementu musialy by byc one zalezne od siebie. w twoim wypadku juz po pierwszyc h ogledzinach kodu w forebugu powinies zobaczyc, ze sa to calkiem niezalezne elementy. pokombinuj w pierwszej kolejnosci poprzez edycje live firebuga i zobacz jak dany element zachowa sie w danej pozycji oraz co z nim dalej zdzialac.   
design4VIP z innej strony...