Cum să faci un frumos afișaj de știri corelate (știri similare) despre domnul

Cartografia inițială a știrilor corelate arată astfel:

Nu foarte atractivă, nu-i așa? Ce va atrage atenția utilizatorului? Desigur, poze!

Pasul # 1: găsiți fișierul șablon relatednews.tpl

Inițial acest fișier conține următorul cod:

Este necesar să înlocuiți acest cod cu următoarele:

Acesta este numele clasei noastre, pe care o vom crea în CSS.

[xfvalue_img1] este codul pentru câmpul suplimentar prin care trimit prima imagine a articolului (experimentând cu alto și micro-markup). Dacă nu imprimați prima imagine a articolului prin câmpul suplimentar, în loc de [xfvalue_img1] lipiți.

- Titlul imaginii (titlu), care este adăugat la alt (descrierea imaginii pentru motoarele de căutare).

Pasul 2: editarea fișierului de stil.

În orice loc din fișier, introducem codul de clasă.

.newsnews - numele clasei.

afișare: inline-block; - Valoarea blocului inline generează un element de bloc, cu comportamentul elementului rând (încă acest parametru poate fi util pentru corectarea erorilor de afișare în browserul nebun IE).

lățime: - lățimea imaginii.

înălțimea: - înălțimea imaginii.

Acest lucru este suficient pentru a scoate imaginea pe orizontală.

Pentru frumusete adaugam un cadru.

umplutură. - valoarea câmpului în pixeli. Cu cât acest parametru este mai mare, cu atât este mai gros cadrul.

border-radius. Rotunjirea colțurilor. (-webkit-border-radius: - pentru compatibilitatea cu browserul încrucișat)

box-shadow. - umbra cadrului. (-moz-box-shadow: - pentru compatibilitatea cu browserul încrucișat)

Asta e tot! Redați cu parametrii și ajustați site-ul dvs.

Cum să faci un frumos afișaj de știri corelate (știri similare) despre domnul

Internet Explorer afișează exact același lucru!

Mulțumesc tuturor pentru atenție!

PS: nu uitați să curățați memoria cache din panoul admin!







Articole similare

Trimiteți-le prietenilor: