lagrace

résolu aide collapse category

Add-on xenforo 2

Ressources et modules complémentaires pour XenForo 2

Styles xenforo 2

Styles / Thèmes et apparence pour xenforo 2

Templates xenforo 2

Codes pour modifier les templates sur xenforo 2

Section Premium

Add-on et Styles pour membre Premium
lagrace

résolu aide collapse category

Catégorie Catégorie Questions & Aides
Titre du sujet Titre du sujet aide collapse category
Auteur de la discussion Auteur de la discussion lagrace
Date de début Date de début
Réponses Réponses 10
Affichages Affichages 374
Réaction Réaction 0
Dernier message par Dernier message par MasterMan
lagrace

lagrace

Membre suprême

Donateur
VIP
Réputation: 71%
Discussions
22
Messages
504
Solutions
4
J'aime
140
Points
63
140 63 4 504
bonjour quelle est l astuce pour avoir les titres de categories centree avec l addon ALMUSA-CollapsibleCategory-2.5.0 merci

téléchargement.png
 
Demande pour icone FA
résolu  Demande pour icone FA
aide nodeicontweak
résolu  aide nodeicontweak
Solution
MasterMan
J'ai condensé le code pour une utilisation plus facile

Pour le centrage et les paramètres pour le FA sur toute les Catégories

Code: 
/* On répète ce code qu'une seul fois */
.block--category .block-header--left {
    text-align: center;
    margin: auto;
    &::before {
        display: inline-block;
        padding-right: 5px;
    }
}

On affiche le FA pour les Catégories

Code: 
.block--category{
    .m-faBase('Pro',@faWeight-solid);
    /* Affichage du FA pour la Catégorie 1 */
    &1 .block-header--left::before {
        .m-faContent("@{fa-var-gamepad}");
    }
    /* Affichage du FA pour la Catégorie 12 */
    &12 .block-header--left::before {
        .m-faContent("@{fa-var-helicopter}");
    }
}

Pour rappel:

Valeurs de la...
Trier par date Trier par votes
ca ne fonctionne pas non plus difficile ce code de l addon voici les modifs dans le template de cet addon

CSS: 
<?xml version="1.0" encoding="utf-8"?>
<template_modifications>
  <modification type="public" template="node_list.less" modification_key="Collapsible_Category_css" description="CSS to stylize Collapsible category" execution_order="10" enabled="1" action="str_replace">
    <find><![CDATA[    li li .subNodeLink { padding-left: 1.5em; }
    li li li .subNodeLink { padding-left: 3em; }
    li li li li .subNodeLink { padding-left: 4.5em; }
    li li li li li .subNodeLink { padding-left: 6em; }
    li li li li li li .subNodeLink { padding-left: 7.5em; }
}]]></find>
    <replace><![CDATA[$0
/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}

.block-body.block-body--collapsible
{
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}]]></replace>
  </modification>
  <modification type="public" template="node_list_category" modification_key="2nd_tm" execution_order="10" enabled="1" action="str_replace">
    <find><![CDATA[<h2 class="block-header">
]]></find>
    <replace><![CDATA[$0
<div class="block-header--left">
]]></replace>
  </modification>
  <modification type="public" template="node_list_category" modification_key="3rd_tm" execution_order="10" enabled="1" action="str_replace">
    <find><![CDATA[<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
]]></find>
    <replace><![CDATA[$0</div>]]></replace>
  </modification>
  <modification type="public" template="node_list_category" modification_key="4th_tm" execution_order="10" enabled="1" action="str_replace">
    <find><![CDATA[            </h2>]]></find>
    <replace><![CDATA[<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-storage-expiry="31556926" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
$0]]></replace>
  </modification>
  <modification type="public" template="node_list_category" modification_key="5th_tm" execution_order="10" enabled="1" action="str_replace">
    <find><![CDATA[<div class="block-body">]]></find>
    <replace><![CDATA[<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">]]></replace>
  </modification>
  <modification type="public" template="node_list_category" modification_key="Collapsible_Category" description="modification to add Collapsible Category to node list" execution_order="10" enabled="1" action="str_replace">
    <find><![CDATA[<div class="block block--category block--category{$node.node_id}">]]></find>
    <replace><![CDATA[<div class="block block--category block--category{$node.node_id} collapsible-nodes">]]></replace>
  </modification>
</template_modifications>
 
Upvote 0
Essai avec ceci

Less: 
.block-header--left {
    text-align: center;
}

ou

Less: 
.block-header {
    text-align: center;
    &--left {
        text-align: center;
    }
}
 
Upvote 0
oui laurent ton code fonctionne mais l icone FA reste a gauche lol quel casse tete ce truc
téléchargement.png
Message fusionné automatiquement :

ok j ai trouve faut que j ajoute ceci --left dans le code pour les fa categories

Code: 
/*icones FA aux titres de vos catégories*/
.block--category1 .block-header--left:before {
    content: "\f4ad";
    font-family: 'Font Awesome 5 Pro';
    display: inline-block;
    padding-right: 5px;   
    }
 
Dernière édition:
Upvote 0
J'ai condensé le code pour une utilisation plus facile

Pour le centrage et les paramètres pour le FA sur toute les Catégories

Code: 
/* On répète ce code qu'une seul fois */
.block--category .block-header--left {
    text-align: center;
    margin: auto;
    &::before {
        display: inline-block;
        padding-right: 5px;
    }
}

On affiche le FA pour les Catégories

Code: 
.block--category{
    .m-faBase('Pro',@faWeight-solid);
    /* Affichage du FA pour la Catégorie 1 */
    &1 .block-header--left::before {
        .m-faContent("@{fa-var-gamepad}");
    }
    /* Affichage du FA pour la Catégorie 12 */
    &12 .block-header--left::before {
        .m-faContent("@{fa-var-helicopter}");
    }
}

Pour rappel:

Valeurs de la taille de la police Awesome par défaut

@faWeight-solid ==> 900
@faWeight-regulard ==> 400
@faWeight-light ==> 300
 
Upvote 0
Solution
Vous devez vous connecter
ou vous inscrire pour répondre ici.
Contenu similaire Les plus vues Voir plus

À propos de nous

Societyfrenchmodding est une communauté Francophone de libres discussions à propos des jeux, xenforo, modding et actualités ...etc

Statistiques en ligne

Membres en ligne
2
Visiteurs en ligne
68
Total de visiteurs
70
Nombre total incluant les visiteurs cachés.

Partager cette page

Restez connecté

Retour
Haut Bas