Artemida - Wojownicy PBF

Edycja scrolla działa na całą stronę, więc można by dopisać w osobnym "code" aby nie wpływało na tą stronę :thinkinggburek:

Scrolla można też uzależnić od klasy, dzięki czemu nie działa na całą stronę forum, tylko na np. Konkretnego diva, polecam cieplutko :

Piękny wzór na kp :D Na pewno użyję przy nowej postaci ^^

*Zerka nieśmiało*

Uh... Ja może też użyję szablonu od Sroki...?

no hej, przychodzę do was z bardzo podstawową templatką na podpis. nie wiedziałem, gdzie wrzucić, więc wrzucę tu. kopiujcie sobie przez cytat, bo kod rozciąga temat.

.tlotemplatka{height:205px; width:352px; background:url('https://64.media.tumblr.com/3baee9a0b9ba13454471854ddf810a8b/3eb653e3a7ea2789-c3/s640x960/6f9822092b7c4dfb2751b8a943432665d461eb46.gif');} .templatka1{height:40px; width: 344px; margin-top:55px; font-size:10px; text-align:center; line-height:11px; background-color: rgba(0, 0, 0, 0.6); padding:4;} .templatka2 {font-family: 'beth ellen'; font-size: 12px; line-height:14px}

w pierwszej kolejności zmieńcie nazwy divów!! w innym wypadku będziecie sobie nawzajem zmieniać formatowanie podpisów lol. czyli tam, gdzie jest "tlotemplatka" w class i w stylu po kropce, zmieniacie sobie na np. "tloimiepostaci".
po kolei:
.tlotemplatka: height i width zmieniają wysokość i szerokość obrazka, mój ulubiony rozmiar to 200x380, ale to zależy, co chcecie osiągnąć. do tego diva możecie dodać bajery, jak np. ramka czy cień, wystarczy pierwszy tutorial do css żeby to wrzucić.
.templatka1: height, width zmieniają wysokość i szerokość tła za tekstem. margin-top ustawia wysokość, na której się znajduje (może być niżej albo wyżej, tu jest mniej więcej na środku), można sobie też dodać np. margin-left, żeby tekst był bardziej przesunięty na jedną stronę. font-size to wielkość czcionki, text-align formatuje położenie tekstu, line-height zmienia wielkość interlinii. padding określa jaki odstęp jest między tłem a tekstem. background-color to kolor tła; zmieniacie go podając kod rgb (biały to np 255, 255, 255), ostatnia cyfra to przezroczystość i może być dowolną wartością od 0.1 do 1.
.templatka2: font-family zmienia krój czcionki. żeby zmienić czcionkę, trzeba sobie jakąś znaleźć na google fonts. wybieracie czcionkę, klikacie na nią, wybieracie sobie styl klikając "+select this style". pojawi się okienko, wchodzicie w zakładkę embed i kopiujecie link, który wklejacie sobie do podpisu, a nazwę czcionki wpisujecie po font-family.

z tą bazą w sumie możecie zrobić wszystko, dodając sobie różne bajery typu okrągłe rogi, cień za tekstem, jakiś jeżdżący tekst i inne pierdoły. kody znajdziecie np. na w3schools w zakładkach z html i css :>

Fiołko!!!
Uwielbiam cię tego było mi potrzeba :ohnie:

Zaraz lecę sobie zrobić podpis na mysz luv u :

DOSKONAŁE, SZAD, KRADNĘ

Imiębb Imię kociak > Imię term > Imię woj

bb

bbPłeć: info
bbKlan: info
bbRanga: info
bbWiek: info
bbMistrz: info
bbNauczyciel: info
bbOrientacja: info
bbDzielenie języków: info
bbGłos: info
bbTheme: infoAparycja
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
Charakter
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
Historia
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."


