ZSGifMan 2018-07-04

Ponieważ z powodu licznych zgłoszeń o niemożliwości poprawnego wyświetlania mojego bloga (notki)
z braku czasu i chęci na kopanie w nieskończoność: co, gdzie, jak i dlaczego zawiniło
– zakładam temat przeniesiony stamtąd właśnie TU!

Textile na FDB.pl.

Wykorzystanie Textile do formatowania wpisów i wypowiedzi.

.
☞ Po każdym paragrafie, nagłówku, obiekcie, akapicie itp. konieczna jest pusta linia odstępu w kodzie,
gdyż inaczej textile nie wczyta kolejnego polecenia!
Tu ze względu na zwartość i przejrzystość kodu te linie zostały celowo pominięte! jednak pisząc należy o tym pamiętać!

☞ Nie ma możliwości łączenia klas formatowania jest jednak możliwość lokalnego rozszerzenia stylu
tzn. tekst sformatowany kolorem wyświetlania może zostać powiększony i/lub wyśrodkowany!

☞ Dopuszczalne jest tylko jedno rozszerzenie lokalne w danym miejscu,
aby rozpocząć kolejne wcześniejsze musi zostać zakończone!

☞ Nie ma możliwości wyświetlania pustych linii, jako świadoma i celowa pusta linia sprawdza się jednak taka zaczęta zwykłą kropką.

_____ Podstawy formatowania: _____

_____ pogrubienia _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ *abcdefghijklmnopqrstuvwxyz* 0123456789

_____ kursywa _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ _abcdefghijklmnopqrstuvwxyz_ 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ __abcdefghijklmnopqrstuvwxyz 0123456789__

_____ przekreślenie / podkreślenie _____

~~ABCDEFGHIJKLMNOPQRSTUVWXYZ~~ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

-ABCDEFGHIJKLMNOPQRSTUVWXYZ- +abcdefghijklmnopqrstuvwxyz+ 0123456789

_____ paragrafy _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

p. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
p. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

_____ łamanie linii, kolejne wiersze _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789.

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789.

puste łamanie linii

Ponieważ na blogu nie działają tagi <br> ani <br /> 
puste łamanie linii można uzyskać poprzez paragraf z jakimś małym i mało widocznym znakiem
 np. ' na forum z powodzeniem można do tego używać

# 
>

ale tylko jeden raz, dla wielokrotności potrzebne jest jak poniżej!

notextile Ponieważ nie działają tagi
ani

puste łamanie linii można uzyskać poprzez paragraf z jakimś małym i mało widocznym znakiem np. ’
na forum z powodzeniem można do tego używać

>
ale tylko jeden raz, dla wielokrotności potrzebne jest jak poniżej!

Hehe! Tag "notextile" też nie działa ;)

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
<br>
<br>
<br>
<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

albo…

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
<br />
<br />
<br />
<br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

_____ cytaty _____

przy użyciu "ciapków"

"ABCDEFGHIJKLMNOPQRSTUVWXYZ 'abcdefghijklmnopqrstuvwxyz' 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ 'abcdefghijklmnopqrstuvwxyz' 0123456789"

przy użyciu tagu

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

wyjaśniające / informujące

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

przy użyciu "ciapków"

"ABCDEFGHIJKLMNOPQRSTUVWXYZ 'abcdefghijklmnopqrstuvwxyz' 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ 'abcdefghijklmnopqrstuvwxyz' 0123456789"

przy użyciu tagu

bq. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

wyjaśniające / informujące

ABCDEFGHIJKLMNOPQRSTUVWXYZ ??abcdefghijklmnopqrstuvwxyz?? 0123456789
ABCDEFGHIJKLMN ??OPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz?? 0123456789

_____ myślniki _____

ABCDEFGH—IJKLMNOPQR—STUVWXYZ — abcdefghijklmnopqrstuvwxyz — 0123456789

jak zrobić?

ABCDEFGH--IJKLMNOPQR--STUVWXYZ -- abcdefghijklmnopqrstuvwxyz -- 0123456789

_____ akronimy _____

Nie działają na blogu, działają tylko na forum !

ABCD EFGHIJKLMNOPQRSTUVWXYZ ABCD 0123456789

jak zrobić?

ABCD(Aaaaa Bbbbb Ccccc Ddddd) EFGHIJKLMNOPQRSTUVWXYZ ABCD(Aaaaa Bbbbb Ccccc Ddddd) 0123456789

