Personnalisation Thème

La compréhension des termes employés pour la personnalisation du thème


Une fois que l'on à choisi un Thème pour concrete5, il serait bien de comprendre tous ses paramétrages. Et il y en a beaucoup.

Outre l'agencement des pages, (pleines pages ou pages divisées en colonnes) il y a l'aspect du site web en lui-même.

  • Les couleurs
  • La taille des caractères, des liens
  • Le corps
  • La navigation
  • En-tête
  • Bannière
  • Page Info
  • Main
  • Le pied de page
  • La typographie
  • Les boutons

Et, comme si cela ne suffisait pas, un moyen de personnaliser vous-même le CSS3. (Qui permet de créer et gérer le style visuel)

J'ai sélectionné une douzaine d'images parlantes qui nous aideront à comprendre.

Nous allons ensemble découvrir tous les paramètres proposés par le thème. Mais j'aurais aussi besoin de votre aide notamment concernant les traductions des termes employés.


Pré-réglage

Fundamental propose 7 pré-réglage

C'est à dire, d'après ce que j'ai compris, c'est que si on coche un de ces 7 pré-réglages, on peut ne s'occuper de rien d'autres pour les autres réglages.


×

Corps

Corps, les réglages

Pour ces réglages, on à le droit à un réglage en pixels pour la largeur. On peut définir les couleurs de l'arrière plan et de la fonte. Enfin, choisir une image de fond.


×

En-tête

Réglage de l'En-tête

Les réglages de l'en-tête (reste à définir ce que veut dire l'en-tête). Il y a un choix de couleur d'arrière plan, de fonte du texte, un choix d'image et un paramétrage de Padding qui se traduit en français par : "rembourrage" ?

C'est une question à poser aux spécialistes.

×

Page Info

Paramétrage de la page info

Reste à savoir ce qu'ils entendent par : " Page Info !"

×

Pied de page

Tous les paramétrages du pied de page

avec des paramètres comme : " Bottom, Padding, Top etc.."


×

Buttons

Le paramétrage des Boutons

Encore toute une série de paramétrage pour les boutons spécifiques de ce thème précisément. Le thème Fundamental.

En effet, les différents boutons peuvent êtres : Primary (primaires) - Secondary (secondaires) - Succes et Alert.

Les boutons :" Modals" de cette page sont tous:" Primary"



×
Navigation

La navigation

Les réglages de la navigation sont nombreux. Qu'il s'agisse des liens, de l'épaisseur de l'encadrement, de la couleur des liens et des boutons, de la couleur au survol de ces liens et boutons, des images de fond, des réglages de la fonte.

Bref, toute sorte de réglages et de couleurs, à définir par l'administrateur du site web.


×

Navigation (suite)

Suite de l'image de navigation


×

Banner

Les réglages de la bannière du site web

Toutes sortes de réglages sont prévus pour ce qui est nommé : " La bannière"

Quest-ce que la bannière ?

×

Main

Paramétrages de :" Main" 

Main veut dire : "Principale" si on en croit Google traduction.

Qu'est-ce qui est principale dans ce que l'on voit visuellement d'une page web ?

ça reste à définir!

×

Typography

Encore plusieurs paramétrages pour la typographie

Un paramétrage pour les titres des 6 niveaux possibles ainsi que des couleurs pour les liens et le survol des liens.


×

Avancé

Le paramétrage d':"Avancé"

Dans le mode Avancé, une petite fenêtre s'ouvre et c'est dans cette fenêtre prévue pour y mettre du code, que vous pouvez choisir votre propre CSS3.

Ce qui n'est pas mon cas.


×


Conclusion

J'ai choisi des boutons de type : "Modal" pour l'agencement de cette page. L'avantage, c'est que les 12 grandes images ne sont pas toutes dépliées en même temps ce qui fait que je gagne de la place, c'est l'utilisateur qui choisira de regarder les images qu'il désirent voir, en cliquant simplement sur chaque boutons.

Pour l'instant, je ne suis pas trop avancé dans la compréhension exact et automatique des termes anglais employés pour paramétrer le visuel de mes pages web. Je compte sur certains pros qui maîtrisent les termes pour le CSS et qui voudront bien prendre un peu de leur temps pour commenter.

Ce site web, non fini, adopte le Pré-réglage : " Red Boxed" (j'aime assez le rouge et le noir), toutefois, sur certaines pages, je me suis mêlé de changer certains paramètres au cas par cas, et ça ne me plait pas vraiment. C'est justement dans une parfaite connaissance du CSS3 que je pourrai réussir à avoir le design voulu.

Actualisation de cet article



Je viens juste de changer le Pré-réglage en actualisant un peu ce site web, pour l'instant, ce 21/01/2106 j'ai choisis ; " Arizona". un pré-réglage qui n'était pas présent au début. En effet, avec le thème Fundamental Theme, les créateurs ont la bonne idée de faire, parfois, des mises à jour apportant le lot de nouvelles fonctionnalités et j'en profite.

Je comprend mieux, à présent, la puissance du CSS3 en ayant tester certains paramètres des objets. L'objet pouvant être n'importe quel bloc. Un bloc de texte, un bloc d'image(s), un bouton, etc...

Il faut faire attention à bien noter les transformations que l'on fait avec le CSS, afin que toutes les pages du site web soient identiques.


Design & Modèle personnalisé

On parle bien de CSS

L'image du dessous nous montre bien des icônes de paramètres avec une sorte de roue dentée, une baguette magique, des alignements, des marges, des images et de la typographie. Voyons en image, ce qui nous ait proposé. (je n'ai pas trouvé les icônes exacts employées) voir des explications sur cette page


Pour ce paramétrage avec l'icône de la roue dentée : 2 images.

Ombre et rotation en pixels

Les espacements hauts et bas ainsi que droites et gauches. Le tout en px.

Rotations et ombres

Le background image.

Typographie de base du texte. Couleur des liens.


Chargement de la conversation