Site officiel français Artisteer

Themler et les contrôles Positions

Le contrôle Position Joomla doit contenir un module. Ce module se paramètre dans le backend Joomla.

Le nom de la position peut être changé dans Themler.

Attribution d’un module à une position Joomla

Pourquoi le bloc du contrôle Position est-il vide ?

Dans Themler (CMS ou Desktop) :

  • Vous ajoutez un contrôle Position Joomla. Themler ajoute par exemple position-5.
  • Vous appliquez un style de bloc à ce contrôle.

Mais le bloc est vide et vous ne visualisez pas le rendu graphique du bloc.

En effet, si le contrôle position-5 ne s’est vu assigner aucun module dans le CMS Joomla, vous ne verrez rien.

Themler contrôle position joomla

Il vous faut alors paramétrer un module pour cette position avec le gestionnaire de modules dans le backend Joomla.

Comment visualiser le style d’une position ?

Themler attribue automatiquement un numéro à la position Joomla lorsque vous ajoutez une position. Plus exactement il incrémente à chaque fois un nouveau numéro : position-5, position-6… Vous pouvez directement modifier le nom de la position dans Themler. Par exemple vous pouvez remplacer position-5 par position-6 ou par footer-4… à vous de définir vos positions.

Si vous remplacez par exemple position-5 par position-6, vous voyez alors du contenu s’afficher pour cette position, car dans le CMS Joomla packagé avec Themler Desktop des modules sont déjà assignés par défaut à cette position.

Themler contrôle position joomla

Si vous ne voulez pas paramétrer des modules dans le CMS Joomla fourni avec Themler Desktop, alors vous pouvez changer temporairement les noms de certaines des positions Joomla dans Themler en leur attribuant des noms de positions pour lesquelles des modules sont paramétrés par défaut, afin de visualiser le rendu graphique des styles de blocs appliqués.

Même si vous travaillez avec Themler Desktop, et que vous voulez voir le rendu graphique des blocs, il vous faut paramétrer des modules « exemples » dans le backend du CMS fourni avec Themler Desktop.

Installer un Thème Themler dans WordPress (Partie 1)

Installation via le panneau Admin (template zippé)

Pour installer le template téléchargé (.zip) via le panneau d’administration WordPress, merci de vouloir suivre ces étapes :

1. Connectez-vous à votre administration WordPress.

2. Sélectionnez le panneau Apparence, puis Thèmes.

3. Sélectionnez Ajouter.

4. Choisissez Mettre un thème en ligne.

5. Cliquez le bouton Choisissez un fichier pour sélectionner le fichier zip sur votre ordinateur et cliquez sur le bouton Installer.

6. Cliquez sur Activer pour que le thème devienne le thème par défaut.

installer un thème Themler pour WordPress

Remarque : Avant d’installer un nouveau thème, assurez-vous qu’il n’y a pas déjà un thème installé portant le même nom. Si un autre thème avec le même nom existe déjà, renommez-le ou supprimez-le avant d’installer le nouveau thème.

Evaluez vos connaissances Artisteer 4

Connaissez-vous bien Artisteer 4 ?

Ce quiz sur Artisteer 4 vous permet de tester vos connaissances et également de réviser les fondamentaux.

Ce petit module a été réalisé avec la solution auteur iSpring Suite 8.

quiz Artisteer 4

Si vous n’avez pas réussi ce quiz, replongez-vous dans les ressources Artisteer. Il est essentiel de bien comprendre les concepts de base d’Artisteer.

Vous pensez avoir besoin de suivre une formation à Artisteer ? Nous proposons désormais un programme de formation à Artisteer 4 avec deux formules : la formule traditionnelle en présentiel (formation intra-entreprise) et la formule e-Learning.

Avec la formule e-Learning, vous suivez le programme de formation à Artisteer 4 de manière autonome. Vous vous formez où vous voulez et quand vous voulez. Les modules e-Learning sont accessibles depuis un ordinateur, un tablette ou un smartphone, 24 heures sur 24, et 7 jours sur 7.