_____ nagłówki _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

h1. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
h2. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
h3. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
h4. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
h5. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
h6. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

_____ listy _____

Nie działają na forum, działają tylko na blogu !

punktowane

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
- ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
  - ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
  - ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

* ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
* ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
** ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
*** ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
*** ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
* ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

numerowane

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
1. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
  1. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
  2. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

# ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
# ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
## ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
### ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
### ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
# ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

mieszane

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
- ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
- ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

# ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
# ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
** ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
** ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
# ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

_____ definicje _____

ABCD

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCD

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

- ABCD := ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
- ABCD := ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
- ABCDEFGHIJKLMNOPQRSTUVWXYZ := 
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 =:

_____ przypisy _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¹
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz² 0123456789

¹ ABCDEFGHIJKLMN

² ABCDEFGHIJKLMN

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789[1]
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz[2] 0123456789
fn1. "ABCDEFGHIJKLMN":http://redcloth.org/
fn2. "ABCDEFGHIJKLMN":http://redcloth.org/

_____ indeks: górny, dolny _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ ^{abcdefghijklmnopqrstuvwxyz} 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ _{abcdefghijklmnopqrstuvwxyz} 0123456789

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ ^abcdefghijklmnopqrstuvwxyz^ 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ ~abcdefghijklmnopqrstuvwxyz~ 0123456789

_____ podział / przełamanie strony _____

Nie działa (poprawnie) na blogu, działa tylko na forum !

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

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

_____ Zaawansowane funkcje _____

_____ Umieszczanie treści graficznych i odsyłaczy _____

odnośniki / hiperłącza

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ "abcdefghijklmnopqrstuvwxyz":http://redcloth.org/ 0123456789
"ABCDEFGHIJKLMNOPQRSTUVWXYZ (abcdefghijklmnopqrstuvwxyz 0123456789)":http://redcloth.org/ abcdefghijklmnopqrstuvwxyz 0123456789

_____ obrazy / grafika _____

Jeżeli obrazki nie są hostowane przez silnik pozwalający zmieniać rozmiar w komendzie linku,
to nie ma możliwości zmiany rozmiaru obrazka !

obrazek

obrazek z tekstem alternatywnym

ZSGifman

obrazek z odnośnikiem do strony

jak zrobić?

obrazek

!https://i1.fdbimg.pl/c3hct0y1/100x100_p7hrj4.jpg!

obrazek z tekstem alternatywnym

!https://i1.fdbimg.pl/c3hct0y1/100x100_p7hrj4.jpg(ZSGifman)!

obrazek z odnośnikiem do strony

!https://forum.fdb.pl/assets/logo-6f150d3be94d6888726823d2ada63df0938be127c32d1d119b849eaf25e4b554.png!:https://fdb.pl/

obrazek ze zmiennym rozmiarem

jak zrobić?

!https://i1.fdbimg.pl/c3hct0y1/200x200_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/180x180_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/160x160_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/140x140_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/120x120_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/100x100_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/80x80_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/60x60_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/40x40_p7hrj4.jpg! !https://i1.fdbimg.pl/c3hct0y1/20x20_p7hrj4.jpg!

obrazek ze zmiennym rozmiarem za pomocą tagu HTML – definiowanie rozmiaru piksele
( rozmiar oryginalny – 1920×1504, tutaj zastosowano pomniejszenie do 25%, 20%, 15%, 10%, 5% )

jak zrobić?

<img src="https://i1.fdbimg.pl/bqf14ru1_o14c1b.jpg" width="376" height="480"><img src="https://i1.fdbimg.pl/bqf14ru1_o14c1b.jpg" width="300" height="384"><img src="https://i1.fdbimg.pl/bqf14ru1_o14c1b.jpg" width="225" height="288"><img src="https://i1.fdbimg.pl/bqf14ru1_o14c1b.jpg" width="150" height="192"><img src="https://i1.fdbimg.pl/bqf14ru1_o14c1b.jpg" width="75" height="96">

obrazek ze zmiennym rozmiarem za pomocą tagu HTML – definiowanie rozmiaru procenty
( rozmiar oryginalny – 900×600, tutaj zastosowano pomniejszenie do 50%, 40%, 30%, 20%, 10% )

jak zrobić?

