Connexion
Derniers sujets*
» [EDGE] Auto suggestion de la recherche
par tenrev Aujourd'hui à 15:13
» [EDGE] Coloriser la cellule vue dans la liste des sujets ....
par tenrev Mar 19 Jan 2021 - 21:31
» [TOUTES VERSIONS] Utiliser les variables utilisateur/forum
par tenrev Mer 30 Déc 2020 - 16:29
» [PHPBB3] Faire un menu déroulant dans le titre d'un forum ou d'un sous forum
par tenrev Mar 29 Déc 2020 - 12:04
» [PHPBB3] Afficher un bouton de navigation sur le premier et le dernier message
par tenrev Mar 29 Déc 2020 - 11:48
» [TOUTES VERSIONS] Toutes versions Bouton générateur d'iframes
par tenrev Mar 29 Déc 2020 - 11:46
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par tenrev Mar 29 Déc 2020 - 11:43
» [AWESOMEBB] Ajouter un bouton "S'enregistrer" en haut du forum
par Milouze14 Dim 27 Déc 2020 - 8:39
» [AWESOMEBB] Coloriser les cases Annonces & Notes
par Milouze14 Mer 23 Déc 2020 - 8:17
» [PHPBB2] Séparer les messages
par fanny Lun 21 Déc 2020 - 17:51
» [PHPBB2] Mettre en résolu via la réponse rapide
par fred9545 Dim 20 Déc 2020 - 10:48
» [PHPBB2]Supprimer le tag "Re" sur les messages
par fanny Dim 13 Déc 2020 - 22:22
» [PHPBB2] Mettre une couleur de fond dans le profil des messages
par fanny Dim 13 Déc 2020 - 13:26
» [EDGE] Afficher les forums de la catégorie dans la liste des sujets
par clost Sam 12 Déc 2020 - 10:27
» [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum
par Quad Daniel Sam 12 Déc 2020 - 8:53
» [TOUTES VERSIONS] Faire clignoter le chiffre ou le nombre de notification(s) dans la toolbar
par fanny Ven 11 Déc 2020 - 14:32
» [PHPBB2] Afficher un message en haut de sujet lorsqu'il est verrouillé
par fanny Jeu 10 Déc 2020 - 10:36
» [PHPBB2] Effet loupe sur chaque message
par fanny Jeu 10 Déc 2020 - 10:11
» [TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page
par fanny Mer 9 Déc 2020 - 8:27
» [PHPBB2]Afficher les statistiques dans la liste des membres
par fanny Mar 8 Déc 2020 - 9:26
par tenrev Aujourd'hui à 15:13
» [EDGE] Coloriser la cellule vue dans la liste des sujets ....
par tenrev Mar 19 Jan 2021 - 21:31
» [TOUTES VERSIONS] Utiliser les variables utilisateur/forum
par tenrev Mer 30 Déc 2020 - 16:29
» [PHPBB3] Faire un menu déroulant dans le titre d'un forum ou d'un sous forum
par tenrev Mar 29 Déc 2020 - 12:04
» [PHPBB3] Afficher un bouton de navigation sur le premier et le dernier message
par tenrev Mar 29 Déc 2020 - 11:48
» [TOUTES VERSIONS] Toutes versions Bouton générateur d'iframes
par tenrev Mar 29 Déc 2020 - 11:46
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par tenrev Mar 29 Déc 2020 - 11:43
» [AWESOMEBB] Ajouter un bouton "S'enregistrer" en haut du forum
par Milouze14 Dim 27 Déc 2020 - 8:39
» [AWESOMEBB] Coloriser les cases Annonces & Notes
par Milouze14 Mer 23 Déc 2020 - 8:17
» [PHPBB2] Séparer les messages
par fanny Lun 21 Déc 2020 - 17:51
» [PHPBB2] Mettre en résolu via la réponse rapide
par fred9545 Dim 20 Déc 2020 - 10:48
» [PHPBB2]Supprimer le tag "Re" sur les messages
par fanny Dim 13 Déc 2020 - 22:22
» [PHPBB2] Mettre une couleur de fond dans le profil des messages
par fanny Dim 13 Déc 2020 - 13:26
» [EDGE] Afficher les forums de la catégorie dans la liste des sujets
par clost Sam 12 Déc 2020 - 10:27
» [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum
par Quad Daniel Sam 12 Déc 2020 - 8:53
» [TOUTES VERSIONS] Faire clignoter le chiffre ou le nombre de notification(s) dans la toolbar
par fanny Ven 11 Déc 2020 - 14:32
» [PHPBB2] Afficher un message en haut de sujet lorsqu'il est verrouillé
par fanny Jeu 10 Déc 2020 - 10:36
» [PHPBB2] Effet loupe sur chaque message
par fanny Jeu 10 Déc 2020 - 10:11
» [TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page
par fanny Mer 9 Déc 2020 - 8:27
» [PHPBB2]Afficher les statistiques dans la liste des membres
par fanny Mar 8 Déc 2020 - 9:26
Les statistiques du forum
[PHPBB2] Onglets du profil façon invision
Page 1 sur 1 • Partagez
- Milouze14Fondateur

la modification que je vous donne aujourd'hui est prévue pour tous les onglets

On passera par un javascript avec tous les onglets prédéfinis

C'est à dire que si l'onglet Facebook (par exemple) n'est pas présent vous pourrez toujours l'activer,
ce dernier sera prit en compte dans le Javascript

On donnera ensuite l'apparence dans la C.S.S .
L'aperçu imagé :
![[PHPBB2] Onglets du profil façon invision 182](https://i.servimg.com/u/f56/11/26/21/37/182.png)
-Astuce des Forums Milouze14&Compagnie-
Pour toute information,merci de contacter un Membre du Staff | ![]() |
Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite comme:"Onglet profil façon Invision"
Cocher sur toutes les pages.
collez tout ce contenu:
- Code:
//ON DONNE UNE CLASS A LA BALISE GEN
$(function(){
$('
a.mainmenu[href^="/profile?mode=editprofile&page_profil=informations"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=preferences"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=signature"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=attachments"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=avatars"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=friendsfoes"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=notifications"],
a.mainmenu[href^="/search?search_id=watchsearch"],
a.mainmenu[href^="/search?search_id=favouritesearch"],
a.mainmenu[href^="/search?search_id=draftsearch"],
a.mainmenu[href^="/rpg_sheet_edit?"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=facebook"]').closest(".gen").addClass('M14');
});
//ON DONNE UNE CLASS A LA BALISE TD
$(function(){
$('
a.mainmenu[href^="/profile?mode=editprofile&page_profil=informations"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=preferences"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=signature"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=attachments"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=avatars"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=friendsfoes"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=notifications"],
a.mainmenu[href^="/search?search_id=watchsearch"],
a.mainmenu[href^="/search?search_id=favouritesearch"],
a.mainmenu[href^="/search?search_id=draftsearch"],
a.mainmenu[href^="/rpg_sheet_edit?"],
a.mainmenu[href^="/profile?mode=editprofile&page_profil=facebook"]')
.closest("td").addClass('M14_td');
});
//ON CREER UNE CELLULE AVEC UNE CLASS
$(function(){
$(".M14_td").closest("table").append("
<tr><td class='M14_ong_strong'><div></div>
</td></tr>");
});
//ON DONNE UNE CLASS AU TABLEAU
$(function(){
$(".M14_td").closest("table").addClass('M14_table');
});
//ON DEPLACE L ONGLET SELECTIONNE DANS LA CELLULE
$(function(){
$(".M14_td .gen strong ").clone().appendTo("td.M14_ong_strong div");
});
Pensez a cliquer sur le bouton

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Collez ceci:
- Code:
/*LE TABLEAU QUI COMPORTE L ENSEMBLE*/
.M14_table
{
border-collapse:collapse;/*on fusionne les bordures*/
}
/*LE BLOC DES ONGLETS*/
td.M14_td
{
text-align:right;/*on place les onglets a droite*/
background:#333333;/*la couleur de fond*/
padding:4px;/*on donne un espace */
}
/*ON CACHE LES TRAITS VERTICAUX AVEC LA MEME COULEUR QUE LE BACKGROUND PRECEDENT*/
td.M14_td span.gen.M14, td.M14_td span.gen
{
color:#333333 !important;/*on donne une couleur de police */
}
/*LES LIENS DES ONGLETS*/
td.M14_td a.mainmenu
{
text-decoration:none !important;/*on supprime le soulignement*/
color:#666666 !important;/*on donne une couleur de police*/
font-size:10px !important;/*on donne une taille de police*/
padding: 4px 6px;/*on donne un espace */
margin-left: -5px;
margin-right: -5px;
}
/*LES ONGLETS SELECTIONNES*/
td.M14_td span.gen strong
{
color:#ffffff !important;/*on donne une couleur de police*/
font-size:10px !important;/*on donne une taille de police*/
background-color: #303B4A;/*on demande une couleur de fond*/
padding: 4px 6px;/*on donne un espace */
}
/*LE BLOC DE L ONGLETS SELECTIONNE*/
td.M14_ong_strong
{
background-color: #303B4A;/*on demande une couleur de fond*/
}
/* L ONGLET SELECTIONNE DANS LA PARTIE BASSE*/
td.M14_ong_strong div
{
padding: 4px 6px;/*on donne un espace */
font-size:10px !important;/*on donne une taille de police*/
color:#666666 !important;/*on donne une couleur de police*/
margin-left:10px;/*on decale vers la droite de 10px;*/
}
Pensez à valider les modifications en cliquant sur le bouton

La C.S.S est commentée pour vos éventuels changements .
Soyez vigilants sur le troisième commentaire car la class correspondante
cache les traits verticaux .
Il faut que le background et cette class est la même couleur

Ici

- Code:
/*LE BLOC DES ONGLETS*/
td.M14_td
{
text-align:right;/*on place les onglets a droite*/
background:#333333;/*la couleur de fond*/
}
/*ON CACHE LES TRAITS VERTICAUX AVEC LA MEME COULEUR QUE LE BACKGROUND PRECEDENT*/
td.M14_td span.gen.M14, td.M14_td span.gen
{
color:#333333;/*on donne une couleur de police */
}
Voilà,c'est tout pour le moment.
Un soucis?
Direction l'entraide

https://www.milouze14.com/f108-entraide-tous-supports
Dernière édition par Milouze14 le Ven 21 Fév 2020 - 16:59, édité 7 fois
- InvitéInvité
Merci Phil
- AenigmaMilouzien
Merci Philippe, par curiosité.
- InvitéInvité
Merci
- fleur78Milouzien
a voir
- ThunderTBMilouzien
Merci
- Eczema HelpMilouzien
Super !
- DadaMilouzien
Merci beaucoup !
- InvitéInvité
Merci
- InvitéInvité
Merci beaucoup !
- 1baptisteMilouzien
Merci beaucoup !
- mariokMembre regretté
Merci beaucoup !
- 1baptisteMilouzien
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
- SachaMilouzien
Merci beaucoup !
- TrancheesMilouzien
Merci beaucoup !
- Grande013Milouzien
Merci beaucoup !
- clostMilouzien
merci à toi 

- Gypsy Water.Milouzien
Merci beaucoup !
- dragon594Milouzien
Merci beaucoup !
- Queen G.Milouzien
Superbe merci **
- KaeylaMilouzien
Merci beaucoup !
- ChocolatineMilouzien
Merci beaucoup !
- Psychotic BitchMilouzien
Merci beaucoup !
Sujets similaires internes ( 0 )
Aucun sujet
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum