Pola profilu dla każdego!

ODPOWIEDZ ]
Awatar użytkownika
O mnie
Jestem częścią układu, jedną z gwiazd w galaktyce. Zgubiłam duszę i mam dwie pomocne dłonie. W lewej ręce trzymam pióro tworzenia, a w prawej nożyczki niszczenia.
Moje fora
San Jose, Shadow York, Caledonia i tworzę M.A.R.S!

 Noritoshi#2699
 6016244

#37979 07 lut 2018, 18:01

Pola Profilu


Prosty sposób na ich tworzenie i ostylowanie (również z opcją naniesienia na awatar), wraz z kilkoma funkcjonalnymi przykładami.

Zarówno dla początkujących jak i zapoznanych z tematem.
W tym tutorialu przedstawię Wam różne fajne rzeczy związane z polami profilu. Pokaże wam nie tylko te na awatarze, ale też zwykłe pod awatarem; zarówno te proste jak i z klikalnymi obrazkami.
Tutorial został przygotowany z myślą o forach opartych na stylu Saphic, ale powinny działać na większości stylów przeznaczonych dla phpBB by Przemo.

Spis treści:
0. Wstępne objaśnienia.
1. Nazwa użytkownika nad awatarem.
2. Awatar i pola profilu – przygotowanie.
3. Tworzenie pól profilu.
4. Nałożenie kontenera na awatar.
5. Dodanie ramki/tła do awatara.
6. Wymyślne pola profilu (linki w obrazkach i inne cuda-niewidy).



0. Wstępne objaśnienia.

- Spodziewam się, że każdy czytający potrafi się poruszać po panelu administratora (PA), ale w razie gdyby nie, to rzeczy nazywam po imieniu i bez trudu powinno się je samemu w PA odnaleźć.
Mocno podstawowe rzeczy o CSS i PA:
Pokaż
- Dla każdego kodu postaram się pokazać obrazek z efektem jego działania.
- Przedstawione tutaj kody możecie dowolnie modyfikować i używać na swoich forach.
- Kody przygotowałem z myślą o awatarach z wymiarami 200x320px, ale nie będzie problemu ze stosowaniem innych awatarów - wystarczy tylko w kodzie pozamieniać kilka wartości.
- W razie problemów z działaniem któregoś kodu upewnij się, że wszystkie nazwy klas się zgadzają, w kodach nie pogubiłeś/aś kropek, przecinków, klamer {} bądź średników. Czasem tez inne kody z panelu mogą psuć działanie kodów z tego tutoriala. Dopiero gdy upewnisz się, że wszystko jest tak jak powinno i nie działa, możesz się zgłaszać do mnie na pw w tej sprawie.



1. Nazwa użytkownika nad awatarem.

W tym punkcie omówimy kwestię wyświetlania się nazwy użytkownika obok daty postu w widoku tematów. Wydaje mi się, że wiele osób nie umie poradzić sobie z odpowiednią stylizacją tej nazwy i dlatego próbuje ją zasłaniać, a zasłania ją w sposób zły (i często z różnym efektem na rożnych przeglądarkach).

Poniższym kodem możesz ukryć wyświetlanie nazwy użytkownika i jednocześnie wyrównać awatar wraz z datą postu:

Kod: Zaznacz cały

/* wyrownanie awatara do daty postu */
td[align="left"][width="150"] > span.name {
    font-size: 0;
}
/* ukrycie nazwy uzytkownika wyswietlanej nad awatarem */
td[align="left"][width="150"] > span.name > b > a {
    display: none;
}
Objaśnienie:
Pokaż
Efekt:
Obrazek

Jeśli jednak chcesz zachować nazwę użytkownika w tym miejscu, za pomocą poniższego kodu możesz ją swobodnie dostosować do indywidualnych potrzeb:

Kod: Zaznacz cały