<img src="https://i1.fdbimg.pl/908me6r1_mqsavo.jpg" width="50%" height="50%"><img src="https://i1.fdbimg.pl/908me6r1_mqsavo.jpg" width="40%" height="40%"><img src="https://i1.fdbimg.pl/908me6r1_mqsavo.jpg" width="30%" height="30%"><img src="https://i1.fdbimg.pl/908me6r1_mqsavo.jpg" width="20%" height="20%"><img src="https://i1.fdbimg.pl/908me6r1_mqsavo.jpg" width="10%" height="10%">

obrazek ze zmiennym rozmiarem za pomocą tagu HTML – definiowanie stałej wysokości

jak zrobić?

<img src="https://i1.fdbimg.pl/22ale6r1_mqsajg.jpg" height="200"><img src="https://i1.fdbimg.pl/87dg3mx1_p2704r.jpg" height="200"><img src="https://i1.fdbimg.pl/gpf14ru1_o14c1a.jpg" height="200">

obrazek ze zmiennym rozmiarem za pomocą tagu HTML – definiowanie stałej szerokości

jak zrobić?


<img src="https://i1.fdbimg.pl/22ale6r1_mqsajg.jpg" width="200"><img src="https://i1.fdbimg.pl/87dg3mx1_p2704r.jpg" width="200"><img src="https://i1.fdbimg.pl/gpf14ru1_o14c1a.jpg" width="200">

inny przykład

Może być konieczne (jeżeli nie widać obrazków) zalogowanie się na własne konto Google !

( plik oryginalny jest tu )

100%

75%

50%

33%

25%

20%

10%

( kalkulator do obliczeń rozmiarów obrazka jest tu )

jak zrobić?

100%
!https://lh3.google.com/u/0/d/1ZBnpaDG_mrC4K6PlByFvjCGiz6ZYma7G=w1004-h172-iv1!
75%
!https://lh3.google.com/u/0/d/1ZBnpaDG_mrC4K6PlByFvjCGiz6ZYma7G=w670-h115-iv1!
50%
!https://lh3.google.com/u/0/d/1ZBnpaDG_mrC4K6PlByFvjCGiz6ZYma7G=w502-h86-iv1!
33%
!https://lh3.google.com/u/0/d/1ZBnpaDG_mrC4K6PlByFvjCGiz6ZYma7G=w335-h57-iv1!
25%
!https://lh3.google.com/u/0/d/1ZBnpaDG_mrC4K6PlByFvjCGiz6ZYma7G=w251-h43-iv1!
20%
!https://lh3.google.com/u/0/d/1ZBnpaDG_mrC4K6PlByFvjCGiz6ZYma7G=w200-h34-iv1!
10%
!https://lh3.google.com/u/0/d/1ZBnpaDG_mrC4K6PlByFvjCGiz6ZYma7G=w100-h17-iv1!

_____ Klasy, style, id CSS _____

Na FDB działają tylko klasy !

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

p(text-danger). ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

_____ Kod liniowy _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ @[abcdefghijklmnopqrstuvwxyz 0123456789]

jak zrobić?

ABCDEFGHIJKLMNOPQRSTUVWXYZ @abcdefghijklmnopqrstuvwxyz@ 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ @[abcdefghijklmnopqrstuvwxyz 0123456789]

_____ Kod źródłowy (blokowy) _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

jak zrobić?

bc. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

_____ Tekst preformatowany / jednolita szerokość znaków, respektowanie wielu spacji _____

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
          _     _
          \`\ /`/
           \ V /
           /. .\
          =\ T /=
           / ^ \
        {}/\\ //\
        __\ " " /__
       (____/^\____)

jak zrobić?

pre. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
          _     _
          \`\ /`/
           \ V /
           /. .\
          =\ T /=
           / ^ \
        {}/\\ //\
        __\ " " /__
       (____/^\____)

Pomocne do formatowania tekstu mogą być klasy CSS występujące na FDB
i obecne praktycznie wszędzie na portalu, aż się proszą o wykorzystanie.

Mając na względzie to, że nie działają tu style CSS używanie już istniejących klas CSS
jest jedynym sensownym pomysłem na formatowanie wizualne tekstu.

Przykład wywołania:

p(nazwa-klasy). ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz  0123456789

_____ Klasy CSS na FDB.pl : _____

