19 odpowiedzi w tym temacie

[Quasindro]

Witajcie!
Mam do zaprezentowania dzisiaj 'mini'-poradnik dotyczący niestandardowych kodów HTML Waszych profili (yay!).

Od razu rzucam parę linków, żeby później nie było głupich pytań

http://net4game.com/...um-edycja-html/ - Standardowe podstawy, najbardziej elementarna wiedza potrzebna do poprawnego kodowania.

http://net4game.com/...-wlasny-profil/ - Prosty poradnik użytkownika Xertio, ma w sobie potrzebne podstawy związane bezpośrednio z silnikiem IPBoard.

http://net4game.com/...-ci-html-wejdz/ - Jeśli macie problem z zapisaniem kodu (robi miazgę).

No dobrze, skoro już nie będzie głupich pytań, zacznijmy już prawdziwy wstęp. Jeśli na forum jesteście od ponad miesiąca, to zapewne zauważyliście mój spam na statusach związany z kodowaniem profilu. Miałem z tym wielkie problemy, ponieważ chciałem, żeby mój profil był oryginalniejszy od innych. Ale to się zmieniło, głównie po poznaniu użytkownika Venoth, który bardzo mi po pewnym czasie pomógł (wypłakałem się, że mi kod nie działa - dał mi do zrozumienia, że miałem źle założoną klamrę na jedną klasę), a jednocześnie robi masowo profile dla użytkowników za darmo (o ile się nie mylę...).
Chyba mogę śmiało powiedzieć, że poziom mojego profilu osiągnął już poziom najwyższy. Nic więcej zmienić nie mogę, oprócz tekstu. Więc miszczu dzieli się z Wami wiedzą. Daję Wam spis wszystkich moich klas (niemal 450 linijek kodu, ponad 10.000 [słownie: tak, dziesięć tysięcy] znaków), wraz z wyjaśnieniem, czym one są i do czego służą. Jednocześnie estetycznie napisane i pozamykane klamrami. Osobiście dążę do samorealizacji i jestem samoukiem, więc nie mam zamiaru dawać Wam mojego gotowego kodu. To, co Wam daję, jest 'zresetowane'. Więc korzystajcie mądrze. Zapraszam.

• Całość strony, najważniejsze cechy, powinny być narzucane na resztę (w tym wypadku nie są, ponieważ każda część ma swoją klasę, która jest nadrzędna.
  
  Spoiler

  <style>html, body {background: url('http://s5.ifotos.pl/img/Konachanc_rhnsanw.jpg') fixed no-repeat; /* odpowiada za tło całej strony */font-family: Serif; /* styl czcionki na całej stronie */text-shadow: black 1px 1px, maroon 1px 1px; /* cień tekstu, w moim kodzie to to malutkie obramowanie, żeby biała czcionka była widoczna na białym tle; jednocześnie zwiększa estetykę w dużym stopniu. */}

  Przykład: Powyższy kod, gdy wpisany jest samotnie (bez niczego, tylko to ze znacznikiem <style>) i z linkiem do mojego tła, wygląda mniej-więcej tak:
  
  
  
  
  
• Cała strona + linki. Potrzebne, żeby kursor się nie zmieniał po najechaniu na link.
  
  Spoiler

  body, a, a:hover {cursor: url('link'), progress !important; /* po prostu kursor. */}

  Powyższy kod odpowiada jedynie za kursor, nie ma po co robić mu screenshotów
  
  
  
  
• górny panel, logo serwisu.
  
  Spoiler

  #branding {background: transparent;border-bottom: none;}

  Przykład: Powyższy kod odpowiada za te części profilu:
  Na CZERWONO zaznaczony "background"
  Na NIEBIESKO zaznaczony "border-bottom" (z dodanymi paroma znacznikami - m.in "border-width" - dla wzmocnienia efektu)
  
  
  
  
  
• Drugie z rzędu tło profilu
  
  Spoiler

  #content {background: rgba(0,0,0,0.0);}

  Przykład: Powyższy kod odpowiada za tę część profilu:
  
  
  
  
  
• Rozwijane menu na górnym panelu, po kliknięciu w nasz nick
  
  Spoiler

  .ipsHeaderMenu {background: rgba(0,0,0,0.0);}

  Przykład: Powyższy kod odpowiada za tę część profilu:
  
  
  
  
  
• Górny panel, ten dostępny na każdej podstronie. Podmieniamy obrazek deseni
  
  Spoiler

  #header_bar {background: #hex url('link do deseni') repeat-x bottom;padding: 0;text-align: right}

  Przykład: Powyższy kod odpowiada za tę część profilu:
  
  
  
  
  
• Cały zaznaczony poniższy kod odpowiada za tekst na identyfikatorze "header_bar" (1 w górę)
  
  Spoiler

  #admin_bar {font-size: 0px;line-height: 0px}#admin_bar li.active a {color: #hex;}#admin_bar a {color: #hex;}#admin_bar a:hover {color: #hex;}

  Powyższy kod jest nieco bardziej złożony, wyjaśniam screenshot:
  Na CZERWONO zaznaczono identyfikator "admin_bar a".
  Na NIEBIESKO zaznaczono identyfikator "admin_bar a:hover" (po najechaniu myszką na czerwony, zmienia się w niebieski).
  Na RÓŻOWO zaznaczono identyfikator "admin_bar li.active a"
  
  
  
  
  
• tło tego małego prostokącika z ilością graczy lub ilością nieprzeczytanych powiadomień na header-barze
  
  Spoiler

  .ipsHasNotifications {background-color: #hex;}

  Na screenshocie przedstawiony kolorem błękitnym.
  
  
  
  
  
• kolor tła obrazków z wiadomościami, powiadomieniami i naszym nickiem po najechaniu na nie kursorem, jak i kolor tła i czcionki po wejściu w rozwijaną listę powiadomień, wiadomości i okno oznaczone klasą ipsHeaderMenu.
  
  Spoiler

  #user_link:hover,#notify_link:hover,#inbox_link:hover {background-color: rgba(0,0,0,0.0);}#user_link.menu_active,#notify_link.menu_active,#inbox_link.menu_active {background-color: rgba(0,0,0,0.0);color: #hex;}

  Na screenie przedstawione są:
  Kolorem CZERWONYM zaznaczone są klasy z dodatkiem stylu ":hover".
  Kolorem BŁĘKITNYM zaznaczone są klasy połączone z klasą "menu_active".
  
  
  
  
  
• Zmienione obrazki na header_barze.
  
  Spoiler

  #inbox_link {background: url(http://img508.imageshack.us/img508/5425/iconnotify.png) no-repeat top}#notify_link {background: url(http://img651.imageshack.us/img651/7693/iconinbox.png) no-repeat top;}

  Krótko mówiąc, podmienia obrazki standardowe (kolejno: wiadomości i powiadomień), na nasze, niedomyślne.
  
  
  
  
  
  
  
• Zmienione panele związane z naszą ilością lajków i GamerScore.
  
  Spoiler

  .reputation.positive, .members li.positive {background: rgba(0,0,0,0.0);color: white;}.gsPremium, .gsPremiumGOLD {background: rgba(0,0,0,0.0);border: 0px;color:white;}

  Panel zaznaczony CZERWONYM kolorem jest klasą "gsPremium"
  Panel zaznaczony POMARAŃCZOWYM kolorem jest klasą "reputation.positive"
  
  
  
  
  
• Poniższe kody odpowiadają głównie za tło - moim zdaniem najbardziej sensownym wyjściem jest zostawienie ich tak, jak ja podałem - z wyłączonym tłem.
  
  Spoiler

  .ipsLayout_smallleft.ipsLayout .ipsLayout_left {background-color: rgba(0,0,0,0.0);}.ipsLayout_largeright.ipsLayout .ipsLayout_right {background-color: rgba(0,0,0,0.0);}.ipsLayout_largeright.ipsLayout_withright {background-color: rgba(0,0,0,0.0);}

  Na screenshocie kolorem ŻÓŁTYM zaznaczono klasę ".ipsLayout_smallleft.ipsLayout .ipsLayout_left"
  Kolorem CZERWONYM zaznaczono klasę "ipsLayout_largeright.ipsLayout_withright"
  Kolorem ZIELONYM zaznaczono klasę ".ipsLayout_largeright.ipsLayout .ipsLayout_right"
  
  
  
  
  
• Poniższe kody odpowiadają głównie za tło - moim zdaniem najbardziej sensownym wyjściem jest zostawienie ich tak, jak ja podałem - z wyłączonym tłem.
  
  Spoiler

  .ipsBox_container{background-color: rgba(0,0,0,0.0);border: none;color: white;}.ipsBox {background: none;}

  I tutaj jest lekko zmieniona moja taktyka, ponieważ kod jest nieco inny.
  Kolorem CZERWONYM zaznaczyłem klasę "ipsBox_container", a dokładniej styl "background-color".
  Kolorem NIEBIESKIM zaznaczyłem należący do klasy "ipsBox_container" styl "border" z lekko zmienionymi atrybutami i dodanym stylem "border-width" (dla zwiększenia efektu)
  Kolorem BŁĘKITNYM zaznaczyłem należący do klasy "ipsBox_container" styl "color".
  Natomiast kolorem ZIELONYM zaznaczyłem klasę "ipsBox"
  
  
  
  
  
• Tabelki, panele na podstronie "Przegląd" naszego profilu
  
  Spoiler

  .general_box {background: rgba(0,0,0,0.0);}.general_box a {color: jakiśtam;}.general_box h3 {background: rgba(0,0,0,0.0);color: jakiśtam;}

  Na screenie zaznaczono kolorem ŻÓŁTYM klasę "general_box h3"
  Kolorem CZERWONYM zaznaczono klasę "general_box"
  Natomiast klasa "general_box a" to linki znajdujące się w tych tabelach, na screenie to tekst pisany na NIEBIESKO
  
  
  
  
  
• boczne buttony - przegląd, karta gracza, status, etc.
  
  Spoiler

  .ipsVerticalTabbed_tabs li {background-color: rgba(0,0,0,0.0);border: 1px solid rgba(0,0,0,0.0);}.ipsVerticalTabbed_tabs > ul {color: jakiśtam;border-top: none;border-left: none;}.ipsVerticalTabbed_tabs li.active a {color: jakiśtam;width: 131px;border-right: none;background: rgba(0,0,0,0.0);}.ipsVerticalTabbed_tabs li a {color: jakiśtam;}.ipsVerticalTabbed_tabs li a:hover {color: jakistam;background-color: rgba(0,0,0,0.0);}

  
  
  
  
  
• Panel ostatniego statusu, widziany na stronie głównej.
  
  Spoiler

  #user_latest_status {background: url('link') no-repeat 0 50%;padding-left: 11px}#user_latest_status > div {background: rgba(0,0,0,0.0);color: jakiśtam;}

  Kolorem CZERWONYM zaznaczyłem tło identyfikatora "user_latest_status > div"
  Natomiast to czarne pole z jakimś napisem to losowy obrazek, jako tło identyfikatora "user_latest_status"
  
  
  
  
  
• Przyciski. Czyli 'moja zawartość' i karty postaci. Proponuję jedynie pozmieniać kolory.
  
  Spoiler

  .ipsButton_secondary {color: jakiśtam;background: rgba(0,0,0,0.0);background: -moz-linear-gradient(top,rgba(0,0,0,0.0) 0, #rgba(0,0,0,0.0) 100%);background: -webkit-gradient(linear,left top,left bottom);border: 1px solid rgba(0,0,0,0.0);-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.0) inset,0px 1px 0 rgba(0,0,0,0.0);-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.0) inset,0px 1px 0 rgba(0,0,0,0.0);box-shadow: 0 1px 0 rgba(0,0,0,0.0) inset,0px 1px 0 rgba(0,0,0,0.0);}.hnick, .htime, .hseen {color: jakiśtam}

  Na screenie kolorem CZERWONYM zaznaczono klasę ".ipsButton_secondary"
  Klasy ".hnick, .htime, .hseen" to tylko tekst w karcie postaci, podpis buttonów (czarna czcionka)
  
  
  
  
  
• Szerokie sztabki, np. napis "kartoteka" lub "San Andreas Multiplayer" w karcie gracza
  
  Spoiler

  .bar {background: rgba(0,0,0,0.0) repeat-x top;color: jakiśtam;box-shadow: inset 0 0px 0 rgba(0,0,0,0.0);border-color: rgba(0,0,0,0.0);}.maintitle {background: rgba(0,0,0,0.0) repeat-x top;color: jakiśtam;box-shadow: inset 0 0px 0 rgba(0,0,0,0.0);border-color: rgba(0,0,0,0.0);}

  CZERWONYM kolorem zaznaczono tło klasy ".bar"
  NIEBIESKIM kolorem zaznaczono tło klasy ".maintitle"
  
  
  
  
• Kartoteka - z napisami "nadano", "postać", "treść wpisu"
  
  Spoiler

  .header {background: rgba(0,0,0,0.0);color: jakistam;}

  
  
  
  
  
• Rzędy poziome, np. w kartotece lub osiągnięciach GamerScore w karcie postaci
  
  Spoiler

  .row1, .post_block.row1 {background-color: rgba(0,0,0,0.0);}.row2, .post_block.row2 {background-color: rgba(0,0,0,0.0);}

  
  
  
  
  
• Odstęp między rzędami przedstawionymi powyżej.
  
  Spoiler

  table.ipb_table td {border-bottom: none;}

  Nie zrobiłem screena. Przy klasach typu ".row" możecie zobaczyć białe odstępy. to jest właśnie ta klasa, zmieniacie tylko atrybuty stylu "border"
  
  
  
  
• Dolne podpisy, napis "Przegląda profil: >nick<" oraz regulamin
  
  Spoiler

  .breadcrumb {color: jakiśtam;}.breadcrumb a {color: jakiśtam;}

  Na screenie kolorem CZERWONYM zaznaczono klasę ".breadcrumb a"
  Na screenie kolorem NIEBIESKIM zaznaczono klasę ".breadcrumb"
  
  
  
  
  
• Szczegółowa Karta Postaci
  
  Spoiler

  .popupWrapper { // po wejściu w panel postaci w karcie gracza (wyskakuje okienko) - tło okna.background-color: rgba(0,0,0,0.0);}.popupInner {background-color: rgba(0,0,0,0.0);}.popupInner h3 {background: transparent;background-color: rgba(0,0,0,0.0);color: white;border: none;padding: 8px 10px 9px;font-size: 16px;font-weight: 300;text-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow: inset 0px 0px 0 #528CBC;box-shadow: inset 0px 0px 0 #528CBC;-moz-box-shadow: inset 0px 0px 0 #528CBC;}

  Nie jestem w stanie objaśnić tego kodu w kilku zdaniach, na surowej wersji. Niektóre szczegóły widoczne są JEDYNIE po ustawieniu przeźroczystości
  

Dzielę na dwa posty, ponieważ limit grafik nie pozwolił mi na dokończenie w jednym poście. Ewentualnie proszę o zescalenie.

Użytkownik Quasindro edytował ten post 31/12/2011 - 03:41

[Quasindro]

Ciąg dalszy.

• W podstronie statusu, tło okna z polem tekstowym
  
  Spoiler

  .status_update {background: rgba(0,0,0,0.0);}

  
  
  
  
  
• Okna postów
  
  Spoiler

  .post_block h3 {background: rgba(0,0,0,0.0);}.post_block {background: rgba(0,0,0,0.0);border-bottom: 1px solid rgba(255,255,255,0.02);}.post_body .post {color: white;}

  Kolorem CZERWONYM zaznaczono klasę ".post_block h3"
  Kolorem NIEBIESKIM zaznaczono klasę ".post_block"
  Natomiast BŁĘKITNYM tekstem zaznaczono klasę ".post_body .post"
  
  
  
  
  
• Okienko cytatu
  
  Spoiler

  p.citation {border-left: 2px solid rgba(0,0,0,0.0);background: transparent;background: rgba(0,0,0,0.0);background: -moz-linear-gradient(top,rgba(0,0,0,0.0) 0,rgba(0,0,0,0.0) 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.0)),color-stop(100%,rgba(0,0,0,0.0)));border-top: 2px solid rgba(0,0,0,0.0);border-right: 2px solid rgba(0,0,0,0.0);}div.blockquote {font-size: 12px;padding: 10px;border-left: 2px solid rgba(0,0,0,0.0);border-right: 2px solid rgba(0,0,0,0.0);border-bottom: 2px solid rgba(0,0,0,0.0);-moz-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;background: rgba(176,23,31,0.05);}

  Kolorem (pół-przeźroczystym)CZERWONYM zaznaczono klasę "p.citation"
  Kolorem NIEBIESKIM zaznaczono klasę "div.blockquote"
  
  
  
  
  
• Zmiana "grupy" w statystykach
  
  Spoiler

  .row_data span {background: url("'link'") no-repeat scroll left center transparent;color: transparent;padding-left: 90px;}

  Na screenie zaznaczone połową trollfejsa (oznacza to również, że jest tam ograniczone miejsce, bodajże 50x15px
  
  
  
  
  
• Kolor naszego nicku na stronie głównej profilu oraz nagłówek np. po wejściu w skrzynkę odbiorczą (zmieściłem na jednym screenie, to niech i tak zostanie, ale są to dwie osobne rzeczy)
  
  Spoiler

  .ipsType_pagetitle, .ipsType_subtitle {color: #ffffff;}.ipsType_sectiontitle {color: jakiśtam;}

  Na screenie kolorem CIEMNOZIELONYM zaznaczono klasę ".ipsType_sectiontitle"
  Natomiast kolorem CZERWONYM zaznaczono klasę ".ipsType_pagetitle, .ipsType_subtitle"
  
  
  
  
  
• Tło nieprzeczytanego powiadomienia
  
  Spoiler

  .unread .altrow,.unread.altrow {background-color: rgba(0,0,0,0.0)}.unread {background-color: rgba(0,0,0,0.0)}

  
  
  
  
• Podpisy informacji (m. in. "ostatnio: jakiśtamczas temu")
  
  Spoiler

  .desc.lighter, .desc.lighter.blend_links a {color: white;}

  
  
  
  
  
• Napisy praw autorskich
  
  Spoiler

  #copyright { color: white;text-shadow: black 1px 1px, maroon 1px 1px}#copyright a {color: white}

  
  
  
  
  
• Debug (stopka)
  
  Spoiler

  #ipsDebug_footer {width: 900px;margin: 8px auto 0 auto;text-align: center;color: #hex;text-shadow: black 1px 1px, maroon 1px 1px;font-size: 11px}#ipsDebug_footer a {color: #hex}

  
  
  
  
• Niestandardowe css zrobione przeze mnie, żeby tabela wyglądała estetyczniej.
  
  Spoiler

  .tabela {margin-left: 20px;margin-right: 20px;}span.margines {margin-left: 20px}</style>

  
  
  
  
• I tutaj macie tabelkę (wklejacie poza znacznikiem <style>
  
  Spoiler

  <div class='general_box clearfix'><h3>statystyki ftw</h3><div class='tabela'><span class="margines">Wasz tekst lololololol</span></div></div>

To by było na tyle.
Dziękuję za przeczytanie, mam nadzieję, że pomoże. Bajuu!

Użytkownik Quasindro edytował ten post 30/12/2011 - 15:50

[Mr Snoopers]

Odświeże bo ludzie muszą korzystać z tego dobra.

Lajk - zajebisty poradnik.

[TroX]

A tyczy się ten poradnik także do subdomenki n4g? Bo chciałbym sobie stronke walnąć.

[Matys]

Pewnie ta.

[Quasindro]

A tyczy się ten poradnik także do subdomenki n4g? Bo chciałbym sobie stronke walnąć.

Na subdomenie troszkę inaczej to wygląda, bo przecież budujesz ją sam - od podstaw.
Natomiast, jeśli chodzi o edycję systemu komentarzy - ma on własne klasy css, których nie ma w tym temacie.

[Mr Snoopers]

Kiedy UpDate? :<

[Quasindro]

Kiedy UpDate? :<

Jak będę miał motywację

Użytkownik Quasindro edytował ten post 01/02/2012 - 15:47

[BeCrazy]

Może podrzucisz tutaj jakiś ładny, nienachalny, gotowy profilek ?

[Lampion]

http://www.youtube.com/watch?v=YRLUaEhYEBA

Oto krótki film przedstawiający problem w edytorze profili - ma ktoś na to jakiś pomysł? Może to jest jakiś błąd, który trzeba naprawić?

Użytkownik Lampion edytował ten post 05/03/2012 - 15:56

[Quasindro]

http://www.youtube.com/watch?v=YRLUaEhYEBA

Oto poradnik przedstawiający problem w edytorze profili - ma ktoś na to jakiś pomysł? Może to jest jakiś błąd, który trzeba naprawić?

W TEJ CHWILI błąd występować nie powinien, Misiek przecież "naprawił" edytor kilka dni temu.
Ale jeśli faktycznie dalej masz to, co pokazałeś na filmie, to po wklejeniu kodu zaznacz go (ctrl+A; zaznacz wszystko) i kliknij na button znajdujący się lewym-górnym rogu edytoru, który opisany jest jako "usuń formatowanie". Zrobi z kodu sieczkę, ale po zapisaniu powinno działać. Więc proponuję najpierw zapisać w notatniku kod, który chcesz wykorzystać, bo po zapisaniu z poziomu edytoru już go w zasadzie nie odzyskasz.

Może podrzucisz tutaj jakiś ładny, nienachalny, gotowy profilek ?

Stopień jego "ładności" i oryginalności zależy od tego, ile mi zapłacisz.

Użytkownik Quasindro edytował ten post 05/03/2012 - 09:20

[Lampion]

Chyba pomogło, zmodyfikuję cały kod, zmienię cały profil i jeśli będzie normalnie, dam znać, dzięki z góry za pomoc!

[Paweł Gara]

jak dodać jakiś filmik z YT?

[DamianDoma]

Ładny poradnik.

[PUN1SH3R]

Dobre, dobre dzięki.

Użytkownik HardkorS22 edytował ten post 09/04/2012 - 13:01

[Cicero]

Dzięki wielkie bardzo się to przydało.

[_Martin_]

Ciekawy poradnik. 

[Kszycz Gensior]

No, no zajebioza pany.

[Landryna18]

Fajne

[GarRreT]

Poradnik całkiem spoko,
na pewno sie przyda