/* własne ustawienie stylu nazwy uzytkownika wyswietlanej nad awatarem */
td[align="left"][width="150"] > span.name {
    display: block;
}
td[align="left"][width="150"] > span.name > b > a {
    text-align: center;
    display: block;
    font-family: 'Calligraffitti', cursive !important;
    font-size: 24px !important;
    padding-bottom: 6px;
    padding-top: 4px;
}
td[align="left"][width="150"] > span.name > b + br {
    display: none;
}
Ważna uwaga:
Musisz unikać używania !important w stylach grup (PA -> Grupy -> Zarządzaj) i zastosować je w powyższym kodzie przy każdym parametrze, którego w stylizacjach grupy używasz.
Np. jeśli w stylizacji grup zmieniasz rozmiar czcionki, to musisz to zrobić bez !important, a w powyższym kodzie przy font-size już zastosować !important.
Efekt:
Obrazek



2. Awatar i pola profilu – przygotowanie.

Nim pobawimy się polami profilu, musimy dostosować sobie pod nie plac budowy wykonując kilka magicznych sztuczek, aby na każdej przeglądarce pola profilu wyglądały tak samo.
Najpierw ustawimy blokowe wyświetlanie się elementu w którym znajdują się awatar i wszystkie pola profilu oraz wyśrodkujemy to wszystko, aby się nam ładnie ustawiało:

Kod: Zaznacz cały

/* magiczna sztuczka nr 1 */
 span.name + span.postdetails {
    display: block;
    text-align: center;
}
Wskazówka:
Pokaż
Następnie pozbędziemy się wszystkich enterów pojawiających się pod awatarem, które potrafią znacznie utrudniać nam zabawy z polami profilu:

Kod: Zaznacz cały

/* magiczna sztuczka nr 2 */
span.name + span.postdetails br {
    display: none;
} 
Pokaż
Na razie tyle nam wystarczy, przejdźmy teraz do tworzenia pól!



3. Tworzenie pól profilu

Teraz przejdziemy do sedna sprawy, czyli jak zrobić w prosty sposób pola profilu na awatarze. (jeśli nie chcesz pól profilu na avatarze, nadal wykonuj polecenia z tego punktu, a w odpowiednim miejscu umieszczone zostaną wersje A oraz B!).
Jedną z podstawowych rzeczy jest zrobienie pierwszego pola profilu jak obowiązkowego do wypełniena, gdyż do niego zostanie dodany kod, który pozwoli „podciągnąć” te pola na awatar (i jest także wymagane wtedy, gdy nie chcesz pól profilu na awatarze, ale chcesz dodać jakieś efekty do awatara, o których dowiesz się więcej w punkcie 5).
Oczywiście, każde z pól profilu, które chcemy po swojemu ostylować, musi być w nazwie poprzedzone specjalnymi dwoma znakami: -# oraz ustawione ich wyświetlanie pod awatarem (bo dzięki temu nie będzie wyświetlać się nazwa pola potrafiąca popsuć nam całą koncepcję).

W ustawieniach tego pola profilu trzeba się teraz pobawić magicznymi polami suffix i prefix. Mówiąc najprościej jak można: te cudeńka pozwalają otoczyć zawartość pola profilu tagami htmla, np.:

Kod: Zaznacz cały

<div class="pole-profilu-1">wartość_wpisana_przez_użytkownika</div>
To co jest przed wartością wpisujemy do prefixu, a to co za – do suffixu. (W podobny sposób można zrobić z wartości pola wyświetlanie obrazka w <img> czy też zrobić jako link <a>, a nawet 2w1, dodawać jakieś nagłówki, ikonki... ale o tym będzie w kolejnej części tutoriala).

Pomocne porady:
Pokaż
Pierwsze pole robimy obowiązkowym po to, abyśmy mogli mu dołożyć jedną ważną rzecz: tzw. kontener. Czym będzie ten kontener? Wyobraźmy sobie kontener na śmieci, w którym mamy nasze cenne pola profilu. Kontener przydaje się w transporcie, bo wystarczy jedną rzecz przesunąć we wskazane miejsce (w tym wypadku na awatar), a nie robić tego z osobna z każdym polem profilu.

Uwaga: nawet jeśli nie interesuje cię wersja A, przeczytaj ją, bo umieściłem tutaj kilka cennych wskazówek!

