Exiled - Gaming Romania este o comunitate bazata pe gaming-ul profesionist.


Font Awesome diferit la fiecare categorie IPB 3

 



Vezi subiectul anterior Vezi subiectul urmator In jos   Mesaj • Pagina 1 din 1

Adi
#1

la data de Dum Mai 15, 2016 10:10 pm

avatar


În primul rând trebuie să avem Font Awesome pus pe forum :)). Ori puneţi codul de aici, https://fortawesome.github.io/Font-Awesome/get-started/ , adică

Cod:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

în globalTemplate, după

Cod:
<head>

Ori descărcaţi fişierele CSS de aici : https://fortawesome.github.io/Font-Awesome/ (este în header un buton mare Download).

Din boardIndexTemplate, înlocuim

Cod:
<img src='{$this->settings['img_url']}/f_icon.png' />

cu

Cod:
<php>
$icon = 'fa fa-comments';
switch( $forum_data['id'] )
{
    case 3: $icon = 'fa fa-globe'; break;
    case 4: $icon = 'fa fa-home'; break;
    // etc
    default: break;
}
</php>

<div class='icon_awesome_forum_necitit'><i class="{$icon}"></i></div>

unde

Cod:
$icon = 'fa fa-comments';

reprezintă icon-ul default, iar în cadrul blocului switch, îi vom atribui variabilei $icon codul iconiţei dorite, în funcţie de ID-ul forumului. De exemplu, dacă dorim acest icon: http://fortawesome.github.io/Font-Awesome/icon/map/ la categoria cu ID-ul 255, vom adăuga, înainte de

Cod:
default: break;

asa

Cod:
case 255: $icon = 'fa fa-map'; break;

Aşa.. tot din boardIndexTemplate, schimbăm

Cod:
<img src='{$this->settings['img_url']}/f_icon_read.png' />

cu

Cod:
<div class='icon_awesome_forum_citit'><i class="{$icon}"></i></div>

iar asta:

Cod:
<img src='{$this->settings['img_url']}/f_redirect.png' />

cu:

Cod:
<div class='icon_awesome_forum_necitit'><i class="fa fa-external-link"></i></div>

unde schimbam

Cod:
<i class="fa fa-external-link"></i>

cu iconiţa ce vrem să fie pusă la forumurile de tip redirect.

Şi în ipb_styles.css adăugăm, jos de tot, asta:

Cod:
.icon_awesome_forum_necitit {
    text-align: center;
    font-size: 25px;
    color: #eee;
}

.icon_awesome_forum_citit {
    text-align: center;
    font-size: 25px;
    color: #444;
}

P.S. Tutorialul e destul de basic, pentru teme negre. Puteţi customiza iconiţele din codul CSS (adăugat border, background, etc etc)

Dacă aveţi întrebări / nelămuriri, postaţi aici :).



Vezi profilul utilizatorului http://exiled.wow3.info

Vezi subiectul anterior Vezi subiectul urmator Sus   Mesaj • Pagina 1 din 1