Top-partenaire
YasashiValoranMyHeroAcadémiaRWBY RPGCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActifCSSActif
Bienvenue !
Bienvenue dans l'univers de Fairy Tail !





 

[En cours] Petit tuto pour personnaliser les boutons sur chaque thème

P
r
o
f
i
l
F
e
u
i
l
l
e
Messages : 67
Date d'inscription : 16/11/2015
Age : 23

Fiche
Test 1:
Mar 10 Avr - 2:11

Codes principaux :
▬ Javascript
Code:
function categ_icon()
{
    var list = document.getElementsByClassName("categ_icon");
    var i;
    for (i = 0; i < list.length; i++)
        {
            if(list[i].getAttribute("src") == "https://image.noelshack.com/fichiers/2018/12/2/1521586146-bloups.png")
            {
                list[i].parentNode.setAttribute("class", "icon_index categ_nonew");
            }
            else if (list[i].getAttribute("src") == "https://image.noelshack.com/fichiers/2018/12/2/1521586160-bloups.png")
            {
                list[i].parentNode.setAttribute("class", "icon_index categ_new");
            }        
            else
            {
                list[i].parentNode.setAttribute("class", "icon_index categ_lock");
            }
        }
}

function sujet_icon()
{
    var list = document.getElementsByClassName("imgSBJ");
    var i;
    for (i = 0; i < list.length; i++)
        {
            if(list[i].getAttribute("src") == "http://nsa39.casimages.com/img/2018/04/08/180408054521475537.png")
            {
                list[i].parentNode.setAttribute("class", "ivrSBJ sujet_new");
            }
            else if (list[i].getAttribute("src") == "http://nsa39.casimages.com/img/2018/04/08/180408054522740503.png")
            {
                list[i].parentNode.setAttribute("class", "ivrSBJ sujet_nonew");
            }    
            else if (list[i].getAttribute("src") == "http://nsa39.casimages.com/img/2018/04/08/180408054520962980.png")
            {
                list[i].parentNode.setAttribute("class", "ivrSBJ sujet_lock");
            }    
            else if (list[i].getAttribute("src") == "http://nsa39.casimages.com/img/2018/04/08/180408054520909334.png")
            {
                list[i].parentNode.setAttribute("class", "ivrSBJ sujet_annonce");
            }              
            else
            {
                list[i].parentNode.setAttribute("class", "ivrSBJ sujet_postit");
            }
        }
}

