Tuto pour ajouter des suffixes de classe >>> Artisteer 3.1

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Astuce] Tuto pour ajouter des suffixes de classe >>> Artisteer 3.1

    Bonjour,

    Récemment je découvre artisteer 3.1, pas trop compliqué d'utilisation pour qui veut se faire un ou plusieurs templates, même si au niveau "codage", il n'est pas vraiment plébiscité par les spécialistes. Je fais donc plusieurs essais de template, et cela marche bien, je découvre même que la dernière version mise à jour me permet de créer des templates pour joomla 2.5.

    Mais voilà, artisteer ne propose pas de pouvoir appliquer plusieurs suffixes de classe aux modules et on se retrouve avec 2 formatages possibles : soit art-nostyle (pas de block, juste le texte), soit art-block (block comme défini dans artisteer). En clair, les blocs sont soit texte seul, soit tous de la même couleur/forme/police etc. Chacun ses goûts, mais je trouve que ça fait lourd (et assez vintage) d'avoir partout les blocs de la même couleurs

    Alors en cherchant sur ce forum, j'ai fini par trouver un petit tuto que j'ai voulu appliquer... pour voir ! Cela n'a pas très bien fonctionné, et à vrai dire pas du tout, mais je n'ai pas laissé tombé et j'ai essayé (alors que je n' y connais rien de rien en codage !) de voir et de comprendre la "logique" de la démarche, et j'y suis arrivé, c'est pourquoi je propose un tutoriel à tous ceux qui en auraient besoin avec artisteer version 3.1 je précise.

    Si vous vous lancez, faites donc un retour ici pour vérifier la bonne marche des événements chez vous aussi... merci !

    Je reprend le début avec des copié/collé du post (qui m'a bien aidé) de laplume, et auquel j'ajoute quelques précisions :

    Fonctionne avec Artisteer 3.1

    Première étape : ouvrir le fichier /html/modules.php
    Chercher ce bout de code en début de fichier.
    On part du principe qu'on va faire un style "art-block2".


    >>>Vous pouvez suivre ce tutoriel en créant directement plusieurs suffixe : il faut donc multiplier les opérations pour chaque suffixe créé (ex j'ai créé art-block2 et art-block3 chez moi, et je compté bien renouveler en créant art-block4 et art-block5

    Code PHP:
    'art-nostyle' => 'modChrome_artnostyle',
    'art-block' => 'modChrome_artblock',
    'art-article' => 'modChrome_artarticle',
    'art-vmenu' => 'modChrome_artvmenu'
    Ajouter en fin de cette liste (bien sûr à adapter en fonction du nom de votre choix ):
    Code PHP:

    'art-block2' => 'modChrome_art-block2'
    Edit : Il ne faut pas oublier de mettre la virgule à la fin de la ligne au dessus


    Ensuite, dans le même fichier, faire une copie de ces lignes :


    Code PHP:
    function modChrome_artblock($module, &$params, &$attribs)
    {
    if (!empty ($module->content))
    echo artxBlock(($module->showtitle != 0) ? $module->title : '', $module->content);
    }
    Et coller la copie juste en-dessous puis modifier ainsi :

    Code PHP:
    function modChrome_art-block2($module, &$params, &$attribs)
    {
    if (!empty ($module->content))
    echo artxBlock2(($module->showtitle != 0) ? $module->title : '', $module->content);
    }
    Astuce : A reproduire autant de fois que de suffixes à créer

    Deuxième étape : Ouvrez le fichier function.php en racine du template et chercher ce morceau de code de la ligne 79 à 120... ou chez moi à partir de la ligne 64

    Code PHP:
    function artxBlock($caption, $content)
    {
    $hasCaption = ($GLOBALS['artx_settings']['block']['has_header']
    && null !== $caption && strlen(trim($caption)) > 0);
    $hasContent = (null !== $content && strlen(trim($content)) > 0);

    if (!$hasCaption && !$hasContent)
    return '';

    ob_start();
    ?>
    <div class="art-block">
    <div class="art-block-tl"></div>
    <div class="art-block-tr"></div>
    <div class="art-block-bl"></div>
    <div class="art-block-br"></div>
    <div class="art-block-tc"></div>
    <div class="art-block-bc"></div>
    <div class="art-block-cl"></div>
    <div class="art-block-cr"></div>
    <div class="art-block-cc"></div>
    <div class="art-block-body">

    <?php if ($hasCaption): ?>
    <div class="art-blockheader">
    <div class="t">
    <?php echo $caption; ?>
    </div>
    </div>

    <?php endif; ?>
    <?php if ($hasContent): ?>
    <div class="art-blockcontent">
    <div class="art-blockcontent-body">
    <!-- block-content -->

    <?php echo artxReplaceButtons($content); ?>

    <!-- /block-content -->

    <div class="cleared"></div>
    </div>
    </div>

    <?php endif; ?>

    <div class="cleared"></div>
    </div>
    </div>

    <?php
    return ob_get_clean();
    }
    Même principe... Copier toute la fonction et coller juste en dessous, en y remplaçant tout les appels de type "art-block" (-blockcontent,-blockheader...), par "art-block2".
    art-blockcontent devient art-block2content
    art-blockheader devient art-block2header
    art-block-tl devient art-block2-tl...
    Ainsi de suite.


    Ne pas oublier de le faire pour le nom de la fonction : "artxBlock" devient "artxBlock2"

    Attention : ne pas modifier cette ligne "<?php echo artxPostprocessBlockContent($content); ?>" block reste block même pour art-block2 ou art-block3 si vous en créez plusieurs.

    Astuce : à répéter également pour chaque suffixe à créer

    Troisième étape : Ouvrir votre fichier /css/template.css
    Il faut copier/coller toutes les appels de type .art-block et modifier le nom :


    Code PHP:

    .art-block
    {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    min-width: 7px;
    min-height: 7px;
    }
    Devient (ne pas supprimer le .art-block initial bien sûr) :


    Code PHP:

    .art-block2
    {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    min-width: 7px;
    min-height: 7px;
    }
    Et ceci pour toutes les déclinaisons .art-blockxxx , .art-blockcontent, art-block-tl... Ce qui va vous donner donc au moins deux styles dans votre css, le .art-block (celui de base généré par Artisteer) et le art-block2 (ou plus si vous avez multiplié les suffixes en suivant ce tuto)".

    Astuce : pour aller vite et précis... dans l'éditeur de texte, se placer au début du document template.css et lancer la séquence simultanée de touches clavier "ctrl f". Dans le pop up qui apparaît indiquer ".art-block" et lancer la recherche. Chaque appel ".art-block" est ainsi surligné... il suffit de copier les mêmes appels ou lignes, ensuite de les coller juste en-dessous ou à la suite et d'en modifier le contenu avec le nouveau suffixe. Evidemment toujours, à reproduire pour chaque suffixe créé.

    Quatrième étape : toujours dans le template.css, changer les modèles de block pour chaque nouveau suffixe créé en faisant copie (si ce n'était déjà fait) de ce code :

    /* begin Box, Block */
    .art-block
    {
    max-width:1728px;
    margin: 10px;
    }
    .art-block-body
    {
    padding:5px;
    min-width:2px;
    min-height:2px;
    }
    .art-block:before, .art-block:after
    {
    content: url('../images/block_t.png');
    font-size: 0;
    background-image: url('../images/block_b.png');
    }
    .art-block:after{
    clip:rect(auto, auto, auto, 1722px);
    }
    .art-block:before,.art-block-body:before{
    right:6px;
    }
    .art-block-body:after{
    width: 6px;
    top:6px;
    bottom:6px;
    background-image:url('../images/block.png');
    }
    .art-block-body:before{
    top:6px;
    bottom:6px;
    background-image:url('../images/block.png');
    }

    div.art-block img
    {
    /* WARNING do NOT collapse this to 'border' - inheritance! */
    border-width: 0;
    margin: 0;
    }

    /* end Box, Block */
    Ensuite, coller la copie juste en dessous en modifiant comme ceci :

    /* begin Box, Block2 */
    .art-block2
    {
    max-width:1728px;
    margin: 10px;
    }
    .art-block2-body
    {
    padding:5px;
    min-width:2px;
    min-height:2px;
    }
    .art-block2:before, .art-block2:after
    {
    content: url('../images/block2_t.png');
    font-size: 0;
    background-image: url('../images/block2_b.png');
    }
    .art-block2:after{
    clip:rect(auto, auto, auto, 1722px);
    }
    .art-block2:before,.art-block2-body:before{
    right:6px;
    }
    .art-block2-body:after{
    width: 6px;
    top:6px;
    bottom:6px;
    background-image:url('../images/block2.png');
    }
    .art-block2-body:before{
    top:6px;
    bottom:6px;
    background-image:url('../images/block2.png');
    }

    div.art-block2 img
    {
    /* WARNING do NOT collapse this to 'border' - inheritance! */
    border-width: 0;
    margin: 0;
    }

    /* end Box, Block2 */

    Astuce : répéter la même opération pour chaque suffixe à créer

    >>> Suite dans le prochain post (trop de caractères... non pas moi... quoique... les lettres ! )

  • #2
    Re : Tuto pour ajouter des suffixes de classe &gt;&gt;&gt; Artisteer 3.1

    La suite (si, si !)

    Dernière étape : définir les couleurs spécifiques de bloc pour chaque suffixe créé :

    allez dans le dossier template/votretemplates/images et ouvrez les fichiers suivants avec votre logiciel de retouche graphique préféré :

    block.png | block_b.png | block_t.png

    Modifiez la couleur de remplissage des lignes dans chaque fichier (utiliser la fonction zoom si vous ne voyez rien comme couleur) en utilisant la même pour chaque fichier.

    Sauvegardez ensuite ces fichiers dans le même répertoire template/votretemplates/images sous les nouveaux noms de fichiers .png définis dans l'étape précédente du template.css

    block2.png | block2_b.png | block2_t.png
    Astuce : répéter l'opération pour chaque suffixe créé

    Voilà, je me doute bien que cela n'est pas conventionnel, ou pourrait faire hurler plus d'un codeur, mais au moins cela a le mérite de permettre un peu de "moderniser l'aspect" et d'assouplir l'utilisation d'un template créé avec artisteer.

    En tout cas pour l'utiliser ensuite, il ne vous reste plus qu'à insérer le suffixe de classe dans le champ approprié des modules joomla pour obtenir des blocs aux couleurs personnalisées.

    Précision : le style "art-vmenu" est le style qui gère le modèle de menu choisi lors de la création du Template. C'est donc un style à part, qui ne rentre pas dans le cadre de cette procédure.

    J'espère que cela aidera... et si vous y arrivez, montrez-le !

    A+
    mquert

    Commentaire

    Annonce

    Réduire
    1 sur 2 < >

    C'est [Réglé] et on n'en parle plus ?

    A quoi ça sert ?
    La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

    Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

    Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
    Comment ajouter la mention [Réglé] à votre discussion ?
    1 - Aller sur votre discussion et éditer votre premier message :


    2 - Cliquer sur la liste déroulante Préfixe.

    3 - Choisir le préfixe [Réglé].


    4 - Et voilà… votre discussion est désormais identifiée comme réglée.

    2 sur 2 < >

    Assistance au forum - Outil de publication d'infos de votre site

    Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

    Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

    Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

    UTILISER À VOS PROPRES RISQUES :
    L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

    Problèmes connus :
    FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

    Installation :

    1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

    Archive zip : https://github.com/AFUJ/FPA/zipball/master

    2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

    3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

    4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

    5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

    6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
    et remplacer www. votresite .com par votre nom de domaine


    Exemples:
    Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
    Télécharger le script fpa-fr.php dans: /public_html/
    Pour executer le script: http://www..com/fpa-fr.php

    Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
    Télécharger le script fpa-fr.php dans: /public_html/cms/
    Pour executer le script: http://www..com/cms/fpa-fr.php

    En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

    Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
    Voir plus
    Voir moins
    Travaille ...
    X