Wersja A (z polami na awatarze):
Nasz prefix i sufix pierwszego pola będzie wyglądać tak:

Kod: Zaznacz cały

prefix:
<div class="pola-profilu-kontener"><div class="pole-profilu-1">
suffix:
</div>
Teraz wprawne oko powinno zauważyć, że w suffixie zamknęliśmy tylko jeden tag <div>. Wynika to z tego, że kontener musimy zamknąć za ostatnim polem profilowym, które na awatarze się znajdzie (i które także będzie obowiązkowym do wypełnienia). Nie możemy zrobić tego wcześniej, bo skończy się to tak jak zamknięcie szlabanu na przyczepie od tira, który utknął na przejeździe kolejowym! xD
Oczywiście, jeśli chcecie umieścić jakieś pola profilu pod awatarem, to wspomniany tag zamknijcie w ostatnim polu które ma się na awatarze znaleźć.

Wskazówka:
Pokaż
Być może pomyślicie sobie – no okej, ale nie wiem ile ja pól chcę i w ogóle! Ale to nie problem, bo zawsze nowe możecie dodać po ostatnim polu (i przenieść do jego suffixa tag zamykający kontener). Ale jeśli by się wam zachciało wstawić jakieś pomiędzy już istniejące – to też będzie się dało osiągnąć poprzez tzw. pozycjonowanie.

Dodajmy sobie teraz kilka różnych pół, nazywając je np. pole-profilu-gif, pole-profilu-praca, pole-profilu-zwiazek, pole-profilu-wiek. Pole z wiekiem okazało się być ostatnim i zamknęliśmy w jego suffixie dwa divy - ten z pola wiek oraz div będący naszym kontenerem:

Kod: Zaznacz cały

suffix:
</div></div>
koniec wersji A

Wersja B (bez pól na awatarze):
Jeśli jednak żadnych pól profilu nie chcesz na awatar nanosić, ale chcesz dodać do awatara jakąś ramkę bądź tło (co szczegółowo zostanie opisane w punkcie 5), zastosuj prefix dla pierwszego pola profilu w poniższej formie:

Kod: Zaznacz cały

prefix:
<div class="pola-profilu-kontener"></div><div class="pole-profilu-1">
suffix (bez zmian):
</div>
I utworzony w ten sposób kontener naniesiemy na awatar w dalszej części tego poradnika.
Dodajmy sobie teraz kilka różnych pół, nazywając je np. pole-profilu-gif, pole-profilu-praca, pole-profilu-zwiazek, pole-profilu-wiek.
koniec wersji B


Dla utworzonych pól ustawimy sobie teraz jakieś CSSy, aby były te pola ładne i piękne, np.:
Pokaż
Efekt (taki sam na tym etapie kodowania będzie także dla wersji B):
Obrazek

(Pola te co prawda nie są szczytem piękności, ale nie jest to kwestią tego tutoriala, a pozmieniać parę kolorów i nadać ładniejsze czcionki potraficie, prawda?)



4. Nałożenie kontenera na awatar

Jeśli wykonałeś wersję B, to nałożysz na awatar tylko sam kontener, który pozwoli ładnie obramować awatar. Zaś w przypadku domyślnej wersji, nałożymy wszystkie pola znajdujące się w kontenerze na awatar i będą się pojawiały po najechaniu na nie kursorem myszki. W obu przypadkach kod będzie taki sam:

Kod: Zaznacz cały

/* Ustawienia kontenera */
.pola-profilu-kontener  {
/* Ustawienie wymiarów kontenera */
  width: 200px;
  height: 320px;
/* Nasuniecie na awatar */
  margin-top: -320px;
  left: 0;
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 30;
/* Wysrodkowanie kontenera w poziomie */
  margin-left: auto;
  margin-right: auto;
}
Uwaga: jeśli wcześniej na awatar ustawiłeś jakieś obramowanie (a w szczególności border-bottom), to w wartości "margin-top" musisz je uwzględnić. Np. dla borderu o szerokości 2px nasz margin-top musi przyjąć wartość -322px. Prosta i logiczna matematyka ;)
Efekt:
Obrazek

