PORADNIK zmiana paska u góry strony login-box

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

 

Code:

.login-bar {
    background-color: #000;
    overflow: hidden;
}

 

A swój pasek który jest już wgrany na serwer?

 

Tak samo . Musisz zmienić, aby (jak mawiał klasyk) białe było czarne, a czarne białe . Pytałeś o pasek, to podpowiedziałem o pasku. U Ciebie trzeba by było jeszcze zmienić kolor czcionki "ZAREJESTRUJ SIĘ" oraz "ZALOGUJ SIĘ" oraz przede wszystkim ikonki:
http://www.iopen.pl/skins/store_user/store_7a15622dc11efb2b545639d0d151b05c_1/images/user-black.png

 

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

 

Wszystko zmieniasz poprzez CSS. Ikonki widzisz jako background:

Code:

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

Code:

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

 

Te dwa kody wklepać za koleją ? sorry za tak wiele pytań.

 

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?

 

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":

Code:

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

 

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ć

 

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

 

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.

 

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ć

 

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

 

Może tak Ci wystarczy:

Code:

.login-bar {
    background-color: #fff;
    overflow: hidden;
    background: URL('http://iopen.pl/public/assets/gora.jpg')top left no-repeat;
    min-height: 90px;
}

 

Tak ma to wyglądać tylko na cała szerokość

 

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.

 

ok. jakas rada jak to uchwyicić?

 

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

 

ok, dzieki wielkie za pomoc! bede kombinowal