Jak przerobić kod, by był bezklikowy?

ODPOWIEDZ ]

#33271 03 paź 2017, 13:40

Dzisiaj nauczymy się na podstawie podpisu kimmie, jak przerobić dany kod by był tak zwanym "bezklikowcem". WXV jest mocno ograniczone, ale można niektóre rzeczy obejść. <br>
WXV nie lubi definiowania stylów przy danym obiekcie, dlatego należy to wszystko trzymać w klasach. Jak pochować te style w klasach i jak sprawić, by to działało?<br>
<br>
Oto kod kimmie:

Kod: Zaznacz cały

[center]<div style="opacity:0.9;width:260px;"><table><tbody><tr><td><img src="https://i.imgur.com/IICtjtF.gif" style=" width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D"> </td><td><img src="https://i.imgur.com/vu8eqPm.gif" style=" width: 70px; height:70px; border-radius : 100px; border: 2px solid #DBC37D"> </td><td><img src="https://i.imgur.com/N8AOlZ0.gif" style=" width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D"> </td></tr></tbody></table><img src="https://i.imgur.com/Qp3ekqy.png"><br><div style="font-family: courrier new; font-size: 10px;color: #DBC37D; text-align: center; line-height: 8px; opacity:0.9; width: 260px;margin-left: 0px;">[i]Idzie jesień, będzie psychicznie trudniej.[/i] — Marcin Świetlicki</div></div>[/center]
<br>
By móc wprowadzić klasy, należy użyć kodu:

Kod: Zaznacz cały

<style>
A na samo zakończenie

Kod: Zaznacz cały

</style>
<br>
Klasa zaś powinna wyglądać tak:

Kod: Zaznacz cały

<style>.nazwaklasy{definicja stylu;}</style>
Nie zapominajcie o kropce przed nazwą klasy.<br>
<br>
Więc zaczynamy przerabiać kod kimmie. Na początku ma napisane:

Kod: Zaznacz cały

<div style="opacity:0.9;width:260px;">
Więc w klasie będzie wyglądać to tak:

Kod: Zaznacz cały

<style>.kimmiediv1{opacity:0.9;width:260px;}</style>
Jak widzicie - dokładnie skopiowałam to, co było pomiędzy cudzysłowowymi. <br>
<br>
Dokładnie tak samo postępujemy z następnymi stylami (tu pokazuję wybrane):

Kod: Zaznacz cały

<img src="https://i.imgur.com/IICtjtF.gif" style=" width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D">
tworzymy z tego klasę:

Kod: Zaznacz cały

.kimmiegif1{width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D;}
<br>
<br>

Kod: Zaznacz cały

<div style="font-family: courrier new; font-size: 10px;color: #DBC37D; text-align: center; line-height: 8px; opacity:0.9; width: 260px;margin-left: 0px;">
tworzymy z tego:

Kod: Zaznacz cały