Nie wygląda to najlepiej, więc dodajemy także marginesy do pól profilu, aby nie znajdowały się przy samej krawędzi awatara (dla wersji B - bez nanoszenia pól na awatara, pomiń ten kod):

Kod: Zaznacz cały

/* ustawienie marginesow dla pol profilu na awatarze */
.pole-profilu-1,
.pole-profilu-zwiazek,
.pole-profilu-praca,
.pole-profilu-wiek{
    margin: 5px 8px;
}
.pole-profilu-1 {
  margin-top: 10px;
}
.pole-profilu-praca,
.pole-profilu-wiek{
    margin-top: 10px;
    width: 82px;
}
Efekt:
Obrazek

Teraz trzeba jeszcze zajrzeć do ustawień pól profilu i dodać coś jeszcze. Musimy dołożyć ramki, które zapewnią nam fajne animowane przejścia po najechaniu kursorem na awatar (oczywiście, nie dotyczy to wersji B!).
Nasze pierwsze pole profilu wyglądało tak:

Kod: Zaznacz cały

prefix:
<div class="pola-profilu-kontener"><div class="pole-profilu-1">
suffix:
</div>
A teraz powinno wyglądać tak:

Kod: Zaznacz cały

prefix:
<div class="pola-profilu-kontener"><div class="pola-profilu-ramka-1"><div class="pole-profilu-1">
suffix (bez zmian):
</div>
Następnie w polu związek, które dotychczas wyglądało tak:

Kod: Zaznacz cały

prefix:
<div class="pole-profilu-zwiazek">
suffix:
</div>
Zamknąłem tę ramkę w suffixie:

Kod: Zaznacz cały

suffix:
</div></div>
Potem drugą ramkę otworzyłem w polu pracy w prefixie:

Kod: Zaznacz cały

prefix:
<div class="pola-profilu-ramka-2"><div class="pole-profilu-praca">
I zamknąłem ją w suffixie pola wiek:

Kod: Zaznacz cały

suffix:
</div></div>
Co tu się odjaniepawniło? Po prostu podzieliłem pola profilu na dwie grupy - górną (pole '1' i związek) oraz dolną (praca i wiek) - pierwsze pole z grupy w swoim prefixie rozpoczyna ramkę, a drugie pole w suffixie ją kończy, ot, cała filozofia.

Żeby zobaczyć fajny efekt po najechaniu kursorem, należy jeszcze nadać odpowiednie kody tym ramkom:

Kod: Zaznacz cały

/* animacja hovera - cz. 1 */
.pola-profilu-ramka-1 {
    position: absolute;
    top: -200px;
    width: 200px;
    height: 160px;
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
    background-color: rgba(0,0,0, 0.55);
}
.pola-profilu-ramka-2 {
    position: absolute;
    bottom: -200px;
    width: 200px;
    height: 160px;
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
    background-color: rgba(0,0,0, 0.55);
}
Mamy tutaj dwie ramki – pierwsza jest ustawiona nad awatarem, a druga ustawiona pod awatarem (chodzi o parametry top i bottom). Po najechaniu kursorem na awatar, poniższy kod sprawi, że zjadą się one do środka awatara:

Kod: Zaznacz cały

/* animacja hovera - cz. 2 */
.pola-profilu-kontener:hover .pola-profilu-ramka-1 {
    top: 0px;
}
.pola-profilu-kontener:hover .pola-profilu-ramka-2 {
    bottom: 0px;
}
Tutaj ustawione wartości top i bottom mówią o tym, że ramki mają się zaczynać na górnej i dolnej krawędzi naszego kontenera (bo owy jest ustawiony dokładnie na awatarze). Efekt schodzenia się potrwa 1.5 sekundy, bo taką wartość ustaliliśmy w poprzednim kodzie.
Efekt:
Obrazek Obrazek