.obrazek1{width:660; height:60; background: url(https://i.imgur.com/ehOhx1H.png)} .imie {font-family: 'Caveat', cursive; font-size:80px; line-height:20px; margin-left;} .napis{font-family: 'Caveat', cursive; font-size:45px; line-height:30px; margin-left} .rameczka1{width:660; height:15; background-color:#22333b} .dół{width:660; height:380; background-color:#DEEFED} .lewo{width:220; height:350; border-right: 2px solid #B8D6D2; overflow: scroll; scrollbar-width: none;} .prawo{width: 410px; height: 350px; overflow: scroll; scrollbar-width: none;} .prawo::-webkit-scrollbar {display: none;} .lewo::-webkit-scrollbar {display: none;}



Więc o to mały wzorek na kp ode mnie. Czułam potrzebę pokodować, a jako kp dla moich postaci jako tako mam to postanowiłam zrobić kod dla każdego do użytku. Nie jest on skomplikowany, więc łatwo go edytować.

.obrazek1 - Obrazek znajdujący się na samej górze, zmieniacie sobie na jaki chcecie, może być to też gif. Zamieniacie po prostu link.

.imie - Imię kocięce twojej postaci lub wojownicze, to już zależy od twoich upodobań. Jest to ten duży napis ,,imię'' w foncie. Możecie zmienić sobie font korzystając z google fonts. Fiołkowy Świt wszystko wyżej rozpisał jak wszystko po kolei podmienić.

.napis - Font dla napisu ''Aparycja'' ''Charakter'' ''Historia''

.rameczka1 - Ciemny pasek za imionami oraz na dola za statystykami i zgodą na adppcję. Można zmienić sobie kolor.

.dół - Tło do dolnej zawartości kp. Można zmienić kolor.

.lewo - Lewa część kp. W style można zmienić kolor paseczka odzielającego lewą część od prawej. W samej zawartości tego diva już w kodzie właściwym można zmienić avatar postaci oraz uzupełnić informacje. Można dać więcej informacji, będzie się wtedy dało scrolować.

.prawo - Prawa część kp. W zawartości tego diva uzupełnić można aparycję, charakter oraz historię

Have fun!

Kod sam w sobie:

O jaki śliczny szablonik!!! :

kradnę fiołkową templatkę

HIA. W próbie powrotu na forumko pyknęłam szablon kp Ważki, który w sumie uznałam że można sobie go używać darmowo na obrębie kotów
Szablon karty postaci by Wydmowy Wiatr.
Imię Imię
Imię 1> Imię 2 > Imię aktualne
płeć :: ilość ks ☾ [miesiąc] :: Przynależność > Przynależność 2 :: Ranga 1> Ranga 2> Ranga 3> Ranga aktualna
Wyrażam zgodę / Nie wyrażam zgody na adopcję postaci.

OSOBOWOŚĆLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus dui nec vehicula sollicitudin. Vestibulum urna ligula, fringilla sit amet quam ac, volutpat mollis tellus. Praesent nec arcu justo. Integer nulla nunc, aliquet quis nisl id, lobortis mattis nulla. Sed consectetur egestas risus, eget semper diam tristique in. Donec congue augue non elementum sollicitudin. Vestibulum sit amet ipsum lacus. Praesent tincidunt metus ut ex vestibulum, eu viverra lectus vestibulum. Proin sit amet nunc tellus. Quisque non ante id tellus facilisis scelerisque porttitor in eros.APARYCJALorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus dui nec vehicula sollicitudin. Vestibulum urna ligula, fringilla sit amet quam ac, volutpat mollis tellus. Praesent nec arcu justo. Integer nulla nunc, aliquet quis nisl id, lobortis mattis nulla. Sed consectetur egestas risus, eget semper diam tristique in. Donec congue augue non elementum sollicitudin. Vestibulum sit amet ipsum lacus. Praesent tincidunt metus ut ex vestibulum, eu viverra lectus vestibulum. Proin sit amet nunc tellus. Quisque non ante id tellus facilisis scelerisque porttitor in eros.

siema
galeria: [link]
DZIEJELorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus dui nec vehicula sollicitudin. Vestibulum urna ligula, fringilla sit amet quam ac, volutpat mollis tellus. Praesent nec arcu justo. Integer nulla nunc, aliquet quis nisl id, lobortis mattis nulla. Sed consectetur egestas risus, eget semper diam tristique in. Donec congue augue non elementum sollicitudin. Vestibulum sit amet ipsum lacus. Praesent tincidunt metus ut ex vestibulum, eu viverra lectus vestibulum. Proin sit amet nunc tellus. Quisque non ante id tellus facilisis scelerisque porttitor in eros.

mama x tata
DOŚWIADCZENIELorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus dui nec vehicula sollicitudin. Vestibulum urna ligula, fringilla sit amet quam ac, volutpat mollis tellus. Praesent nec arcu justo. Integer nulla nunc, aliquet quis nisl id, lobortis mattis nulla. Sed consectetur egestas risus, eget semper diam tristique in. Donec congue augue non elementum sollicitudin. Vestibulum sit amet ipsum lacus. Praesent tincidunt metus ut ex vestibulum, eu viverra lectus vestibulum. Proin sit amet nunc tellus. Quisque non ante id tellus facilisis scelerisque porttitor in eros.

lvl x | S: x | Zr: x | Sz: x | Zm: x | HP: xx | W: xx | EXP: xxx/xxx

.container{width: 660px; height: auto; border: 1px solid #000000; background-color: #444444;}
.szarypasek{height: 20px; background-color: #555555; text-align: center; border-bottom: 1px solid #000000;}.tlo1{background: url(https://i.imgur.com/aSYbVyh.png); background-blend-mode: saturation; background-color: rgb(0 0 0 / 0.5); border-bottom: 1px solid #000000;}.segment1{margin-left:3%; margin-right:18%;}.backgroundcolor{background-color: rgb(155 155 155 / 0.3);border-radius: 10px 100px / 120px; padding: 2px;}.imie1{text-shadow: 2px 2px #000000; font-size: 40px; padding-left: 10px; font-family: raleway; font-style: italic;}.poprzednieimiona{text-shadow: 1px 1px #000000; font-size: 16px; font-style: thin; margin-left: 30%;}.obrazek{ margin-left:3%; margin-top:3%; float: left;}.tekst-obok-obrazka{text-shadow: 2px 1px #333333; background-color: rgb(255 255 255 / 0.1); border-radius: 50px 100px / 120px; margin-left: 5%; margin-right: 20%; padding: 8px; font-family: raleway; font-size: 15px; color: #ffffff;}.clear-both{clear: both;}.charakter-wyglad{margin-left: 3%; margin-right: 3%;}.osobowosc{background-color: rgb(255 255 255 / 0.3); border-radius: 5px; margin-right: 5%; float: left; width: 47%; height: 300px; overflow: scroll; scrollbar-width: none;}.osobowosc::-webkit-scrollbar {display: none;}.header{font-size: 30px; text-align: center; font-family: raleway; font-style: thin; letter-spacing: 2px; border-bottom: 3px dashed #444444; padding-bottom: 15px; color: #e1e5eb;}.tekst{padding-left: 10px; padding-right: 10px;}.aparycja{background-color: rgb(255 255 255 / 0.3); border-radius: 5px; float: left; width: 47%; height: 300px; overflow: scroll; scrollbar-width: none;}.aparycja::-webkit-scrollbar {display: none;}.szarypasek2{height: 20px; background-color: #555555; text-align: center; border-bottom: 1px solid #000000; border-top: 1px solid #000000;}.dzieje-ekspy{background-color: rgb(255 255 255 / 0.3); border-radius: 5px; width: 93%; height: 200px; overflow: scroll; scrollbar-width: none; margin-left: 3%; margin-right: 3%;}.dzieje-ekspy::-webkit-scrollbar {display: none;}.szarypasek3{height: 20px; background-color: #555555; text-align: center; border-top: 1px solid #000000;}


Przykładowy wypełniony (prawie...) szablon


Szablon karty postaci by Wydmowy Wiatr
Ważkowa Sadzawka
Ważka > Ważkowa Łapa > Ważkowa Sadzawka
kotka :: 73 ☾ [I] :: Klan Cienia > Samotnik :: Kocię > Terminator > Wojownik > Samotnik
Nie wyrażam zgody na adopcję postaci.

OSOBOWOŚĆLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus dui nec vehicula sollicitudin. Vestibulum urna ligula, fringilla sit amet quam ac, volutpat mollis tellus. Praesent nec arcu justo. Integer nulla nunc, aliquet quis nisl id, lobortis mattis nulla. Sed consectetur egestas risus, eget semper diam tristique in. Donec congue augue non elementum sollicitudin. Vestibulum sit amet ipsum lacus. Praesent tincidunt metus ut ex vestibulum, eu viverra lectus vestibulum. Proin sit amet nunc tellus. Quisque non ante id tellus facilisis scelerisque porttitor in eros.APARYCJALorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus dui nec vehicula sollicitudin. Vestibulum urna ligula, fringilla sit amet quam ac, volutpat mollis tellus. Praesent nec arcu justo. Integer nulla nunc, aliquet quis nisl id, lobortis mattis nulla. Sed consectetur egestas risus, eget semper diam tristique in. Donec congue augue non elementum sollicitudin. Vestibulum sit amet ipsum lacus. Praesent tincidunt metus ut ex vestibulum, eu viverra lectus vestibulum. Proin sit amet nunc tellus. Quisque non ante id tellus facilisis scelerisque porttitor in eros.

siema
galeria: [link]
DZIEJELorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus dui nec vehicula sollicitudin. Vestibulum urna ligula, fringilla sit amet quam ac, volutpat mollis tellus. Praesent nec arcu justo. Integer nulla nunc, aliquet quis nisl id, lobortis mattis nulla. Sed consectetur egestas risus, eget semper diam tristique in. Donec congue augue non elementum sollicitudin. Vestibulum sit amet ipsum lacus. Praesent tincidunt metus ut ex vestibulum, eu viverra lectus vestibulum. Proin sit amet nunc tellus. Quisque non ante id tellus facilisis scelerisque porttitor in eros.

Żmijowy Ogon x Motyli Lot (Łabędź)
DOŚWIADCZENIELorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus dui nec vehicula sollicitudin. Vestibulum urna ligula, fringilla sit amet quam ac, volutpat mollis tellus. Praesent nec arcu justo. Integer nulla nunc, aliquet quis nisl id, lobortis mattis nulla. Sed consectetur egestas risus, eget semper diam tristique in. Donec congue augue non elementum sollicitudin. Vestibulum sit amet ipsum lacus. Praesent tincidunt metus ut ex vestibulum, eu viverra lectus vestibulum. Proin sit amet nunc tellus. Quisque non ante id tellus facilisis scelerisque porttitor in eros.

lvl 3 | S: 12 | Zr: 7 | Sz: 8 | Zm: 6 | HP: 75 | W: 45 | EXP: 165/200

.container{width: 660px;height: auto;border: 1px solid #000000;background-color: #444444;}.szarypasek{height: 20px;background-color: #555555;text-align: center; border-bottom: 1px solid #000000;} .szarypasek2{height: 20px;background-color: #555555;text-align: center; border-bottom: 1px solid #000000; border-top: 1px solid #000000;}.szarypasek3{height: 20px;background-color: #555555;text-align: center; border-top: 1px solid #000000;}.tlo1{background: url(https://i.imgur.com/aSYbVyh.png); background-blend-mode: saturation; background-color: rgb(0 0 0 / 0.5); border-bottom: 1px solid #000000;}.imie1{text-shadow: 2px 2px #000000; font-size: 40px; padding-left: 10px; font-family: raleway; font-style: italic;}.poprzednieimiona{text-shadow: 1px 1px #000000; font-size: 16px; font-style: thin; margin-left: 30%;}.backgroundcolor{background-color: rgb(155 155 155 / 0.3);border-radius: 10px 100px / 120px; padding: 2px;}.segment1{margin-left:3%; margin-right:18%;}.obrazek{ margin-left:3%; margin-top:3%; float: left;}.info1{background-color: #ffffff; float:left;}.charakter-wyglad{margin-left: 3%; margin-right: 3%;}.osobowosc{background-color: rgb(255 255 255 / 0.3); border-radius: 5px; margin-right: 5%; float: left; width: 47%; height: 300px; overflow: scroll; scrollbar-width: none;}.aparycja{background-color: rgb(255 255 255 / 0.3); border-radius: 5px; float: left; width: 47%; height: 300px; overflow: scroll; scrollbar-width: none;}.clear-both{clear: both;}.osobowosc::-webkit-scrollbar {display: none;}.aparycja::-webkit-scrollbar {display: none;}.dzieje-ekspy{background-color: rgb(255 255 255 / 0.3); border-radius: 5px; width: 93%; height: 200px; overflow: scroll; scrollbar-width: none; margin-left: 3%; margin-right: 3%;}.dzieje-ekspy::-webkit-scrollbar {display: none;}.header{font-size: 30px; text-align: center; font-family: raleway; font-style: thin; letter-spacing: 2px; border-bottom: 3px dashed #444444; padding-bottom: 15px; color: #e1e5eb;}.tekst{padding-left: 10px; padding-right: 10px;}.tekst-obok-obrazka{text-shadow: 2px 1px #333333; background-color: rgb(255 255 255 / 0.1); border-radius: 50px 100px / 120px; margin-left: 5%; margin-right: 20%; padding: 8px; font-family: raleway; font-size: 15px; color: #ffffff;}


Szablon:


.scroll{height: 500px; overflow: scroll;}.scroll::-webkit-scrollbar {display: none;}

Jeśli ktoś będzie potrzebował pomocy z edycją to piszcie mi na discorda najlepiej!

OOOO! Ważka, śliczny!
(Na pewno kiedyś użyję na jakąś postać. *^*)

Feel free! Jak zachce mi się robić więcej to może się tu jeszcze pojawię i coś posklejam ^^

um..wiem, że może nie na temat lecz ma może ktoś jakieś ciekawe wzory? ;0