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

[mquert]

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 ! )

[mquert]

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