BB-Code [class] - jak używać, oraz przykładowe klasy

xn · 2013-01-14 18:16:11

Tomek, administrator pun.pl dodał na moją prośbę nowy bbcode: class.

Pozwala on adminom na tworzenie nowych pseudo BB Code-ów z pomocą CSS.

Używa się go w sposób następujący:
Najpierw w css tworzymy jakąś klasę:

span.XX { /*tutaj kod css*/ }

Gdzie XX to nasza nazwa klasy.
I wklejamy to do "Modyfikacji css".

Następnie user może użyć stworzonej przez nas klasy, by stylizować swojego posta:

[class=xx]jakiś tekst[/class]

Oczywiście musicie dać na sowim forum informację o klasach na waszym forum, np. tworząc w tym celu odpowiedni temat. :3

Ograniczenia: nie można użyć klasy wewnątrz innej klasy. Ale nie ma problemu by przypisać kilka klas w jednym bbcode, np:

[class=notatka antycaps]BLABLABLA[/class]

------

Przykładowe kody:

antycaps
Opis: Zamienia wszystkie wielkie litery na małe. Przeznaczony raczej dla modów i adminów.
Jak używać:

[class=antycaps]JAKIŚ TROLL UŻYŁ CAPSA W CAŁYM POŚCIE, WIĘC MOD UŻYŁ KLASY ANTYCAPS[/class]

Kod CSS:

span.antycaps {text-transform: lowercase}

---

notatka
Opis: Tekst będzie wyświetlony w ramce na kształt żółtej kartki post-it.
Jak używać:

[class=notatka]Moja fajna notatka[/class]

Kod CSS:

span.notatka {
    background-color: #FFFF71;
    border-color: black;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 5px 5px 5px #000000;
    color: #230053;
    display: block;
    font-size: 110%;
    font-weight: bold;
    margin: 10px;
    width: 320px;
    padding: 20px;
    word-wrap:break-word;
}
span.notatka img {
    max-width: 100%;
}
span.notatka * {
    max-width: 100%;
}

-------

title
Opis: Ozdobny napis do użycia jako, np. tytuł opowiadania. [sred])
Jak używać:

[class=title]Fikuśny tytuł mojego opowiadania[/class]

Kod CSS:

@font-face {
  font-family: 'Eagle Lake';
  font-style: normal;
  font-weight: 400;
  src: local('Eagle Lake'), local('EagleLake-Regular'), url(http://themes.googleusercontent.com/static/fonts/eaglelake/v1/IPtQUliRbMJRkcp6rFFdwBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

span.title {
font-size: 300%;
font-family: 'Eagle Lake', cursive;
}

Ostatnio edytowany przez xn (2013-01-16 16:29:25)

Głuchy · 2013-01-21 12:02:59

Dzięki. Czekałem na to. Na pewno się przyda. Fajnie, że forum się rozwija i są nowe funkcje i kody.

Daroi · 2013-01-21 13:09:11

Przydatna modyfikacja. [dblpt]) Pozwoli na dowolne formatowanie postów. ^^ Dziękuję!

xn · 2013-01-21 17:06:03

Kolejne przykładowe klasy:

span.yt240p object * {
    height: 240px !important;
    width: 100%;
    max-width: 430px;
}

span.yt360p object * {
    height: 360px !important;
    width: 100%;
    max-width: 570px;
}

span.yt480p object * {
    height: 480px !important;
    width: 100%;
    max-width: 855px;
}

span.yt720p object * {
    height: 720px !important;
    width: 100%;
    max-width: 1280px;
}

span.yt1080p object * {
    height: 1080px !important;
    width: 100%;
    max-width: 1920px;
}

------

Użycie:

[class=yt720p][youtube]http://www.youtube.com/watch?v=oHg5SJYRHA0[/youtube][/class]

--------

Efekt: Wysokość filmiku z YT będzie zależna od wybranej klasy. Szerokość to zawsze 100% (na wypadek gdyby ktoś miał np. wąski ekran - wtedy się przeskaluje). W wybranym przykładzie - 720px. [sred])

Ostatnio edytowany przez xn (2013-01-21 17:11:55)

Dares · 2013-01-21 17:50:37

Nie wiedzieć czemu u mnie class nie działa, mimo że wszystko robię tak jak trzeba.

xn · 2013-01-21 18:39:21

Daj link do forum, a może coś poradzę. [sred])
Pamiętaj, że [class=x] piszemy bez "". [sred])

Dares · 2013-01-21 19:01:04

Wiem o tym.
Linka do forum wolałbym nie podawać, ponieważ nie chcę za bardzo ujawniać go przed otwarciem.

