artisteer-france.fr

Le Site Officiel Français d'Artisteer

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.

 

Artisteer 4.3 build 60902 supporte Joomla 3.5

Support du CMS Joomla 3.5

Artisteer 4.3 (dernier build en date : 60902) supporte Joomla 3.5.

Lorsque vous exportez pour Joomla, vous devez choisir Version : 3.2-3.3 (on devrait lire à partir de la v.3.2) :

export Joomla dans Artisteer 4.3

Au moment de l’export une connexion au serveur Artisteer se fait et le template est mis à jour.

Rappel

A partir de la version 4.2, Artisteer requiert de disposer d’une connexion internet lors de l’export des templates Joomla, WordPress et Drupal.

Certaines fonctionnalités du logiciel Artisteer ont été « déplacées » sur un serveur en ligne. Dans l’ensemble, Artisteer 4.2 fonctionne de la même manière que précédemment, MAIS vous devez être connecté(e) à internet lors de l’export des templates.

Insérer et Paramétrer un Contrôle Recherche dans un template Artisteer

Nous allons vous expliquer comment insérer et paramétrer un contrôle Recherche dans un template Artisteer.

Vous noterez que certaines options avancées (dialogues de valeurs personnalisées) ne sont pas disponibles avec Artisteer édition Personnel.

Insérer le Contrôle Rechercher

1. Cliquez sur l’onglet En-tête du ruban

2. Dans la section Insérer de l’onglet En-tête, cliquez sur Contrôles pour ouvrir le menu déroulant :

ajout contrôle rechercher dans Artisteer

3. Cliquez sur Rechercher

Si le contrôle Rechercher est en grisé dans le menu, cela signifie qu’il est déjà présent dans l’en-tête.

Le contrôle est automatiquement ajouté dans l‘en-tête du template.

contrôle rechercher dans l'en-tête du template Artisteer

4. Cliquez sur le contrôle Rechercher dans la zone de prévisualisation pour le sélectionner et déplacez-le au sein de l’en-tête pour le positionner à l’endroit souhaité.

Paramétrer le Contrôle Rechercher

Le style de ce contrôle peut être paramétré.

1. Cliquez sur l’onglet Contrôles du ruban

2. Dans la section Contrôles de l’onglet Contrôles, cliquez sur Rechercher pour ouvrir le menu déroulant qui vous propose 7 options, dont 6 styles graphiques :

styles du contrôle rechercher dans Artisteer

3. Sélectionnez le style voulu, il est alors automatiquement appliqué au contrôle Rechercher, ce que vous pouvez vérifier dans la zone de prévisualisation.

La dernière option de ce menu déroulant (Plus d’options…) vous permet d’afficher la fenêtre Options de recherche. Cette fenêtre s’affiche en tant que panneau à droite de la zone de prévisualisation ou en tant que fenêtre flottante. Ces options ne sont pas disponibles pour l’édition Personnel.

options avancées du controle rechercher dans Artisteer

Vous pouvez alors paramétrer ce contrôle à votre guise :

  • Commande de recherche : c’est là que vous renseignez la largeur, la hauteur et le rayon de la zone de saisie pour le texte de recherche.
  • Remplissage et Transparence : vous paramétrez la couleur et/ou la transparence de la zone de saisie ainsi que le style du texte.
  • Bordure : Vous définissez la bordure de la zone de saisie (type de bordure, épaisseur, couleur et transparence).
  • Dégradé : Vous appliquez un style de dégradés à partir de la galerie de dégradés et vous paramétrez le contraste en pourcentage.
  • Ombre : Vous spécifiez une ombre en réglant le flou, la transparence, la distance et l’angle.
  • Bouton : Vous paramétrez l’icône recherche du contrôle, à savoir l’image de l’icône (sélection à partir de la galerie ou insertion d’un de vos fichiers image), sa couleur, et le style du texte de l’icône.
  • Texture

Vous noterez que certaines options peuvent être grisées (désactivées) si elles ne peuvent pas être appliquées.