.kimmienapis{font-family: courrier new; font-size: 10px;color: #DBC37D; text-align: center; line-height: 8px; opacity:0.9; width: 260px;margin-left: 0px;}
<br>
<br>
Po tych wszystkich operacjach wyjdzie nam coś takiego:

Kod: Zaznacz cały

<style>.kimmiediv1{opacity:0.9;width:260px;}.kimmiegif1{width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmiegif2{width: 70px; height:70px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmiegif3{width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmienapis{font-family: courrier new; font-size: 10px;color: #DBC37D; text-align: center; line-height: 8px; opacity:0.9; width: 260px;margin-left: 0px;}</style>
<br>
<br>
No dobra i co teraz? Teraz trzeba pousuwać stare definicje stylu i zastąpić je klasami.
<br>
I tak po staremu:

Kod: Zaznacz cały

<div style="opacity:0.9;width:260px;">
teraz będzie wyglądać:

Kod: Zaznacz cały

<div class="kimmiediv1">
Bo tak nazwaliśmy klasę wyżej.<br>
<br>
W przypadku obrazków, które wyglądały tak:

Kod: Zaznacz cały

<img src="https://i.imgur.com/IICtjtF.gif" style=" width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D">
należy zastąpić kodem:

Kod: Zaznacz cały

<img src="https://i.imgur.com/IICtjtF.gif" class="kimmiegif1">
<br>
<br>
Tekst już nie będzie wyglądać tak:

Kod: Zaznacz cały

<div style="font-family: courrier new; font-size: 10px;color: #DBC37D; text-align: center; line-height: 8px; opacity:0.9; width: 260px;margin-left: 0px;">[i]Idzie jesień, będzie psychicznie trudniej.[/i] — Marcin Świetlicki</div>
tylko tak:

Kod: Zaznacz cały

<div class="kimmienapis">[i]Idzie jesień, będzie psychicznie trudniej.[/i] — Marcin Świetlicki</div>
<br>
<br>
Cały przerobiony kod wygląda tak:

Kod: Zaznacz cały

<style>.kimmiediv1{opacity:0.9;width:260px;}.kimmiegif1{width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmiegif2{width: 70px; height:70px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmiegif3{width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmienapis{font-family: courrier new; font-size: 10px;color: #DBC37D; text-align: center; line-height: 8px; opacity:0.9; width: 260px;margin-left: 0px;}</style>
[center]<div class="kimmiediv1"><table><tbody><tr><td><img src="https://i.imgur.com/IICtjtF.gif" class="kimmiegif1"> </td><td><img src="https://i.imgur.com/vu8eqPm.gif" class="kimmiegif2"> </td><td><img src="https://i.imgur.com/N8AOlZ0.gif" class="kimmiegif3"> </td></tr></tbody></table><img src="https://i.imgur.com/Qp3ekqy.png"><br><div class="kimmienapis">[i]Idzie jesień, będzie psychicznie trudniej.[/i] — Marcin Świetlicki</div></div>[/center]
<br>
<br>
Nasz efekt końcowy wygląda dokładnie tak samo jak wcześniej:<br><br>

<style>.kimmiediv1{opacity:0.9;width:260px;}.kimmiegif1{width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmiegif2{width: 70px; height:70px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmiegif3{width: 50px; height: 50px; border-radius : 100px; border: 2px solid #DBC37D;}.kimmienapis{font-family: courrier new; font-size: 10px;color: #DBC37D; text-align: center; line-height: 8px; opacity:0.9; width: 260px;margin-left: 0px;}</style>
<div class="kimmiediv1"><table><tbody><tr><td><img src="https://i.imgur.com/IICtjtF.gif" class="kimmiegif1"> </td><td><img src="https://i.imgur.com/vu8eqPm.gif" class="kimmiegif2"> </td><td><img src="https://i.imgur.com/N8AOlZ0.gif" class="kimmiegif3"> </td></tr></tbody></table><img src="https://i.imgur.com/Qp3ekqy.png"><br><div class="kimmienapis">Idzie jesień, będzie psychicznie trudniej. — Marcin Świetlicki</div></div>
<br>

Powodzenia!
[align=right]What is a jaeger? A jaeger is the pinnacle of human invention. When the monsters came, we did not wait for heroes to fall from the sky and save us. We saved ourselves. Innovation is our superpower. What is a jaeger? It&#8217;s you, times a thousand, tall as a mountain, with a beating heart that burns as bright as the sun! Enabling us all to become the most heroic version of ourselves.[/align]

Awatar użytkownika
O mnie
Bawię dziecko, a w wolnych chwilach gram.
Moje fora
angeltown
 youwish#7652

#33272 03 paź 2017, 13:43

:love:

Awatar użytkownika
Moje fora
memento-mori

#33274 03 paź 2017, 14:06

Dam radę :what:
Obrazek

Awatar użytkownika
Moje fora
czekam na jakąś perełkę
nigdzie się nie wybieram
 6588096

#34202 28 paź 2017, 9:30

próbowałam zrobić ramkę na podstawie tego co tutaj napisałaś, ale cokolwiek bym nie robiła i tak mi nie wychodzi i <style> muszę wklejać do PA, a <div class> do posta

ODPOWIEDZ ]