function btn_contact()
{
    var list = document.getElementsByClassName("btn_contact");
    var i;
    for (i = 0; i < list.length; i++)
    {
        if(list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523315256-icon-www.png")
        {
            list[i].setAttribute("class", "btn_contact btn_www");
        }
        else if (list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523315280-icon-fb.gif")
        {
            list[i].setAttribute("class", "btn_contact btn_facebook");
        }    
        else if (list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523315256-icon-twitter.gif")
        {
            list[i].setAttribute("class", "btn_contact btn_twitter");        
        }    
        else if (list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523315256-icon-pinterest.gif")
        {
            list[i].setAttribute("class", "btn_contact btn_pinterest");        
        }              
        else if (list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523315256-icq1.gif")
        {
            list[i].setAttribute("class", "btn_contact btn_icq");
        }            
        else if (list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523315280-aim1.gif")
        {
            list[i].setAttribute("class", "btn_contact btn_aim");        
        }            
        else if (list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523315256-msnm1.gif")
        {
            list[i].setAttribute("class", "btn_contact btn_msnm");
        }            
        else if (list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523315280-yim1.gif")
        {
            list[i].setAttribute("class", "btn_contact btn_yahoo");
        }        
        else if (list[i].firstChild.firstChild.getAttribute("src") == "http://nsa39.casimages.com/img/2018/04/10/180410021208389046.png")
        {
            list[i].setAttribute("class", "btn_contact btn_skype");
        }
    }
}

function posting_icon()
{
    var list = document.getElementsByClassName("posting_icon");
    var i;
    for (i = 0; i < list.length; i++)
    {
        if(list[i].firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523319342-newmess.png")
        {
            list[i].setAttribute("class", "posting_icon posting_new");
        }
        else if (list[i].firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523319342-repondre.png")
        {
            list[i].setAttribute("class", "posting_icon posting_answer");
        }        
        else
        {
            list[i].setAttribute("class", "posting_icon posting_lock");
        }
    }
}

function posting_mp()
{
    var list = document.getElementsByClassName("posting_mp");
    var i;
    for (i = 0; i < list.length; i++)
    {
        if(list[i].firstChild.firstChild.getAttribute("src") == "https://image.noelshack.com/fichiers/2018/15/2/1523319342-newmess.png")
        {
            list[i].setAttribute("class", "posting_mp posting_new");
        }
        else
        {
            list[i].setAttribute("class", "posting_mp posting_answer");
        }        
    }
}

categ_icon();
sujet_icon();
btn_contact();
posting_icon();
posting_mp();


▬ CSS
Code:

/*--------------------------CODE CATEGORIE -------------------------------------*/
.categ_new
{
    background-image: url('https://img4.hostingpics.net/pics/620410New.png');
}

.categ_nonew
{
    background-image: url('https://img4.hostingpics.net/pics/423085Old.png');
}

.categ_lock
{
    background-image: url('https://img4.hostingpics.net/pics/281150NoNew.png');
}

/*--------------------------LISTE SUJETS -------------------------------------*/
.sujet_new
{
    background-image: url('https://redcdn.net/hpimg15/pics/422790new.png');
    background-repeat: no-repeat;
}

.sujet_nonew
{
    background-image: url('https://redcdn.net/hpimg15/pics/68641225no.png');
    background-repeat: no-repeat;
}

.sujet_lock
{
    background-image: url('https://redcdn.net/hpimg15/pics/571296loc.png');
    background-repeat: no-repeat;
}

.sujet_annonce
{
    background-image: url('https://redcdn.net/hpimg15/pics/90353909232LpiHSQ00.png');
    background-repeat: no-repeat;
}

.sujet_postit
{
    background-image: url('https://redcdn.net/hpimg15/pics/130443post.png');
    background-repeat: no-repeat;
}

/*--------------------------BOUTONS TOPIC -------------------------------------*/

.en_ligne
{
    background-image:url('https://zupimages.net/up/18/06/d4xj.png');
    background-repeat: no-repeat;
}

.btn_contact, .btn_modmess, .posting_icon, .posting_mp
{
    display: inline-block;
}

.btn_citer
{
    background-image: url('https://redcdn.net/hpimg11/pics/630994citer.png');
}

.btn_editer
{
    background-image: url('https://redcdn.net/hpimg11/pics/232324editer.png');
}

.btn_supprimer
{
    background-image: url('https://redcdn.net/hpimg11/pics/72108729x.png');
}

.btn_ip
{
    background-image: url('https://redcdn.net/hpimg11/pics/42977970ip.png');
}

.btn_profil
{
    background-image: url('https://redcdn.net/hpimg11/pics/426750profil.png');
}

.btn_mp
{
    background-image: url('https://www.zupimages.net/up/16/04/jsqj.png');
}

.btn_email
{
    background-image: url('https://redcdn.net/hpimg11/pics/515291email.png');
}

.btn_www
{
    background-image: url('https://www.zupimages.net/up/16/04/yq1n.png');
}

.btn_facebook
{
    background-image: url('https://illiweb.com/fa/subsilver/icon_fb.gif');
}

.btn_twitter
{
    background-image: url('https://illiweb.com/fa/subsilver/icon_twitter.gif');
}

.btn_pinterest
{
    background-image: url('https://illiweb.com/fa/subsilver/icon_pinterest.gif');
}

.btn_icq
{
    background-image: url('https://illiweb.com/fa/m/icq1.gif');
}

.btn_aim
{
    background-image: url('https://illiweb.com/fa/m/aim1.gif');
}

.btn_msnm
{
    background-image: url('https://illiweb.com/fa/m/msnm1.gif');
}

.btn_yahoo
{
    background-image: url('https://illiweb.com/fa/m/yim1.gif');
}

.btn_skype
{
    background-image: url('https://redcdn.net/hpimg11/pics/701683skype.png');
}

.posting_new
{
    background-image: url('https://img4.hostingpics.net/pics/276584nouveau.png');
}

.posting_answer
{
    background-image: url('https://img4.hostingpics.net/pics/817694rep.png');
}

.posting_lock
{
    background-image: url('http://img15.hostingpics.net/pics/166897lock.png');
}
Note : Ce CSS est basé sur les boutons existants à l'origine, mais tout est modifiable

▬ Modifier template General > overall_footer_begin
Ajouter cette ligne à la fin :
Code:
<script src="lien_vers_le_javascript"></script>
(Je le charge ici pour être sûre qu'il s'exécute à la fin de chaque page)

▬ Micro modification parce que j'ai la flemme d'automatiser ça donc autant le planquer :
Panneau d'administration > General > Messages et Emails > Configuration > Afficher la légende des statuts des messages : régler sur NON


Dernière édition par Admin le Dim 22 Avr - 16:05, édité 4 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
http://fairynotail.forumactif.org
P
r
o
f
i
l
F
e
u
i
l
l
e
Messages : 67
Date d'inscription : 16/11/2015
Age : 23

Fiche
Test 1:
Mar 10 Avr - 3:23

Tout le système se base sur le même principe que pour l'image EN LIGNE

C'est à dire mettre des images transparentes via le panneau d'administration, et mettre les vraies images en background via le css.

Si ça peut aider, j'ai exporté les images de mon forum test, suffit de les importer via le panneau d'administraion :
https://ahp.li/98dd7bed178ecdb3b83d.zip


ATTENTION : Les images transparentes doivent toujours avoir la même taille que l'image qu'elles remplacent. Et toutes les images transparentes doivent avoir des noms/url différents afin de les identifier dans le javascript.


Dernière édition par Admin le Mar 10 Avr - 3:35, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
http://fairynotail.forumactif.org
P
r
o
f
i
l
F
e
u
i
l
l
e
Messages : 67
Date d'inscription : 16/11/2015
Age : 23

Fiche
Test 1:
Mar 10 Avr - 3:32

Fonctionnement du code :
Le code liste dans un premier temps les endroits où des images transparentes sont censées être affichées (grâce à d'habiles classes ajoutées dans les templates huhu)
Il parcourt ensuite cette liste afin d'identifier chaque image transparente grâce à son url et y associer une nouvelle classe (à l'image ou à une balise parent) qui est en charge de l'affichage de la véritable image via le système de background.

Spoiler:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
http://fairynotail.forumactif.org
P
r
o
f
i
l
F
e
u
i
l
l
e
Contenu sponsorisé

Revenir en haut Aller en bas

[En cours] Petit tuto pour personnaliser les boutons sur chaque thème

Page 1 sur 1
Sujets similaires
-
» Petit jeu pour Paques............
» tuto pour des ongles brillants et lisses
» COURS DE GUITARE POUR NULS
» TUTO petit sac pour friandises
» petit texte pour les finissants

Sauter vers: