Instrukcja zmiany kodów HTML na BBcode

Dział stworzony z myślą o użytkownikach Edenu oraz o możliwości skontaktowania się z administracją. W tym dziale możesz ubiegać się o aktualizację profilu, wziąć udział w bieżących ankietach i dyskusjach dotyczących bezpośrednio spraw forum.
Awatar użytkownika
O mnie
Could you find a way to let me down slowly?
A little sympathy, I hope you can show me.
Moje fora
Pracuję nad Domem Nocy.

 bandito#0212
 62809691

#42852 13 sie 2018, 19:16

Jak z pewnością zdążyliście się zorientować, większość stworzonych przez Was kodów na forum przestało działać. Niektórzy doskonale wiedzą, dlaczego, inni zapewne się domyślają. Jeśli jednak dla Ciebie jest to tajemnicą - pędzimy z wyjaśnieniami!
Jednym z podstawowych założeń nowego Edenu było zapewnienie Wam bezpieczeństwa. Dlatego właśnie, ceniąc sobie komfort użytkowników nade wszystko oraz chcąc umożliwić Wam korzystanie z kodów HTML na Edenie, od dnia dzisiejszego możecie robić to za pomocą... BBcodów!

Ten poradnik krok po kroku pokaże Wam, jak korzystać z udostępnionych przez nas możliwości i jak uratować kody, które obecnie nie działają.

Na potrzeby przeprowadzenia instruktażu przygotowaliśmy przykładowy kod.

Kod: Zaznacz cały

<style>
.tlo{
	width:400px;
	height:500px;
	padding:10px;
	background-color:#ccc;
	}
	
.tytul{
	font-family:raleway;
	font-size:30px;
	text-transform:uppercase;
	letter-spacing:2px;
	line-height:1.4;
	}
	
.tresc{
	background-color:rgba(255,255,255,0.5);
	width:80%;
	margin:10px 0px;
	padding:15px;
	color:#000;
	font-family:arial;
	text-align:justify;
	height:300px;
	overflow:auto;
	font-size:13px;
	margin: 0 auto;
	margin-bottom: 10px;
	}
	
.tlo img{
	width:45%
	}
</style>


<center>
<div class="tlo">
<div class="tytul">
	Jestem tytułem
</div>
<div class="tresc">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius urna a diam hendrerit convallis. Integer sit amet pellentesque enim. Donec lacinia lectus eu sodales finibus. Phasellus placerat lorem et magna fringilla vehicula. Morbi volutpat turpis ac tincidunt iaculis. Vestibulum non risus at nibh sodales tincidunt ut vitae lacus. Etiam et neque sit amet velit pharetra rutrum.

Integer vehicula ex et tortor ullamcorper sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse bibendum placerat erat quis varius. Aliquam convallis nunc ut risus fringilla, in suscipit turpis aliquet. In mollis mauris eu neque pulvinar posuere. Suspendisse vitae nisl porttitor, congue neque vel, viverra velit. Suspendisse id placerat dolor, vitae pulvinar erat. Sed magna felis, interdum condimentum lobortis eu, finibus non ex. Phasellus blandit vel orci gravida eleifend. Cras non iaculis neque. Aenean interdum risus ac libero euismod, sed commodo justo tristique.

Nulla elementum massa at leo sodales varius. Fusce a tortor enim. Mauris lectus leo, lacinia auctor luctus sit amet, vehicula vitae leo. Sed varius nulla id ullamcorper posuere. Sed luctus erat eros, sed consectetur risus tempus eget. Pellentesque pellentesque urna turpis, a suscipit lacus aliquam sit amet. Nunc at dolor egestas, sagittis dui vel, facilisis mi. Suspendisse malesuada a lacus sed blandit. Ut vehicula nunc non facilisis consequat. Praesent interdum tincidunt vulputate. In aliquet interdum ex, sit amet lobortis metus sagittis id. Praesent efficitur ex eu purus varius, vitae lobortis metus congue. Donec eu nisl at turpis interdum auctor ac mollis massa. Morbi luctus euismod scelerisque. Sed vel nunc diam. In at auctor nisl.

Donec vehicula libero id lorem gravida, at sodales nisi finibus. Etiam vitae mollis quam, ut pellentesque orci. Fusce pharetra lacus sed sapien accumsan, vitae mattis arcu rhoncus. Aliquam erat volutpat. Etiam accumsan fermentum mauris sit amet gravida. Nulla facilisi. Ut id porttitor metus, at dapibus diam. Ut sed mollis orci. Donec in rutrum sapien. Pellentesque metus turpis, facilisis ac sapien ut, ullamcorper scelerisque dolor. Aenean in nisl tincidunt, commodo urna ac, convallis tellus. Morbi ut commodo felis, ac tristique est.

Vestibulum mattis nisl in lectus varius ullamcorper id at lacus. Nunc interdum ligula ligula. Sed vestibulum eu erat eu maximus. Morbi tempor, erat eget dignissim elementum, magna dolor auctor nisl, vel volutpat mauris eros aliquet nisl. Cras finibus feugiat augue, at laoreet nisl ultricies non. Phasellus eleifend ex vitae ultricies pharetra. Duis eu arcu non velit interdum scelerisque id nec odio.
</div>
<img src="https://media.giphy.com/media/JI2HICt36nqta/giphy.gif">
<img src="https://media.giphy.com/media/JI2HICt36nqta/giphy.gif">
</div>
</center>

Teraz - wspólnie - zbudujemy ten sam kod w BBcodzie dostępnym na Edenie!
Zaczniemy od zewnętrznego elementu blokowego.

Kod: Zaznacz cały

<center>
<div class="tlo">
TREŚĆ
</div>
</center>

<style>
.tlo{
	width:400px;
	height:500px;
	padding:10px;
	background-color:#ccc;
	}
</style>
Jak widzimy, div ma przypisaną klasę "tlo", której styl również należy zamienić na BBcode.

Obecnie nasz kod prezentował się będzie w ten sposób:

Kod: Zaznacz cały

[center]
[divclass="tlo"]TREŚĆ[/divclass]
[/center]

[style=".tlo"]width:400px;height:500px;padding:10px;background-color:#ccc;[/style]
Przechodzimy do kolejnego elementu, którym jest div z klasą tytul i umieszczamy go w poprzednim, zgodnie z budową kodu HTML:

Kod: Zaznacz cały

[center]
[divclass="tlo"]
[divclass="tytul"]JESTEM TYTUŁEM[/divclass]
[/divclass]
[/center]

[style=".tlo"]width:400px;height:500px;padding:10px;background-color:#ccc;[/style]
[style=.tytul]font-family:raleway;font-size:30px;text-transform:uppercase;letter-spacing:2px;line-height:1.4;[/style]
Warto zauważyć, że kod zawiera odwołanie do czcionki Raleway, dostępnej w google fonts. By wyświetlała się ona poprawnie, musimy użyć kodu podanego poniżej:

Kod: Zaznacz cały

[googlefont]Raleway[/googlefont]
Obecnie nasz kod prezentuje się tak:

Kod: Zaznacz cały

[center]
[divclass="tlo"]
[divclass="tytul"]JESTEM TYTUŁEM[/divclass]
[/divclass]
[/center]

[style=".tlo"]width:400px;height:500px;padding:10px;background-color:#ccc;[/style]
[style=.tytul]font-family:raleway;font-size:30px;text-transform:uppercase;letter-spacing:2px;line-height:1.4;[/style]

[googlefont]Raleway[/googlefont]
Teraz dodajemy do niego element blokowy z klasą tresc:

Kod: Zaznacz cały

[center]
[divclass="tlo"]
[divclass="tytul"]JESTEM TYTUŁEM[/divclass]
[divclass="tresc"]
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius urna a diam hendrerit convallis. Integer sit amet pellentesque enim. Donec lacinia lectus eu sodales finibus. Phasellus placerat lorem et magna fringilla vehicula. Morbi volutpat turpis ac tincidunt iaculis. Vestibulum non risus at nibh sodales tincidunt ut vitae lacus. Etiam et neque sit amet velit pharetra rutrum.

Integer vehicula ex et tortor ullamcorper sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse bibendum placerat erat quis varius. Aliquam convallis nunc ut risus fringilla, in suscipit turpis aliquet. In mollis mauris eu neque pulvinar posuere. Suspendisse vitae nisl porttitor, congue neque vel, viverra velit. Suspendisse id placerat dolor, vitae pulvinar erat. Sed magna felis, interdum condimentum lobortis eu, finibus non ex. Phasellus blandit vel orci gravida eleifend. Cras non iaculis neque. Aenean interdum risus ac libero euismod, sed commodo justo tristique.

Nulla elementum massa at leo sodales varius. Fusce a tortor enim. Mauris lectus leo, lacinia auctor luctus sit amet, vehicula vitae leo. Sed varius nulla id ullamcorper posuere. Sed luctus erat eros, sed consectetur risus tempus eget. Pellentesque pellentesque urna turpis, a suscipit lacus aliquam sit amet. Nunc at dolor egestas, sagittis dui vel, facilisis mi. Suspendisse malesuada a lacus sed blandit. Ut vehicula nunc non facilisis consequat. Praesent interdum tincidunt vulputate. In aliquet interdum ex, sit amet lobortis metus sagittis id. Praesent efficitur ex eu purus varius, vitae lobortis metus congue. Donec eu nisl at turpis interdum auctor ac mollis massa. Morbi luctus euismod scelerisque. Sed vel nunc diam. In at auctor nisl.