ukaszf9 · 2013-01-21 19:31:46

Błąd sprawdzony i email do administratora z prośbą o jego usunięcie wysłany.

xn · 2013-03-15 18:15:06

Kolejne przykłady działania:

rogi
Użycie:
[img]link[/img]

Kod CSS:

span.rogi img {border-radius: 10px;}

Opis:
Zaokrągla rogi obrazka (np. w sygnaturce).

half
Użycie:
[img]link1[/img][img]link2[/img]

Kod CSS:

span.half img {
   max-width: 49%;
   height: auto;
}

Opis:
Pozwala na umieszczenie dwóch dużych obrazków obok siebie.

kolumny, sposób 1
Użycie:
tekst 1
tekst 2

Kod CSS:

span.lewa {
    display: table;
    width: 48%;
    float: left;
}
span.lewa + br {
    display: none;
}
span.prawa {
    display: table;
    width: 48%;
    float: right;
}

Opis:wyświetla obok siebie dwie kolumny tekstu/obrazków (jeśli tego używamy, to nie ma sensu dalszego używania half).

Kolumny, sposób 2 - wkrótce.

BO · 2013-03-23 16:52:48

Szkoda, że nie jestem informatykiem, i nic z tego nie ogarniam [dblpt](

Dares · 2013-03-23 17:55:27

Tu nie trzeba być informatykiem, aby cokolwiek zrozumieć.

pro14ab · 2013-06-26 21:33:37

Ostrzeżenie
Opis: Krótka informacja o ostrzeżeniu.
Użycie:

[class=warn]Tekst[/class]

Kod CSS:

span.warn{
background: url(http://i.imgur.com/wCQCEaa.png) no-repeat;
background-position:left;
background-color: #ffcc00;
color: black;
font-size: 12px;
padding-left: 23px;
padding-right: 5px;
border-radius: 6px;
}

span.warn * {
max-width: 100%;}

------------------

Informacja
Opis: Krótka informacja.
Użycie:

[class=info]Tekst[/class]

Kod CSS:

span.info{
background: url(http://i.imgur.com/M7g75WV.png) no-repeat;
background-position:left;
background-color: #0066ff;
color: black;
font-size: 12px;
padding-left: 23px;
padding-right: 5px;
border-radius: 6px;
}

span.info * {
max-width: 100%;}

------------------

Zatwierdzenie
Opis: Krótka informacja o zatwierdzeniu.
Użycie:

[class=zatwierdzenie]Tekst[/class]

Kod CSS:

span.zatwierdzenie{
background: url(http://i.imgur.com/HrOsLZb.png) no-repeat;
background-position:left;
background-color:#33ff33;
color: black;
font-size: 12px;
padding-left: 23px;
padding-right: 5px;
border-radius: 6px;
}

span.zatwierdzenie * {
max-width: 100%;}

------------------

Odrzucenie
Opis: Krótka informacja o odrzuceniu.
Użycie:

[class=odrzucenie]Tekst[/class]

Kod CSS:

span.odrzucenie{
background: url(http://i.imgur.com/ekht9J2.png) no-repeat;
background-position:left;
background-color:#ff3333;
color: black;
font-size: 12px;
padding-left: 23px;
padding-right: 5px;
border-radius: 6px;
}

span.odrzucenie * {
max-width: 100%;}

------------------

Ukrywanie
Opis: Pokazywanie tekstu po najechaniu.
Użycie:

[class=ukrywanie]Tekst[/class]

Kod CSS:

span.ukrywanie{font-size: 0;}
span.ukrywanie:before {content: "Najedź by przeczytać ";font-size: 11px; }
span.ukrywanie:hover {font-size: 13px;}
span.ukrywanie:hover:before {font-size: 0;}

Ostatnio edytowany przez pro14ab (2013-12-21 18:04:35)

Oficjalne forum pomocy serwisu PUN.pl

#1 2013-01-14 18:16:11

BB-Code [class] - jak używać, oraz przykładowe klasy

#2 2013-01-21 12:02:59

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#3 2013-01-21 13:09:11

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#4 2013-01-21 17:06:03

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#5 2013-01-21 17:50:37

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#6 2013-01-21 18:39:21

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#7 2013-01-21 19:01:04

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#8 2013-01-21 19:31:46

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#9 2013-03-15 18:15:06

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#10 2013-03-23 16:52:48

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#11 2013-03-23 17:55:27

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

#12 2013-06-26 21:33:37

Odp: BB-Code [class] - jak używać, oraz przykładowe klasy

Stopka