Changer l’image du curseur de la souris dans Artisteer

Vous pouvez changer l’image du curseur de la souris sur le survol (hover) d’un élément en ajoutant tout simplement du code CSS supplémentaire dans Artisteer.

Nous allons vous expliquer comment procéder, mais avant de commencer, nous vous invitons à relire l’article intitulé Artisteer et le CSS.

Changer le curseur de la souris

Etapes

1. Ouvrez votre template dans Artisteer.

2. Sélectionnez le menu Fichier > Exporter > Options…

3. Dans la fenêtre Options cliquez sur Options CCS, et dans la zone Styles supplémentaires renseignez le code CSS suivant :

a:hover
 {
 cursor:crosshair!important;
 }

changer l'image du curseur dans Artisteer

4. Validez en cliquant sur le bouton OK.

Prévisualiser la modification

Vous pouvez prévisualiser le comportement dans un navigateur web.

Dans Artisteer, sélectionnez le menu Fichier > Aperçu dans le Navigateur.

Le curseur de la souris au survol d’un élément cliquable est désormais représenté par une croix (crosshair).

changer l'image du curseur dans Artisteer

Ajouter des Sections dans Themler

Ajouter une nouvelle section à un template ou une page dans Themler est désormais plus facile que jamais.

Etapes pour ajouter des sections dans Themler

S’applique à Themler V.319.

Etape 1

Cliquez sur l’icône vert + pour ajouter une Section Contenu à la page ou sur l’icône bleu + pour ajouter une Section au template.

Themler ajout section

Etape 2

Choisissez une Section parmi les centaines de sections disponibles.

Themler ajout section

Etape 3

Editez les éléments et leurs options.

Themler ajout section

Remplacer l’Image d’Arrière-Plan de l’En-tête du Template Artisteer en Mode RWD

Les templates Artisteer sont par défaut responsive (RWD), mais certaines images ne le sont pas complètement. Une solution consiste alors à remplacer l’image par une couleur, dès lors que la taille de l’écran est inférieure à une taille donnée.

Ajout de Code CSS Personnalisé pour modifier l’Image d’Arrière-Plan de l’En-tête

Vous pouvez ajouter du code CSS personnalisé à votre template Artisteer directement dans Artisteer.

Cliquez sur le menu Fichier > Exporter > Options… puis sur Options CSS pour afficher la fenêtre vous permettant d’ajouter du code personnalisé.

Le code ajouté dans les Options CSS (Styles CSS supplémentaires) est sauvegardé avec votre projet Artisteer (fichier .artx). Lorsque vous réouvrez votre projet Artisteer, le code est toujours présent et vous pouvez le modifier à tout moment.

Remplacement de l’Image d’Arrière-plan de l’En-tête par une Couleur

Si vous voulez supprimer l’image d’arrière-plan de l’en-tête pour tous les supports dont la taille de l’écran est inférieure à 799 pixels et la remplacer par une couleur d’arrière-plan, il vous suffit d’ajouter le code personnalisé suivant (menu Fichier > Exporter > Options… > Options CSS) :

@media (max-width: 799px)
{
#art-header
{
background-image: none !important;
background-color: #DBBEA5;
}
}

Le paramètre max-width détermine la largeur maximum de l’écran. Vous pouvez changer cette valeur.

Renseignez le code couleur voulu pour le paramètre background-color.

Lorsque vous visualiserez le site sur un écran dont la largeur de l’écran est supérieure à 799 pixels, l’image d’arrière-plan de l’en-tête du template s’affichera. Dès lors que vous le visualiserez sur des supports (tablettes, smartphones…) dont la largeur de l’écran est inférieure à 799 pixels, l’image d’arrière-plan de l’en-tête du template sera remplacée par la couleur de remplissage paramétrée.

Visualisation de l’En-tête dans la Vue Responsive

Vous pouvez vérifier ce comportement avec la Vue Responsive disponible dans Artisteer.