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; }

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!