CSS style for blockquote – Wordpress

wordpress codex 150x150 CSS style for blockquote   Wordpress

CSS style for quote

Azi noapte mi-am băgat din nou degetele prin codul WP, pentru a face câteva mici modificări. Modificări pe care le-am finalizat astăzi, după mai multe “teste” și după ce am modificat mai multe fișiere CSS (pentru că folosesc mai multe CSS-uri, fiecare fiind individualizat pentru anumite “situații”). Am vrut să fac puțină “ordine” în cod și printre altele am modificat felul în care sunt afișate citatele (blockquotes) și scripturile (code). Dacă pentru afișarea scripturilor e puțin mai complicat, pentru “blockquote” exista o metodă foarte simplă și se poate face direct din CSS fără să mai fie necesară instalarea unui plugin.

În general, prefer să-mi fac singur modificările și apelez la “plugins” doar atunci când e prea multă muncă să fac totul singur (deși o parte dintre pluginuri mi le-am făcut eu). Cei mai mulți dintre proprietarii de bloguri, probabil că utilizează un plugin pentru afișarea “blockquote” ori pur și simplu utilizează “blockquote“-ul default din tema. Ei bine, cred că blogurile (care încă nu au făcut-o), ar trebui să adopte un anumit “standard” în afișarea citatelor pentru că nu de puține ori am observat pe diverse bloguri, că citatele sunt destul de dificil de “observat” în conținut, de multe ori citatele pot fi confundate cu conținutul “original” al articolului, ceea ce nu este în regulă. Drept urmare, am să vă prezint “metoda CSS” pentru a face ca citatele să arate … a “citate”.

Cum vă spuneam, totul se poate face foarte ușor din CSS, fără să fiți nevoiți să instalați (încă) un plugin! Fiecare plugin instalat se comportă ca un “bolovan” pus în portbagajul unei mașini. Cu cât vom avea mai mulți “bolovani” în portbagaj, cu atât mașina va merge mai “greu”. La fel se întâmplă și în cazul blogurilor, de aceea prefer să adaug câteva reguli în CSS decât să mai instalez încă un plugin. Evident, atât cât se poate, încerc să țin codul cât mai “suplu” și cât mai “curat”.

Mai jos, am să pun un “citat” pentru a vedea cum apare citatul după noile modificări:

Dacă vrei să cunoști un om cu adevărat, privește cum îi tratează pe cei inferiori, nu pe cei egali cu el.
J.K.Rowling

Genul acesta de afișare a citatelor este o “regulă nescrisă” adoptată deja de către mulți dintre programatorii care creează diverse teme sau plugin-uri și utilizată de ceva vreme de către mulți proprietari de site-uri web, însă unii (totuși) încă n-au făcut-o: fie din neștiință, fie din ignoranță, fie din lipsă de timp și/sau chef (cazul meu). Drept urmare, am să vă prezint metoda cea mai simplă de implementare/modificare a afișării citatelor, totul se poate face din CSS, fără să aveți nevoie de alte modificări ori de plugin-uri.

Tot ce trebuie să faceți, este să modificați codul CSS actual, astfel:

1
2
3
blockquote { background: #F0F0F0; color: #666666; font-size: 1em; border-left: 5px solid #ccc; margin: 0em 0em 1.7em 0em; padding: 1em 10px 0em 10px; quotes: "\201C""\201D""\2018""\2019"; }
blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; position: relative; top: 0.4em; display: inline-block; float: left; }
blockquote:after { color: #ccc; content: close-quote; font-size: 4em; line-height: .1em; margin-left: .20em; vertical-align: -.4em; position: relative; bottom: 0em; display: inline-block; float: right; }
blockquote { background: #F0F0F0; color: #666666; font-size: 1em; border-left: 5px solid #ccc; margin: 0em 0em 1.7em 0em; padding: 1em 10px 0em 10px; quotes: "\201C""\201D""\2018""\2019"; }
blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; position: relative; top: 0.4em; display: inline-block; float: left; }
blockquote:after { color: #ccc; content: close-quote; font-size: 4em; line-height: .1em; margin-left: .20em; vertical-align: -.4em; position: relative; bottom: 0em; display: inline-block; float: right; }

Este posibil sa trebuiasca sa adaptati codul pentru CSS-ul vostru, clasele CSS pot fi declarate diferit in CSS insa codul CSS poate fi folosit.

Succes!

wordpress codex CSS style for blockquote   Wordpress

Ţi-a plăcut acest articol ? Atunci votează-l, aici:
   
Comentează acest subiect
Acest articol a fost publicat de , duminică, 27 septembrie 2015 in categoria Programare. Poti sa urmaresti raspunsurile catre acest articol prin RSS 2.0 feed. Poti sa adaugi un comentariu, sau poti sa pui un trackback (link) de pe propriul tau site:

Ctrl + C pentru a copia linkul

10 comentarii la subiectul “CSS style for blockquote – Wordpress”

  1. francisc

    Bine că le ai cu astea. Pune și tu undeva scris, de fiecare dată “faceți o copie de rezervă a fișierului, înainte să-l modificați“.
    eu când mi-am băgat nasul într-un CSS am stricat o bunătate de temă. Și culmea, cu alta nu mergea blogul. chin și jale până să fac rost de-o copie de la firma de hosting, deoarece era para-modificată de x ori…

  2. Dan

    Well … mă gândesc că, asta e de la sine înțeles … să faci o copie de rezervă înainte de a te apuca de modificări (mai ales dacă nu ești sigur pe ce faci!?).

    Btw, și la tine e aiurea citatul :)) E indamisibil ca fonturile utilizate în textul citatului, să fie de dimensiuni mai mari decât textul articolului! Trebuie să fie cel mult egale ca mărime sau eventual mai mici.

    blog francisc

    PS: Ca să nu mai zic că, search-ul nu apare decât la userii autentificați.

  3. francisc

    Și ce fac fratele meu, că nu mă pricep?

  4. Dan

    Ok, hai că ți-l fac eu …

  5. francisc

    ia vezi cum e cu search ala, ca am pus sa fie pt toata lumea, numai ca vad modificarile maine…

  6. Dan

    Done. Ți l-am făcut …

    LE: Merge și search-ul acum, e ok așa.

    blog francisc

  7. francisc

    Danke, e ok. Însă textul din articol se poate un număr mai mare? sau mă rog, jumate mai mare? si textul din titlu, sa fie de un font care accepta diactritice? un verdana sau arial? si o idee mai mic incat sa nu pape din diacritice?
    si dupa aia te las, deja iti sunt dator X beri (x îl înlocuiești cu nr de beri)

  8. Dan

    Vezi dacă e bine așa … ?

  9. francisc

    e giugiuc, sărut mâna!

  10. ciubotaru marc

    Utile si binevenite aceste precizari. Multumesc si mai asteptam!…

RSS

Adaugă un comentariu

Autentifică-te pe site și nu va mai trebui să completezi căsuțele de mai sus.

:) :( :d :"> :(( :dancing: :x 8-| /:) :o :-? :-" :-w ;) [-( :peace: arata toate iconitele »

 

Acum poți adăuga pe site, propriile tale articole. Click aici !



Anunturi Gratuite