Donec vehicula libero id lorem gravida, at sodales nisi finibus. Etiam vitae mollis quam, ut pellentesque orci. Fusce pharetra lacus sed sapien accumsan, vitae mattis arcu rhoncus. Aliquam erat volutpat. Etiam accumsan fermentum mauris sit amet gravida. Nulla facilisi. Ut id porttitor metus, at dapibus diam. Ut sed mollis orci. Donec in rutrum sapien. Pellentesque metus turpis, facilisis ac sapien ut, ullamcorper scelerisque dolor. Aenean in nisl tincidunt, commodo urna ac, convallis tellus. Morbi ut commodo felis, ac tristique est.

Vestibulum mattis nisl in lectus varius ullamcorper id at lacus. Nunc interdum ligula ligula. Sed vestibulum eu erat eu maximus. Morbi tempor, erat eget dignissim elementum, magna dolor auctor nisl, vel volutpat mauris eros aliquet nisl. Cras finibus feugiat augue, at laoreet nisl ultricies non. Phasellus eleifend ex vitae ultricies pharetra. Duis eu arcu non velit interdum scelerisque id nec odio.
[/divclass]
[/divclass]
[/center]

[style=".tlo"]width:400px;height:500px;padding:10px;background-color:#ccc;[/style]
[style=.tytul]font-family:raleway;font-size:30px;text-transform:uppercase;letter-spacing:2px;line-height:1.4;[/style]
[style=".tresc"]background-color:rgba(255,255,255,0.5);width:80%;margin:10px 0px;padding:15px;color:#000;font-family:arial;text-align:justify;height:300px;overflow:auto;font-size:13px;margin: 0 auto;margin-bottom: 10px;[/style]

[googlefont]Raleway[/googlefont]

Ostatnią częścią jest dorzucenie dwóch obrazków na samym końcu. Należy zauważyć, że BBcode nie umożliwia nadania znacznikowi img klasy. Co za tym idzie, należy użyć klasy elementu, w którym znajduje się obrazek. Gotowy kod prezentuje się w następujący sposób:

Kod: Zaznacz cały

[center]
[divclass="tlo"]
[divclass="tytul"]JESTEM TYTUŁEM[/divclass]
[divclass="tresc"]
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius urna a diam hendrerit convallis. Integer sit amet pellentesque enim. Donec lacinia lectus eu sodales finibus. Phasellus placerat lorem et magna fringilla vehicula. Morbi volutpat turpis ac tincidunt iaculis. Vestibulum non risus at nibh sodales tincidunt ut vitae lacus. Etiam et neque sit amet velit pharetra rutrum.

Integer vehicula ex et tortor ullamcorper sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse bibendum placerat erat quis varius. Aliquam convallis nunc ut risus fringilla, in suscipit turpis aliquet. In mollis mauris eu neque pulvinar posuere. Suspendisse vitae nisl porttitor, congue neque vel, viverra velit. Suspendisse id placerat dolor, vitae pulvinar erat. Sed magna felis, interdum condimentum lobortis eu, finibus non ex. Phasellus blandit vel orci gravida eleifend. Cras non iaculis neque. Aenean interdum risus ac libero euismod, sed commodo justo tristique.

Nulla elementum massa at leo sodales varius. Fusce a tortor enim. Mauris lectus leo, lacinia auctor luctus sit amet, vehicula vitae leo. Sed varius nulla id ullamcorper posuere. Sed luctus erat eros, sed consectetur risus tempus eget. Pellentesque pellentesque urna turpis, a suscipit lacus aliquam sit amet. Nunc at dolor egestas, sagittis dui vel, facilisis mi. Suspendisse malesuada a lacus sed blandit. Ut vehicula nunc non facilisis consequat. Praesent interdum tincidunt vulputate. In aliquet interdum ex, sit amet lobortis metus sagittis id. Praesent efficitur ex eu purus varius, vitae lobortis metus congue. Donec eu nisl at turpis interdum auctor ac mollis massa. Morbi luctus euismod scelerisque. Sed vel nunc diam. In at auctor nisl.

Donec vehicula libero id lorem gravida, at sodales nisi finibus. Etiam vitae mollis quam, ut pellentesque orci. Fusce pharetra lacus sed sapien accumsan, vitae mattis arcu rhoncus. Aliquam erat volutpat. Etiam accumsan fermentum mauris sit amet gravida. Nulla facilisi. Ut id porttitor metus, at dapibus diam. Ut sed mollis orci. Donec in rutrum sapien. Pellentesque metus turpis, facilisis ac sapien ut, ullamcorper scelerisque dolor. Aenean in nisl tincidunt, commodo urna ac, convallis tellus. Morbi ut commodo felis, ac tristique est.

Vestibulum mattis nisl in lectus varius ullamcorper id at lacus. Nunc interdum ligula ligula. Sed vestibulum eu erat eu maximus. Morbi tempor, erat eget dignissim elementum, magna dolor auctor nisl, vel volutpat mauris eros aliquet nisl. Cras finibus feugiat augue, at laoreet nisl ultricies non. Phasellus eleifend ex vitae ultricies pharetra. Duis eu arcu non velit interdum scelerisque id nec odio.
[/divclass]
[img]https://media.giphy.com/media/JI2HICt36nqta/giphy.gif[/img] [img]https://media.giphy.com/media/JI2HICt36nqta/giphy.gif[/img]
[/divclass]
[/center]

[style=".tlo"]width:400px;height:500px;padding:10px;background-color:#ccc;[/style]
[style=".tlo img"]width:45%[/style]
[style=.tytul]font-family:raleway;font-size:30px;text-transform:uppercase;letter-spacing:2px;line-height:1.4;[/style]
[style=".tresc"]background-color:rgba(255,255,255,0.5);width:80%;margin:10px 0px;padding:15px;color:#000;font-family:arial;text-align:justify;height:300px;overflow:auto;font-size:13px;margin: 0 auto;margin-bottom: 10px;[/style]

[googlefont]Raleway[/googlefont]
JESTEM TYTUŁEM
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum varius urna a diam hendrerit convallis. Integer sit amet pellentesque enim. Donec lacinia lectus eu sodales finibus. Phasellus placerat lorem et magna fringilla vehicula. Morbi volutpat turpis ac tincidunt iaculis. Vestibulum non risus at nibh sodales tincidunt ut vitae lacus. Etiam et neque sit amet velit pharetra rutrum.

Integer vehicula ex et tortor ullamcorper sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse bibendum placerat erat quis varius. Aliquam convallis nunc ut risus fringilla, in suscipit turpis aliquet. In mollis mauris eu neque pulvinar posuere. Suspendisse vitae nisl porttitor, congue neque vel, viverra velit. Suspendisse id placerat dolor, vitae pulvinar erat. Sed magna felis, interdum condimentum lobortis eu, finibus non ex. Phasellus blandit vel orci gravida eleifend. Cras non iaculis neque. Aenean interdum risus ac libero euismod, sed commodo justo tristique.

Nulla elementum massa at leo sodales varius. Fusce a tortor enim. Mauris lectus leo, lacinia auctor luctus sit amet, vehicula vitae leo. Sed varius nulla id ullamcorper posuere. Sed luctus erat eros, sed consectetur risus tempus eget. Pellentesque pellentesque urna turpis, a suscipit lacus aliquam sit amet. Nunc at dolor egestas, sagittis dui vel, facilisis mi. Suspendisse malesuada a lacus sed blandit. Ut vehicula nunc non facilisis consequat. Praesent interdum tincidunt vulputate. In aliquet interdum ex, sit amet lobortis metus sagittis id. Praesent efficitur ex eu purus varius, vitae lobortis metus congue. Donec eu nisl at turpis interdum auctor ac mollis massa. Morbi luctus euismod scelerisque. Sed vel nunc diam. In at auctor nisl.

Donec vehicula libero id lorem gravida, at sodales nisi finibus. Etiam vitae mollis quam, ut pellentesque orci. Fusce pharetra lacus sed sapien accumsan, vitae mattis arcu rhoncus. Aliquam erat volutpat. Etiam accumsan fermentum mauris sit amet gravida. Nulla facilisi. Ut id porttitor metus, at dapibus diam. Ut sed mollis orci. Donec in rutrum sapien. Pellentesque metus turpis, facilisis ac sapien ut, ullamcorper scelerisque dolor. Aenean in nisl tincidunt, commodo urna ac, convallis tellus. Morbi ut commodo felis, ac tristique est.

Vestibulum mattis nisl in lectus varius ullamcorper id at lacus. Nunc interdum ligula ligula. Sed vestibulum eu erat eu maximus. Morbi tempor, erat eget dignissim elementum, magna dolor auctor nisl, vel volutpat mauris eros aliquet nisl. Cras finibus feugiat augue, at laoreet nisl ultricies non. Phasellus eleifend ex vitae ultricies pharetra. Duis eu arcu non velit interdum scelerisque id nec odio.
Obrazek Obrazek






 Zablokowany