Par exemple, si sur le bouton du contrôle Recherche vous mettez un icône alors l’option 2ème couleur ne sera pas active. Or si vous ne mettez pas d’icône, l’option 2ème couleur sera active.

Changer la Couleur de l’Elément Actif du Menu Horizontal dans Themler

Ce tutoriel vous explique comment changer la couleur de l’élément actif du Menu Horizontal d’un template réalisé avec Themler. Il a été réalisé avec Themler V.208.

Assurez-vous que vous disposez bien d’une version récente de Themler dans la mesure où Themler propose désormais une interface utilisateur simplifiée. Si ce n’est pas le cas, merci de vous référer à cet article pour faire la mise à jour.

Etapes pour modifier l’arrière-plan d’un élément actif du Menu Horizontal

Etape 1

Cliquez sur un élément du Menu Horizontal (1).

L’onglet Horizontal Menu s’active alors automatiquement dans le ruban. Il présente toutes les options disponibles pour paramétrer le Menu Horizontal.

L’élément sélectionné du template s’affiche en gras dans l’onglet actif du ruban. Ici Menu et Menu Item (Elément de menu).

Options de l'onglet Menu Horizontal du ruban

Capture 1

Le Menu Horizontal est constitué de la barre de menu et des éléments du menu. Un élément de menu peut contenir une barre de sous-menu (submenu) et des éléments de sous-menu (subitem).

Etape 2

Options de l'élément de menu actif du Menu Horizontal Themler

Capture 2

Cliquez sur l’option Active (2) pour afficher les options d’arrière-plan de l’Elément de menu dans son état Actif.

Un menu déroulant s’affiche avec toutes les options disponibles pour paramétrer l’élément actif du menu, regroupées en catégories :

  • Arrière-plan : Pot de peinture, Dégradé, Image
  • Bordure : Bordure, Coins, Ombre & Lueur
  • Texte : Police, Paragraphe
  • Disposition : Remplissage, Marge
  • Icône : Image, Forme
  • Plus d’options

Les mêmes options sont disponibles pour l’état Hover (survol de la souris) du menu.

L’interface de Themler n’étant pas encore disponible en français, nous avons traduit les principales options (voir Capture 2).

Etape 3

Cliquez sur l’option Fill (3) pour accéder aux options de remplissage de couleur de l’Elément de menu quand il est dans l’état Actif.

Vous pouvez alors changer sa couleur et vous verrez automatiquement la modification de couleur s’appliquer sur le menu, comme illustré ci-dessous (Capture 3).

menu horizontal Themler

Capture 3

Changer l’arrière-plan d’un sous-élément du Menu Horizontal

Pour modifier les attributs graphiques des sous-menus, il vous suffit de sélectionner un sous-élément (par exemple FAQ), ce qui activera l’onglet Menu Horizontal du ruban et mettra en gras Submenu (Sous-menu) et Subitem (Sous-Elément). Cf. Etape 1. Poursuivez comme décrit dans les étapes 2 et 3.

Supprimer le Menu Horizontal

Pour supprimer le Menu Horizontal du template, il suffit de cliquer sur la croix à droite du libellé Horizontal Menu (4). Voir capture 3.

Arborescence

L’élément du template sélectionné (ici le Menu Horizontal) est affiché dans une arborescence au bas de la fenêtre (5). Voir capture 3.

L’arborescence Header (All Templates) > Section > Container >Horizontal Menu signifie que le Menu Horizontal est dans un Conteneur qui se trouve dans une Section, qui elle-même est dans l’En-tête. Et cet En-tête est commun à tous les templates du thème Themler. L’arborescence vous aide à mieux comprendre l’imbrication des différents éléments.

Astuce : Si vous cliquez sur l’un des éléments de l’arborescence, par exemple Section alors l’onglet Section s’affichera automatiquement dans le ruban.

Newsletter Kapitec

Abonnement

Les champs en gras sont obligatoires.