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 zmiana paska u góry strony login-box

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika wues, 9 Luty 2016.

  1. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4
    Witam!

    Mam takie pytanie jak wrzucić swój pasek czarny u samej góry strony jak jest logowanie na całej szerokości. Bardzo proszę o pomoc.

    www.iopen.pl
     
  2. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Kod:
    .login-bar {
        background-color: #000;
        overflow: hidden;
    }
     
    wues lubi to.
  3. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4
    A swój pasek który jest już wgrany na serwer?
     
  4. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    wues lubi to.
  5. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4

    Czyli w miejsce koloru link tak? tak, wiem z tym nie ma problemu gorzej właśnie z własną jakby grafiką
    Czyli w miejsce koloru link paska tak? wiem z tym nie ma problemu gorzej właśnie z własną jakby grafiką.
     
  6. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Wszystko zmieniasz poprzez CSS. Ikonki widzisz jako background:
    Kod:
    .login-bar a.register img, .login-bar a.myaccount img {
      background: url('../../styles/../images/user-black.png') top right no-repeat;
      width: 35px;
      height: 35px;
      display: inline-block;
      margin-right: 0px;
    }
    Kod:
    .login-bar a.login img, .login-bar a.logout img {
        background: url('../../styles/../images/user/register.png') top right no-repeat;
        width: 35px;
        height: 35px;
        display: inline-block;
        margin-right: 0px;
    }
    Musisz inne obrazki wstawić poprzez panel sklepu (Konfiguracja -> Wygląd -> Aktywny styl graficzny -> Pliki graficzne), ew podlinkować z innego "źródła".
     
    wues lubi to.
  7. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4
    Te dwa kody wklepać za koleją ? :) sorry za tak wiele pytań.
     
  8. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4
    Takie coś wyszło http://prntscr.com/a0z699 pasek jest na idealną szerokość a jakby wyszedł większy i nie pokazuje na nim tekstów. I logo coś urosło :) trochę się schemat zmienił. Jesteś w stanie pomóc?
     
  9. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Nie - ten kod był poglądowy - skopiowałem go z Twojego sklepu. Nie wiem, co tam sam "namieszałeś" ;).

    Generalnie - jeśli wstawisz we "Własny styl CSS":
    Kod:
    .login-bar {
        background-color: #000;
        overflow: hidden;
    }
    .login-bar a {
        color: #FFF;
        display: inline-block;
        padding: 0;
        font-weight: normal;
        font-size: 1.2em;
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 35px;
        text-transform: uppercase;
    }
    Otrzymasz efekt jak poniżej. Ikonki też w teorii będą, ale przysłonięte (czarne na czarnym). Jak zrobisz w Photoshop-ie czy gdziekolwiek indziej, aby te ikonki były białe - to będą widoczne (powinny).
     

    Załączone pliki:

    • iOpen.jpg
      iOpen.jpg
      Rozmiar pliku:
      107,5 KB
      Wyświetleń:
      339
    wues lubi to.
  10. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4
    Troche nie rozumiem. Chodzi o to że mam zrobiony czarny pasek z własnym napisem i chce wkleić go właśnie tam. Ikonki czcionke wiem jak zmienić natomiast chodzi by ten pasek włożyć. We wcześniejszych kodach on się zmienił natomiast nie był cały. Nie chcę zmienić jego tylko koloru ale jakby wrzucić z upload swój własny tan na tym pasku jest rownież numer kontaktowy i napis. Tego nie było właśnie widać :)
     
  11. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Ja też nie rozumiem, co chcesz wstawić i jakie elementy przysłonić/odsłonić. Nie wiem czy to ma być background czegoś, czy dodatkowy wiersz, tzn. osobny <div>. Pokaż ten przygotowany pasek i narysuj, gdzie i jak to byś widział.
     
    wues lubi to.
  12. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 400
    Docenione treści:
    532
    ja chyba wiem, ale bez edycji plików tpl się raczej nie obędzie, o ile modyfikacje css wymagają tylko wstawienia odpowiedniego kodu we własny css to już dodawanie obrazka w danym miejscu wymaga dodania znacznika <img> w odpowiednim miejscu szablonu. Bo nie sądzę, abyś utrafił styk którym byś tam tło wstawił odpowiedniej wielkości.
     
  13. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4

    http://iopen.pl/public/assets/gora.jpg chce wstawić coś takiego u samej góry właśnie gdzie jest login-box no i na tym pasku zaloguj zarejestruj oczywiście w innych kolorach co juz wiem jak zmienić :)
     
  14. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 400
    Docenione treści:
    532
    to tak jak napisałem musisz zmodyfikować plik z nagłówkiem w edycji zaawansowanej :) troszkę poważniejsza rzecz, dodatkowo widzę u Ciebie już sporo modyfikacji :)
     
  15. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Może tak Ci wystarczy:
    Kod:
    .login-bar {
        background-color: #fff;
        overflow: hidden;
        background: URL('http://iopen.pl/public/assets/gora.jpg')top left no-repeat;
        min-height: 90px;
    }
     

    Załączone pliki:

    • iOpen2.jpg
      iOpen2.jpg
      Rozmiar pliku:
      93,4 KB
      Wyświetleń:
      317
    expomoda i wues lubią to.
  16. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4
    Tak ma to wyglądać tylko na cała szerokość :)
     
  17. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Twój obrazek ma długość 946px - zatem, jakim cudem ma "zająć" cały "wiersz"?

    Login-bar ma długość 1263px ---> zatem swój "pasek" powinieneś w programie graficznym "wydłużyć" do 1263px. Nie zmienia to faktu, iż przy innej rozdzielczości problem pojawi się ponownie.
     
    wues lubi to.
  18. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4
    ok. jakas rada jak to uchwyicić?
     
  19. Stau

    Stau Majster

    Wiadomości:
    340
    Docenione treści:
    98
    Możesz zostać przy swoim pomyśle - wkleić w CSS ten kod, którym na samym końcu zaproponowałem - będzie działać przy "standardowych" komputerach, jeśli odpowiednio przygotujesz grafikę (długość).

    Możesz potestować i sprawdzić jak całość będzie prezentowała się przy innych, np. mniejszych rozdzielczościach - na komórce "tło" na pewno będzie nachodziło na przyciski zaloguj i zarejestruj. Wszystko będzie się zlewało.

    Pozostaje zatem w kolejnej fazie po rozdzielczości "targetować" całość, tzn. sposób widoczności/wyświetlania, np. poprzez reguły @media queries w CSS:
    https://forum.home.pl/threads/zakotwiczenie-gornej-belki-szablon-rwd.681/#post-4033
     
    wues lubi to.
  20. wues

    wues Pomocnik

    Wiadomości:
    120
    Docenione treści:
    4
    ok, dzieki wielkie za pomoc! bede kombinowal :)
     

Poleć forum znajomym