I prawie byłby już koniec, gdyby nie potrzeba zrobienia jeszcze jednego - naprawienia kontenera w sytuacji, gdy użytkownik nie podał awataru do swojego profilu. Rzecz tą możemy zrobić na dwa sposoby:

Wariant ogólny (zarówno dla wersji A jak i wersji B) -> wyświetla nam obramowanie avatara oraz obrazek zastępczy zamiast avatara:

Kod: Zaznacz cały

/* magiczna sztuczka nr 3 */
span.name + span.postdetails {
    min-height: 320px;
    min-width: 200px;
}
/* zastepczy awatar jesli nie ma sie awatara */
span.name + span.postdetails > .pola-profilu-kontener:nth-child(2) {
    margin-top: 0px;
    background-image: url("link_do_obrazka");
}
Efekt:
Obrazek

Wariant raczej tylko dla wersji B (bez pól na awatarze) - ukrywamy kontener jeśli użytkownik nie wstawił awataru. (Jeśli masz pola na awatarze, to one po prostu nie będą się wyświetlać do momentu w którym nie zostanie przez użytkownika wstawiony awatar.)

Kod: Zaznacz cały

/* magiczna sztuczka nr 3 */
span.name + span.postdetails > .pola-profilu-kontener:nth-child(2) {
    display: none;
}
Efekt:
Pokaż
To już prawie koniec - prawie, bo jeszcze pobawimy się naszym awatarem w kolejnym punkcie!



5. Dodanie ramki/tła do awatara.

Chodzi w tym wypadku o obramowanie pojawiające się wokół awatara przy postach. To chyba dość prosta rzecz, niemniej, najlepiej w taki sposób jest jej dokonywać:

Kod: Zaznacz cały

/* stylizacja awataru */
.pola-profilu-kontener {
    border: 2px solid #443231;
    background-image: url("link_do_półtła_dekorująceg_awatar");
}
Oczywiście, można tutaj do woli dopisać jakiś wymyślny border, background, outline czy co tam jeszcze sobie wymyślicie.
Poniżej możecie zobaczyć co przykładowo można dzięki temu zdziałać:
Pokaż
I to wszystko! <33 Masz swoje pola profilu na awatarze bądź pod nim w ładnej oprawie.
Mało? To zapraszam do kolejnego punktu w którym pobawimy się w tworzenie bardziej zaawansowanych funkcjonalnie pól profilu!.



6. Wymyślne pola profilu.

Dotychczas w tutorialu pokazywałem proste tekstowe pole profilu, ale sam tekst to za mało! Na początek jednak, zanim będą cuda-niewidy, zajmiemy się dość prostymi przykładami pól profilu, a kolejno pobawimy się w łączone pola i listy wyboru.

Poniższe pola profilu można stosować zarówno na awatarze jak i pod nim.
W każdym przypadku nazwę pola należy poprzedzić dwoma znakami: -#.
Pamiętaj też aby ustawić polom odpowiednią maksymalną długość, zwłaszcza przy polach w których wprowadzane są linki!



6.0 Pole profilu z własną nazwą

Domyślne nazwy pól ciężko jest po swojemu ostylować, ale bez problemu można dołożyć swoją nazwę do prefixa lub suffixa. Poniżej kilka przykładów:

Nazwa nad wartością:
Pokaż
Efekt:
Obrazek

Nazwa pod wartością:
Pokaż
Efekt:
Obrazek

6.1 Link w polu profilu z własną nazwą

Przykład ten jest dość prosty - po prostu do diva określającego pole profilu wkładamy także tag <a>. W sufixie dodatkowo nazywamy utworzone pole profilu.
Takie rozwiązanie często jest wykorzystane w polach profilu nad i pod postem do wyświetlania linków do kp, relacji itp.
Pokaż
Efekt:
Obrazek


6.2 Obrazek w polu profilu

Wstawienie obrazka do pola profilu wymaga jego odpowiedniego ograniczenia pod względem wymiarów, aby nie rozszerzał nam niczego.
Pokaż
Efekt:
Obrazek

6.3 Klikalna ikonka z dowolnym linkiem