( według wzoru "tekst testowy _____ nazwa-klasy" )

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ bg-info

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ bg-warning

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ bg-danger

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ bg-error

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ btn-info

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ btn-warning

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ btn-danger

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ btn-error

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ alert-info

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ alert-warning

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ alert-danger

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ alert-error

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ list-group-item-info

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ list-group-item-warning

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ list-group-item-danger

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ list-group-item-error

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ text-info

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ text-warning

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ text-danger

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ text-error

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ badge

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ media-status

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ media-top

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 _____ form-error

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
0123456789 _____ signature

_____ Zmiana rozmiaru tekstu za pomocą klasy "fa" _____

fa-1x

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

fa-2x

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

fa-3x

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

fa-4x

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

fa-5x

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

fa-6x

ABCDEFGHIJKLMNOPQRSTUVWXYZ

fa-7x

ABCDEFGHIJKLMNOPQRSTUVWXYZ

fa-8x

ABCDEFGHIJKLMNOPQRSTUVWXYZ

fa-9x

ABCDEFGHIJKLMNOPQRSTUVWXYZ

fa-10x

ABCDEFGHIJKLMNOPQRSTUVWXYZ

_____ Zmiana układu bloku za pomocą klasy "fa-flip" _____

fa-flip-horizontal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

fa-flip-vertical

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

_____ Zmiana położenia bloku za pomocą klasy "text" _____

text-left

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

text-right

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

text-center

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

text-justify

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCD EFGH IJKL MNOP QRST UVWX YZ abcd efgh ijkl mnop qrst uvwx yz 01234 56789

_____ Tworzenie przewijanego obiektu blokowego _____

table-responsive

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

pre-scrollable

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

_____ Tworzenie obiektu reagującego na wskazanie myszką _____

Działa tylko na forum !

button

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

duży obiekt link/odnośnik reagujący na wskazanie myszką

ZSGifman

jak zrobić?

p(button)." !https://i1.fdbimg.pl/c3hct0y1/100x100_p7hrj4.jpg! ZSGifman":https://fdb.pl/users/zsgifman

_____ Wpis informujący o treściach zdradzających fabułę _____

Nie należy przejmować się liniami, na forum filmu będzie równo :)

Tabliczka

▓▓▓▒▒▒░░░╔═══════════════════════════╗░░░▒▒▒▓▓▓
▓▓▓▒▒▒░░░║ _________________ UWAGA!!! .__________________ ║░░░▒▒▒▓▓▓
▓▓▓▒▒▒░░░║ _____ TREŚCI ZDRADZAJĄCE FABUŁĘ! ._____ ║░░░▒▒▒▓▓▓
▓▓▓▒▒▒░░░╚═══════════════════════════╝░░░▒▒▒▓▓▓

jak zrobić?

--------------
p(alert-info). 
▓▓▓▒▒▒░░░╔═══════════════════════════╗░░░▒▒▒▓▓▓ 
▓▓▓▒▒▒░░░║ _________________ UWAGA!!! .__________________ ║░░░▒▒▒▓▓▓ 
▓▓▓▒▒▒░░░║ _____ TREŚCI ZDRADZAJĄCE FABUŁĘ! ._____ ║░░░▒▒▒▓▓▓ 
▓▓▓▒▒▒░░░╚═══════════════════════════╝░░░▒▒▒▓▓▓ 
--------------

Zwykły napis: SPOJLERY!

▓▒░ SPOJLERY! ░▒▓

jak zrobić?

--------------
p(fa-3x). ▓▒░ SPOJLERY! ░▒▓ 
--------------

_____ Łączenie poleceń / kombinacje formatów _____

Ważne jest określenie dominującej klasy formatowania, wtedy można wyznaczyć dodatkową lokalną,
lecz nie więcej niż jedną na raz!
Możliwe jest jedna wywoływanie kilku kolejnych po wcześniejszym zakończeniu poprzedzającej!
Przed i po znaku % rozszerzenia lokalnego stylu konieczna jest spacja!
Nie ma możliwości formatowania w ten sposób tekstu ciągłego!

tekst wyśrodkowany dodatkowo powiększony częściowo i wyróżniony kolorem

ABCD EFGH IJKLMNOPQR STUV WXYZ
abcd efgh ijklmnopqr stuv wxyz
012 3456 789

jak zrobić?

