Bună şi bine te-am regăsit!

Sper că pandemia nu ţi-a afectat prea mult activitatea blogosferică. Azi vreau să-ţi arăt cum poţi modifica aspectul blogului tău WordPress, dacă tema care îţi place nu îţi oferă prea multe opţiuni.

4 coduri CSS simple pentru temele cu opţiuni puţine

Pentru a pune în aplicare instrucţiunile mele, trebuie să accesezi în Panoul Control meniul Aspect -> Personalizare. După încărcare, va arăta aşa:

Dă click pe CSS suplimentar şi închide instrucţiunile pe link-ul din dreapta jos (vezi în colajul de mai sus). Te afli în locul care îţi va permite să modifici caracteristici din aspectul blogului tău.

De aici, cu ajutorul codurilor CSS (Cascading Style Sheets) pe care ţi le voi oferi şi pe care le poţi edita pentru a obţine ceea ce vrei, vei putea schimba alinierea textului, tipul fontului, mărimea şi culoarea lui, chiar şi fundalul pieselor. Suficient pentru un începător.

Alinierea textului

În editorul clasic al WordPress aveam posibilitatea de a alinia textul la ambele capete, setare ce se numeşte justify. Aceasta a dispărut în noul editor şi se pare că au avut un motiv întemeiat să o scoată: în anumite circumstanţe, textul aliniat cu justify era greu de urmărit – prea mult spaţiu liber pe rânduri -, lucru destul de deranjant pentru bătrânul Google.

Dacă totuşi vrei să aliniezi textul astfel, o poţi face lipind următorul text la CSS suplimentar:

p {
	text-align: justify;
}

Poţi înlocui justify cu right sau center, dar (atenţie!) alinierea se va schimba peste tot în site. Alinierea la stânga este cea prestabilită.

Tipul fontului şi/sau mărimea

Majoritatea temelor au incluse o mulţime de fonturi din colecţia Google Fonts, însă nu toate. Atunci când nu ai de unde alege, poţi introduce următorul text, modificând familia după preferinţe:

h2 {
	font-family: Helvetica;
	font-size: 28px;
}

Alte exemple de familii de fonturi: Baskerville, Palatino Linotype, Calibri, Times New Roman, Georgia etc. (o listă completă ai aici)

Dacă vrei să schimbi doar una din opţiuni (fontul sau mărimea), şterge-o pe cealaltă.

Pentru paragrafe, înlocuieşte h2 cu p.

Culoarea fontului

Mie îmi place să scot titlul articolului în evidenţă, îl setez de obicei în culoarea predominantă a blogului. Schimb şi culoarea clasică a paragrafelor (negru), în ceva mai plăcut ochiului, cum ar fi un gri. Iată ce cod am folosit când am avut nevoie:

h1 {
	color: blue;
}

Fundalul pieselor care se află de obicei în bara laterală

Bara laterală se diferenţiază, de regulă, de restul paginii. Multe dintre temele pe care le-am încercat aveau fundal colorat pentru piesele care apar pe site (inclusiv cele din subsol). Dacă vrei să faci o schimbare în privinţa asta, iată codul pe care îl poţi utiliza:

.widget {
	background: #e3e3e3;
	padding: 10px;
}

Poţi scrie pur si simplu denumirile culorilor sau coduri HEX pentru o mai mare precizie (găseşti o paletă aici; preia codul cu #, ca în exemplul de mai sus).

Vei putea observa schimbările live, direct în customizer, după lipirea codului. Pentru a salva modificările, apasă Publică. Pentru a anula, şterge liniile de cod din secţiunea CSS suplimentar şi apasă Publică când ai terminat.

Asta-i tot!

Pe curând!

Legenda:
p = paragraf;
h1, h2, h3, h4, h5, h6 = titluri şi subtitluri;
padding = spaţiul (“căptuşeala”) dintre chenar şi conţinutul piesei. Poate fi omis;
background = fundal;
widget = piesă.

L.E.: Toate codurile CSS exemplificate în articol au fost testate cu tema Twenty Seventeen.

⮚ Citeşte şi Minutul de Blogging IT #2

Dacă ţi-a plăcut articolul meu, dă-mi de ştire printr-un like/share. Dacă vrei să fii la curent cu noutățile, urmăreşte-mă pe Facebook.


Subscribe
Notify of
guest
0 Comentarii
Inline Feedbacks
View all comments