W tym przykładzie ukryjemy linki w ikonach, co będzie od nas wymagać uprzedniego przygotowania sobie grafik. Polecam wymiary 32x32 i na takich tez oparłem ten przykład. Stronek w internecie z ikonami jest od cholery i oferują one pobieranie ich w wybranym przez nas kolorze.
Pokaż
Efekt:
Obrazek
Wskazówka:
Jeśli chcesz osiągnąć taki efekt jak na obrazku powyżej, musisz wsadzić te pola do jakiegoś diva, tzn. w polu z pierwszą ikonką dodać na początku prefixa div z jakąś klasa, np. <div class="ramka-dla-linkow">, i zamknąć go w suffixie ostatniego z linków. Kolejno ustawić CSSem czerwone tło dla utworzonego diva i to w sumie tyle!

6.4 Link do profilu

Jeśli chcielibyście użyć linku do profilu postaci w jednym z pól profilowych, musicie po prostu skorzystać z przykładu 6.1 lub 6.3 i nakazać użytkownikowi w dane pole wprowadzać link do swojego profilu. Ot, cała filozofia.

6.5 Awatar jako link do profilu

Pamiętacie jak w poprzednich punktach tworzyliśmy pierwsze pole jako obowiązkowe, gdyż posiadało ono kontener nakładany na awatar? A gdyby tak dzięki temu polu zrobić nasz awatar klikalnym, aby prowadził bezpośrednio do profilu postaci? Żaden problem!
Wersja A (z polami profilu na avku):

Kod: Zaznacz cały

prefix:
<a class="pola-profilu-kontener" href="
suffix:
">
I należy pamiętać, aby w polu w którym kontener jest zamykany zamknąć tag </a> zamiast ostatniego diva.

Wersja B (bez pól profilu na avku):

Kod: Zaznacz cały

prefix:
<a class="pola-profilu-kontener" href="
suffix:
"></div>
6.6 Dowolny obrazek jako dowolny link

A jakby jeszcze bardziej pobawić się w łączenie pól ze sobą?
Ten przykład będzie od nas wymagał użycia dwóch pól profilu - jednego na link, a drugiego na obrazek. Przykładem jego zastosowania może być pole określające miejsce zamieszkania, do którego użytkownik wklei obrazek przedstawiający domek/blokowisko oraz link do tematu/subforum w którym się jego lokum znajduje.
Pokaż
Efekt:
Obrazek

6.7 Lista wyboru obrazka

W polach profilu można skorzystać z listy rozwijalnej i dać dzięki niej użytkownikom ograniczony wybór w jakiejś kwestii, np. wyrażać poziom postaci (na każdy poziom przypadałaby inna grafika). Można też tego użyć aby za pomocą ikony pokazywać płeć postaci.
W polu profilu należy zastosować następujące ustawienia:
Pokaż
Następnie trzeba sobie przygotować cztery obrazki i wkleić je w miejsca wyszczególnione w kodzie. Wszystkie obrazki muszą być tej samej wielości i ich wymiary należy wpisać do kodu zamiast wpisanych przykładowo 160px.

Oczywiście takich opcji wyboru może być zarówno mniej (minimum dwie) jak i więcej. Do każdej trzeba po prostu napisać kod z odpowiednim obrazkiem.

Efekt:
Obrazek
(Obrazek trójkąta jest inny w zależności od poziomu mocy - w tym wypadku pokazany 2 i 3 poziom ze skali 1-4.)

Poniżej przykład z polem płeć:
Pokaż

I to tyle ode mnie na ten moment! Dziękuję, za dotrwanie aż do tego momentu i liczę, że wszystko opisałem zrozumiale! W przypadku jakichś nieporozumień/błędów itp nie bójcie się pisać - pomogę wyjaśnię, skoryguję!

PS: Jeśli ktoś miałby jakieś dodatkowe pomysły na pola profilu, to zachęcam w tej sprawie pisać na pw!
Ostatnio zmieniony 10 mar 2018, 0:44 przez Noritoshi, łącznie zmieniany 1 raz.
x x x x