p(text-center). ABCD %(fa-2x)EFGH% IJKLMNOPQR %(fa-3x)STUV% WXYZ
abcd %(alert-info)efgh% ijklmnopqr %(alert-danger)stuv% wxyz
012 %(badge)3456% 789

tekst formatowany kolorem dodatkowo powiększony

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

jak zrobić?

p(btn-warning). %(fa-2x)ABCDEFGHIJKLMNOPQRSTUVWXYZ% 
%(fa-3x)abcdefghijklmnopqrstuvwxyz%
%(fa-4x)0123456789%

tekst "do góry nogami" ;) częściowo wyróżniony kolorem

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

jak zrobić?

p(fa-flip-vertical). ABCDEFGHIJKLMNOPQRSTUVWXYZ
%(alert-danger)abcdefghijklmnopqrstuvwxyz%
0123456789

_____ Podpis na forum, działa też na blogu i zapewne w wiadomościach _____

___ Podpis niestety za każdym razem trzeba wstawiać ręcznie! ___

___ ZSGifMan ___

jak zrobić?

p(signature). ___ ZSGifMan ___

_____ Informacja o błędach, wesoła pt. "error alert" :) _____

⚠ ERROR ALERT ❗ ;D

jak zrobić?

p(bg-danger).     %(fa-2x)⚠    ERROR ALERT ❗    ;D%

_____ Na sam koniec – czysty absurd i sztuka dla sztuki, aaa… bo mogę :[] _____

( raczej nikomu się do niczego nie przyda ;)

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

jak zrobić?

p(fa-spin). !https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/e17a5690-9a67-11e6-a608-00163ed833e7/1156947093/magic-8-ball-logo.png! ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 !https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/e17a5690-9a67-11e6-a608-00163ed833e7/1156947093/magic-8-ball-logo.png!

___ P O W O D Z E N I A ! ___ W razie problemów, pytań oczywiście pomogę :) ___

P.S.
Jestem tylko człowiekiem, a nie nieomylną maszyną :) więc jak są jakieś błędy/coś się nie zgadza,
to proszę o sygnał i poprawię w wolnej chwili… których coraz mniej ;)

Na zakończenie (też przeklejony ;) dodatek postaci raportu odnośnie co działa, a co nie:

Narzędzie do formatowania wypowiedzi/postów redcloth nie działają:

- listy numerowane
– listy zagnieżdżone
– listy mieszane
– tabelki/tablice
– CSS style
– CSS style definiowane
– paragraf ułożenie
– paragraf położenie
– wcięcia bezwzględne
– bloki HTML

>
p(alert-warning). Z tego co działa teraz (dnia 04.07.2018), a i wcześniej już widziałem, to:

- pogrubianie
– kursywa
– podkreślenie
– przekreślenie
– indeks górny
– indeks dolny
– markery linii
– cytaty/cytowania
– linki
– wcięcia tekstu i wcięcia list numeracji ręcznej
– paragrafy
– nagłówki
– kod źródłowy liniowy
– kod źródłowy blokowy
– przytoczenia, źródła
– akronimy
– obiekty graficzne
– linkowanie do grafiki
– definicje
– symbole
– CSS klasy i id
– preformatowanie tekstu

>

>
Oprócz tego działa pewna partia kodów UTF-16, w szczególności Unicode w zakresie 1D00-2E20.

>

___ ZSGifMan ___

4
Odpowiedz

ar23s 2018-07-04

Dzięki za temacik, przyda się :P

2
Odpowiedz

ZSGifMan 2018-07-04

Proszę bardzo :)

Jakby ktoś coś, to… jestem do 24 lipca 2018 na oflajnie ;) najpewniej z drinkiem na leżaku przy basenie i jak nie odpisuję, to nie, że olewam i ignoruję , tylko mnie nie ma w sieci łamane na nie mam jak ;p

Do zobaczenia, cześć!

EDIT:

Dobra!
Wróciłem, jakby coś – piszcie śmiało, pomogę, podpowiem itp. :)

Odpowiedz

ZSGifMan 2018-10-11

Problem z linkami do obrazków (lub filmów na YouTube)

Gdy w linku znajduje się iks czyli "x" między dwoma liczbami lub znak minus/myślnik czyli "-".

Wyjaśnienie na podstawie obrazka z Dolly Parton ;)

