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:
[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.
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!