Awatar użytkownika
O mnie
Magizoologist, Hogwarts alumni
Moje fora
tworzę coś swojego

#37986 07 lut 2018, 21:09

Jest super! Na pewno się kiedyś przyda :love:

Awatar użytkownika
O mnie
Cynamonowa rolka z tendencją do niekontrolowanej przemiany w mistrza szydery.
Moje fora
Szukam swojego miejsca w sieci.
Monitor mi umiera i fiksuje z kolorami, chwilowa przerwa w dostawach avatarów.

 ToxicBerry#1704
 8735232

#37989 07 lut 2018, 23:03

Bozia Ci w dzieciach wynagrodzi, dobry człowieku! :miłośćnasiłę:

Awatar użytkownika
O mnie
nie wiem, co tu robię
Moje fora
Hello Boston, Brentwood
 9919922

#38195 15 lut 2018, 13:12

chyba się przydało, dzięki :love:

Awatar użytkownika
O mnie
Gwiazdorzę
Moje fora
Nie gram

#38842 09 mar 2018, 19:40

wszystko pięknie ładnie wyszło ale już ikonki które mają przenosić do relacji itp, to się nie pojawiają aaa :faint:

Awatar użytkownika
O mnie
Jestem częścią układu, jedną z gwiazd w galaktyce. Zgubiłam duszę i mam dwie pomocne dłonie. W lewej ręce trzymam pióro tworzenia, a w prawej nożyczki niszczenia.
Moje fora
San Jose, Shadow York, Caledonia i tworzę M.A.R.S!

 Noritoshi#2699
 6016244

#38843 09 mar 2018, 19:44

Nie? Why :( Sprawdziłaś dobrze nazwę klas i linki do obrazków ikonek masz wzięte w cudzysłów? Jak nadal nie działa, to podeślij mi (może już gdzieś per pw/gg) swoje kody, albo adres forum, to zobaczę ocb.
x x x x

Awatar użytkownika
O mnie
Gwiazdorzę
Moje fora
Nie gram

#38861 09 mar 2018, 22:51

no:( pojawia się link ale obrazek już nie, pewnie coś źle robię ale wytłumaczyłeś tak jak dla początkujących - więc byłam prawie przekonana, że wszystko zrobiłam okej. Próbowałam wklejać już na inne hostingi fotki :medit: Już nie offtopuję, pokombinuję coś jeszcze a jak się nie uda to napiszę :alko:

Awatar użytkownika
O mnie
Alex Turner is my lil daddy
Moje fora
Nie gram, dajta mi spokój.

#38868 09 mar 2018, 23:51

Bo tutaj powinno być tak:

Kod: Zaznacz cały

.pole-profilu-relacje { 
  background-image: url("link_do_ikony_relacji"); 
... dalsza cz. kodu
}
zamiast tego cudzysłowia: ' to ten: " bo jak dasz pojedynczy to obrazek nie będzie się wyświetlał w tematach na wxv/czo
Obrazek
there ain't no romance around there

Awatar użytkownika
O mnie
Jestem częścią układu, jedną z gwiazd w galaktyce. Zgubiłam duszę i mam dwie pomocne dłonie. W lewej ręce trzymam pióro tworzenia, a w prawej nożyczki niszczenia.
Moje fora
San Jose, Shadow York, Caledonia i tworzę M.A.R.S!

 Noritoshi#2699
 6016244

#38871 10 mar 2018, 0:45

Poprawiłem, dzięki za czujność! Misiu, daj znać, czy pomogło!
x x x x

Awatar użytkownika
O mnie
Gwiazdorzę
Moje fora
Nie gram

#38876 10 mar 2018, 11:20

właśnie myślałam żeby to zmienić ale stwierdziłam, że to nie gra dużej roli a jednak - pomogło! Dość zabawne ale działa, dziękuję wam <3

Awatar użytkownika
Moje fora
Magic Lullaby
life is brutal & full of zasadzkas

 Mrusia#8627

#38879 10 mar 2018, 17:56

Robię sobie zakładkę, by uzupełnić wiedzę :medit:

ODPOWIEDZ ]