https://doyouremember.com/wp-content/uploads/2017/09/DollyParton-1-758×398.jpg
( zepsuty iks "x" między 758 a 398, zepsuty adres – odnośnik nie działa! )

Narzędzie Textile do formatowania tekstu, o którym jest wyżej mowa, czasem doszukuje się innej akcji i psuje link. Dzieje się tak, gdy w URL podany jest rozmiar obrazka rozdzielony znakiem "x", wtedy to Textile zamienia zwykłego iksa na znak "×" o oznaczeniach UTF-16 U+00D7 i UTF-8 0xc3 0×97. Robi to ponieważ 'wydaje mu się' ;) że ma do czynienia z równaniem arytmetycznym i zmienia zwykłą literę iks "x" na kosmetycznie ładniejszy znaczek mnożenia "×" opisany wcześniej.

Aby temu zapobiec należy użyć formatu do zamieszczenia opisu linka w formie:
"Opis odnośnika":http://jakasdomena.pl/costamcostam/
lub szybciej i prościej:
"http://jakasdomena.pl/costamcostam/":http://jakasdomena.pl/costamcostam/
czyli po prostu dwa razy wklejony adres.

I tak ten sam link w tej postaci:
"https://doyouremember.com/wp-content/uploads/2017/09/DollyParton-1-758x398.jpg":https://doyouremember.com/wp-content/uploads/2017/09/DollyParton-1-758x398.jpg
już ładnie działa:
https://doyouremember.com/wp-content/uploads/2017/09/DollyParton-1-758×398.jpg
a psuje się tylko iks w tytule odnośnika, natomiast on sam jest nietknięty i wskazuje na poprawny adres.

Można też zrobić własny opis do tego linka:
"Obrazek z Dolly Parton":https://doyouremember.com/wp-content/uploads/2017/09/DollyParton-1-758x398.jpg
który wygląda wtedy tak:
Obrazek z Dolly Parton
i również działa bez problemów.

Samo zamieszczenie obrazka w sposób:
!https://doyouremember.com/wp-content/uploads/2017/09/DollyParton-1-758x398.jpg!
również jest możliwe i jak najbardziej właściwe:

Mam nadzieję, że pomogłem :)

Powodzenia,
Cześć.

P.S.
W razie pytań, wątpliwości – piszcie.

Odpowiedz

rolnik_postepowy 2018-12-11

A da się tak zrobić, żeby zamiast samego linka do filmu np. na youtube od razu pojawiał się odtwarzacz?

Odpowiedz

ZSGifMan 2018-12-11

> rolnik_postepowy o 2018-12-11 09:46 napisał:
> A da się tak zrobić, żeby zamiast samego linka do filmu np. na youtube od razu pojawiał się odtwarzacz?

Na chwilę obecną czyli 2018-12-11 – nie da się!

Umieszczanie w poście odtwarzacza filmów YouTube

Omówienie na przykładzie teledysku:

Dire Straits – Brothers In Arms

Taką czynność można by wykonać na trzy sposoby: poprzez obiekt osadzony, liniową ramkę z treścią lub samo osadzenie.

1. Obiekt (object)

<object width="425" height="350"><param name="movie" value="https://www.youtube.com/v/lgb6peaKCSc?version=3&amp;hl=en_US&amp;rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="https://www.youtube.com/v/lgb6peaKCSc?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="350" width="425" /></object>

2. Ramka (inline frame)

<iframe src="https://www.youtube.com/embed/jhdFe3evXpk" width="425" height="350" />

3. Osadzenie (embed)

<embed src="https://www.youtube.com/v/jhdFe3evXpk" width="425" height="350" />

Wszystkie powyższe metody są równoważne, a jak zapewne gołym okiem widać dwie ostatnie najprostsze w użyciu.

Pozycja 2 jest zalecana przez YouTube i dostępna po PPM (kliknięciu prawym przyciskiem myszy) na obszar odtwarzacza filmu i wybraniu "skopiuj kod do umieszczenia na stronie".

P.S.
Już prosiłem o udostępnienie takiej możliwości, jak na razie – bez echa.
Im więcej osób wysunie taki postulat, tym większa szansa na jego wysłuchanie i spełnienie
– tak więc piszcie i proście, a będzie Wam dane! :)

Odpowiedz

Wykorzystanie Textile do formatowania wpisów i wypowiedzi.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789