Adaugare Font Awesome la subforumuri IPB

[Ștefan A.]

Inca un tutorial de la mine pentru voi, asta e inventat de mine cu rata de succes de 100%  

Modificati codul din css si scoateti pozele, copyright pt codul lui Courage 

de ex asta e codul pentru subforumuri pe 3 coloane ( partea css ):

table.ipb_table ol.subforums1 {margin-top: 3px;float: left;width: 33%;}table.ipb_table ol.subforums1 li{background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums1 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }table.ipb_table ol.subforums2 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums2 li {background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums2 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }table.ipb_table ol.subforums3 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums3 li {background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums3 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }

Voi il modificati cu asta:

table.ipb_table ol.subforums1 {margin-top: 3px;float: left;width: 33%;}table.ipb_table ol.subforums1 li{padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums1 li.unread { font-weight: bold;}table.ipb_table ol.subforums2 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums2 li {padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums2 li.unread { font-weight: bold; }table.ipb_table ol.subforums3 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums3 li {padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums3 li.unread { font-weight: bold; }

Si dupa adaugati in css asta

table.ipb_table ol.subforums1 li:before {
    font-family: 'FontAwesome';
    content: "\f05b";
    margin-right: 3px;
    font-size: 10px;
    position: relative;
    top: -1.5px;
    color: #555;
}

ca sa modifici iconita aia editezi content : "\f05b"; cum doresti.

Sa va  explic si cum afati acel mirific codulet;

cautati o iconita, sa zicem fa fa-arrow-right o gasiti aici: http://fortawesome.github.io/Font-Awesome/icon/arrow-right/

sub imaginile alea cu iconita in diferite dimensiuni aveti Unicode: etc.

Unicode la fa-arrow-right este f061 si voi puneti in: content : "\f061" ;

Succes.

[dilu']

Şi cum aş putea face, când e subiect nou la subforumul respectiv să aibă o culoare mai deschisă.

[Alexandru C.]

On 13/1/2016 at 11:00 AM, AlexandruS said:

Inca un tutorial de la mine pentru voi, asta e inventat de mine cu rata de succes de 100%  

Modificati codul din css si scoateti pozele, copyright pt codul lui Courage 

de ex asta e codul pentru subforumuri pe 3 coloane ( partea css ):

table.ipb_table ol.subforums1 {margin-top: 3px;float: left;width: 33%;}table.ipb_table ol.subforums1 li{background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums1 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }table.ipb_table ol.subforums2 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums2 li {background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums2 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }table.ipb_table ol.subforums3 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums3 li {background: url('{style_images_url}/subforum_nonew.png') no-repeat 0 50%;padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums3 li.unread { font-weight: bold; background-image: url('{style_images_url}/subforum_new.png'); }

Voi il modificati cu asta:

table.ipb_table ol.subforums1 {margin-top: 3px;float: left;width: 33%;}table.ipb_table ol.subforums1 li{padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums1 li.unread { font-weight: bold;}table.ipb_table ol.subforums2 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums2 li {padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums2 li.unread { font-weight: bold; }table.ipb_table ol.subforums3 {width: 33%;overflow: hidden;}table.ipb_table ol.subforums3 li {padding: 0 15px 0 15px;margin: 0;float: left;}table.ipb_table .subforums3 li.unread { font-weight: bold; }

Si dupa adaugati in css asta

table.ipb_table ol.subforums1 li:before {
    font-family: 'FontAwesome';
    content: "\f05b";
    margin-right: 3px;
    font-size: 10px;
    position: relative;
    top: -1.5px;
    color: #555;
}

ca sa modifici iconita aia editezi content : "\f05b"; cum doresti.

Sa va  explic si cum afati acel mirific codulet;

cautati o iconita, sa zicem fa fa-arrow-right o gasiti aici: http://fortawesome.github.io/Font-Awesome/icon/arrow-right/

sub imaginile alea cu iconita in diferite dimensiuni aveti Unicode: etc.

Unicode la fa-arrow-right este f061 si voi puneti in: content : "\f061" ;

Succes.

Nu ne dai și nouă un rezultat ?

[Ștefan A.]

2 hours ago, heroGen said:

Nu ne dai și nouă un rezultat ?

Mhm, imediat îmi instalez un forum pe localhost 

[+JuNNNNkie]

On 2/10/2016 at 6:32 PM, AlexandruS said:

Mhm, imediat îmi instalez un forum pe localhost 

Nu reusesc nici cum sa schimb culoarea la cel "read".

[Ștefan A.]

9 minutes ago, JuNNNNkie said:

Nu reusesc nici cum sa schimb culoarea la cel "read".

Hmm, dă-mi add pe mess. fps_alexandru

[Cristian #]

Spoiler

table.ipb_table ol.subforums1 {
    margin-top: 3px;
    float: left;
    width: 33%;
}

table.ipb_table ol.subforums1 li {
    padding: 0 15px 0 10px;
    margin: 0;
    float: left;
}

table.ipb_table .subforums1 li.unread { 
    font-weight: bold; 
}

table.ipb_table ol.subforums2 {
    width: 33%;
    overflow: hidden;
}

table.ipb_table ol.subforums2 li {
    padding: 0 15px 0 15px;
    margin: 0;
    float: left;
}

table.ipb_table .subforums2 li.unread { 
    font-weight: bold; 
}

table.ipb_table ol.subforums3 {
    width: 33%;
    overflow: hidden;
}

table.ipb_table ol.subforums3 li {
    padding: 0 15px 0 15px;
    margin: 0;
    float: left;
}

table.ipb_table .subforums3 li.unread { 
    font-weight: bold;
 }

table.ipb_table ol.subforums1 li:before {
    font-family: 'FontAwesome';
    content: "\f067";
    margin-right: 3px;
    font-size: 9px;
    position: relative;
    top: -1.5px;
    color: #555;
}

table.ipb_table ol.subforums1 li.unread:before {
    color: #b83030;
    font-weight: 100;
    font-size: 8px;
    transition: all 0.3s;
}

.subforums1 a {
    transition: all 0.5s;
    color: grey;
}

.subforums1 a:hover {
    color: #b83030;
}

 

Edited February 14, 2016 by Cristian #

[Ștefan A.]

On 2/14/2016 at 7:59 PM, Cristian # said:

  Hide contents

table.ipb_table ol.subforums1 {
    margin-top: 3px;
    float: left;
    width: 33%;
}

table.ipb_table ol.subforums1 li {
    padding: 0 15px 0 10px;
    margin: 0;
    float: left;
}

table.ipb_table .subforums1 li.unread { 
    font-weight: bold; 
}

table.ipb_table ol.subforums2 {
    width: 33%;
    overflow: hidden;
}

table.ipb_table ol.subforums2 li {
    padding: 0 15px 0 15px;
    margin: 0;
    float: left;
}

table.ipb_table .subforums2 li.unread { 
    font-weight: bold; 
}

table.ipb_table ol.subforums3 {
    width: 33%;
    overflow: hidden;
}

table.ipb_table ol.subforums3 li {
    padding: 0 15px 0 15px;
    margin: 0;
    float: left;
}

table.ipb_table .subforums3 li.unread { 
    font-weight: bold;
 }

table.ipb_table ol.subforums1 li:before {
    font-family: 'FontAwesome';
    content: "\f067";
    margin-right: 3px;
    font-size: 9px;
    position: relative;
    top: -1.5px;
    color: #555;
}

table.ipb_table ol.subforums1 li.unread:before {
    color: #b83030;
    font-weight: 100;
    font-size: 8px;
    transition: all 0.3s;
}

.subforums1 a {
    transition: all 0.5s;
    color: grey;
}

.subforums1 a:hover {
    color: #b83030;
}

 

Frumos  

[+JuNNNNkie]

On 2/15/2016 at 1:22 PM, AlexandruS said:

Frumos  

Eu vreau doar la iconita ca eu la subforum am un transition

[Ștefan A.]

12 minutes ago, JuNNNNkie said:

Eu vreau doar la iconita ca eu la subforum am un transition

E doar la iconiță

[+JuNNNNkie]

29 minutes ago, AlexandruS said:

E doar la iconiță

Inteleg dar am incercat dar nu se modifica!