Dotclear

Vous n'êtes pas identifié(e).

Annonce

13 février 2024 Sortie de Dotclear 2.29

#1 2011-11-28 21:40:33

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Réaliser un configurateur de thème

Bonsoir,

Entre deux recherches pro, j'aimerai finaliser un de mes thèmes en développement mais ma demande pourrait me resservir pour la mise à jour de mes anciens comme pour les prochains à coder.

Je cherche à obtenir un configurateur comme sur ce montage. C'est à dire avec deux blocs pour configurer, un pour le choix de la "structure" et un autre pour les variations de "couleurs". L'utilisateur devrait faire ces deux choix via des boutons radio.

Je me suis bien tenter à m'inspirer de thèmes ayant un configurateur, le plus proche étant celui de "DesignPile" mais à chaque bidouille tentée, ça coince. Est-ce qu'une bonne âme accepterait de me collaborer avec moi sur ce premier configurateur ?

Hors ligne

#2 2011-11-28 23:37:23

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : Réaliser un configurateur de thème

Ça m'intéresserait beaucoup également pour introduire ce type de configurateur à mes thèmes si tu souhaite le partager bien entendu ;)

Hors ligne

#3 2011-11-29 08:28:29

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

Mathieu M. a écrit :

Ça m'intéresserait beaucoup également pour introduire ce type de configurateur à mes thèmes si tu souhaite le partager bien entendu ;)

J'ai oublié de le préciser mais oui, le but est de partager cette ressource.

Hors ligne

#4 2011-11-29 08:49:30

Azork
Membre
Inscription : 2006-03-14
Site Web

Re : Réaliser un configurateur de thème

moi aussi je suis très intéressé!
si je raconte pas de bêtises (me suis penché sur le thème ductile), ton configurateur sert à rajouter des règles CSS dans la page affichée...?
donc on doit d'abord (si je me plante pas)

1. Construire le formulaire avec les options voulues
2. Traiter les données
3. Ajouter les nouvelles règles CSS dans l’entête de la page affichée

Hors ligne

#5 2011-11-29 09:04:58

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

Ce configurateur donnerait le choix entre une structure (1 colonne, 2 colonnes, 3 colonnes,…) et un style (couleurs ou autres habillages graphiques).

Pour le moment, sans configurateur, j'ai préparé les ingrédients CSS :
- un fichier de base (style.css)
- des fichiers de "structures"
- des fichiers de "couleurs" (qu'on devrait plutôt appeler "style")

Les choix "CustomMyColour" ou "CustomMyStructure" permettront à l’utilisateur d'inventer la sienne. Dans le configurateur, il bascule sur ce choix et dans l'éditeur de thème, il le personnalise à sa guise.

Hors ligne

#6 2011-11-29 09:06:56

BG
Membre
Lieu : 17
Inscription : 2005-05-11
Site Web

Re : Réaliser un configurateur de thème

Il serait pas mal d'avoir une page dédié sur la doc pour les créateurs de thème, ça permettrait à ceux qui n'ont pas suffisamment de connaissances à ce niveau
de pouvoir proposer dans leur thème quelques réglages simples.


Installer votre premier blog : http://abc.dotaddict.org
Documentation Dotclear2:    http://fr.dotclear.org/documentation/2.0/
Astuces (Tips), Plugins, Thèmes: http://dotaddict.org/

Hors ligne

#7 2011-11-29 10:24:21

annso
Responsable de la machine à Twix
Lieu : Lyon
Inscription : 2006-03-05
Site Web

Re : Réaliser un configurateur de thème

J'avais commencé un vague bout de quelque chose, mais c'est un exercice assez difficile (quelles sont les connaissances requises minimales ?)

Hors ligne

#8 2011-11-29 10:50:37

Philippe
Stagiaire
Lieu : Toulon
Inscription : 2004-06-13
Site Web

Re : Réaliser un configurateur de thème

Je crois que ça devrait être relativement facile à faire si tu prends pour exemple le thème Ductile ;)

Hors ligne

#9 2011-11-29 11:19:42

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

amalgame > je m'y tente encore ce matin (en reprenant ce tips) mais "Ductille" aussi bien fait soit il et déjà trop complexe à mon goût.

Hors ligne

#10 2011-11-29 12:13:56

osku
Membre
Lieu : 28
Inscription : 2005-06-15

Re : Réaliser un configurateur de thème

Un exemple de thème configurable non fini :

http://dleds.net/pub/Gjf2OT

Hors ligne

#11 2011-11-29 12:19:39

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

osku a écrit :

Un exemple de thème configurable non fini :  http://dleds.net/pub/Gjf2OT

Pour l'instant une maintenance temporaire m'interdit le téléchargement, je retente ma chance + tard ;)

Hors ligne

#12 2011-11-29 12:33:15

osku
Membre
Lieu : 28
Inscription : 2005-06-15

Re : Réaliser un configurateur de thème

Jean-Michel a écrit :
osku a écrit :

Un exemple de thème configurable non fini :  http://dleds.net/pub/Gjf2OT

Pour l'instant une maintenance temporaire m'interdit le téléchargement, je retente ma chance + tard ;)

Pardon, c'est corrigé.

Hors ligne

#13 2011-11-29 21:20:34

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

J'ai été interrompu dans mon élan (par un impératif pro) mais j'essaye de m'y replonger vers vendredi.

Hors ligne

#14 2011-12-01 12:55:47

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

osku > Merci pour le partage

Mais encore une fois, je cherche à mettre en place un configurateur simple (deux choix), déjà que tous les thèmes que j'ai pu trouvé ne parle pas n'utilise pas la même dénomination pour dire la même chose.

A défaut d'arriver d'abord à mon visuel donné #1 et en suivant ce tips

Je plante surtout sur mon besoin d'avoir deux listes déroulantes ("style" et "structure"). Je pensais qu'en faisant ceci, ça marcherait :

_config.php

<?php
// Protection contre la lecture du fichier en dehors de l'admin
if (!defined('DC_CONTEXT_ADMIN')) { return; }
// Initialisation : 
$walou_style = array(
        __('Default') => 'default',
        __('Monochrome') => 'grey',
        __('Gold') => 'gold',
        __('Pastel') => 'pastel'
);

$walou_structure = array(
        __('Default') => 'default',
        __('Monochrome') => 'grey',
        __('Gold') => 'gold',
        __('Pastel') => 'pastel'
);

// Traitement à l'enregistrement :
if (!empty($_POST))
{
        $core->blog->settings->setNameSpace('walouwalou');
        if (!empty($_POST['walou_style']) && in_array($_POST['walou_style'],$walou_style))
        {
                $core->blog->settings->walou_style = $_POST['walou_style'];
                $core->blog->settings->put('walou_style',
                                        $core->blog->settings->walou_style,
                                        'string',
                                        'Walou-walou theme style',true
                                        );
        if (!empty($_POST['walou_structure']) && in_array($_POST['walou_structure'],$walou_structure))
        {
                $core->blog->settings->walou_structure = $_POST['walou_structure'];
                $core->blog->settings->put('walou_style',
                                        $core->blog->settings->walou_structure,
                                        'string',
                                        'Walou-walou theme structure',true
                                        );
        }
        $core->blog->triggerBlog();
         echo '<p class="message">'.__('Theme configuration has been successfully updated.').'</p>';
}

// Affichage d'un menu déroulant proposant le choix de la déclinaison : 
echo '<fieldset><legend>Style</legend>'.
'<p class="field"><label>'.__('Style:').' '.
form::combo('walou_style',$walou_style,$core->blog->settings->walou_style).
'</p>'.
<legend>Structure</legend>'.
'<p class="field"><label>'.__('Structure:').' '.
form::combo('walou_structure',$walou_structure,$core->blog->settings->walou_structure).
'</p>'.
'</fieldset>';
?>

Après, je ne vois pas comment inscrire "structure" dans le _public.php. Et je pensais qu'en faisant un simple recherche-remplacer de "walou" vers le nom de mon thème, ça fonctionnerait sans encombre.

Vos éclairages sont les bienvenues ;-)

Hors ligne

#15 2011-12-01 13:21:39

osku
Membre
Lieu : 28
Inscription : 2005-06-15

Re : Réaliser un configurateur de thème

C'est un bon début, ce tip n'est pas à jour avec le mécanisme des settings actuels :

Il faut :

$core->blog->settings->addNameSpace('jeanmicheltheme');

et des choses comme $core->blog->settings->jeanmicheltheme->valeur pour l'appel aux valeurs

Hors ligne

#16 2011-12-01 13:42:54

patidou
Membre
Inscription : 2004-11-14
Site Web

Re : Réaliser un configurateur de thème

Dans Polyvalence, il y a une case à cocher pour envoyer (ou non) les pages en pages application/xhtml+xml. Si ça peut aider… ;-)


«Quand j'étais petit, je voulais être maître du monde. Maintenant que je suis grand, j'arrive à peine à être maître de moi-même.» Le Chat/Philippe Geluk.
Dotclear a besoin de vous

Hors ligne

#17 2011-12-01 17:02:50

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

J'ai tenté de faire les modifications que tu me suggères mais cela me donne un écran avec le menu qui disparait et la page s'arrête au bouton "Retour". Même si le thème pourlequel je travaille actuellement à un autre nom, pour les besoins ici, on va choisir un NameSpace basique : MyPrettyTheme.

Voici le _config.php actuel.

<?php
// Protection contre la lecture du fichier en dehors de l'admin
if (!defined('DC_CONTEXT_ADMIN')) { return; }
// Initialisation : 
$MyPrettyTheme_style = array(
        __('Default') => 'default',
        __('Monochrome') => 'grey',
        __('Gold') => 'gold',
        __('Pastel') => 'pastel'
);

$MyPrettyTheme_structure = array(
        __('Default') => 'default',
        __('Monochrome') => 'grey',
        __('Gold') => 'gold',
        __('Pastel') => 'pastel'
);

// Traitement à l'enregistrement :
if (!empty($_POST))
{
        $core->blog->settings->addNameSpace('MyPrettyTheme');
        if (!empty($_POST['MyPrettyTheme_style']) && in_array($_POST['MyPrettyTheme_style'],$MyPrettyTheme_style))
        {
                $core->blog->settings->MyPrettyTheme_style = $_POST['MyPrettyTheme_style'];
                $core->blog->settings->put('MyPrettyTheme_style',
                                        $core->blog->settings->MyPrettyTheme_style,
                                        'string',
                                        'MyPrettyTheme theme style',true
                                        );
        if (!empty($_POST['MyPrettyTheme_structure']) && in_array($_POST['MyPrettyTheme_structure'],$MyPrettyTheme_structure))
        {
                $core->blog->settings->MyPrettyTheme_structure = $_POST['MyPrettyTheme_structure'];
                $core->blog->settings->put('MyPrettyTheme_style',
                                        $core->blog->settings->MyPrettyTheme_structure,
                                        'string',
                                        'MyPrettyTheme theme structure',true
                                        );
        }
        $core->blog->triggerBlog();
         echo '<p class="message">'.__('Theme configuration has been successfully updated.').'</p>';
}

// Affichage d'un menu déroulant proposant le choix de la déclinaison : 
echo '<fieldset><legend>Style</legend>'.
'<p class="field"><label>'.__('Style:').' '.
form::combo('MyPrettyTheme_style',$walou_style,$core->blog->settings->MyPrettyTheme_style).
'</p>'.
'</fieldset>';
echo '<fieldset><legend>Structure</legend>'.
'<p class="field"><label>'.__('Style:').' '.
form::combo('MyPrettyTheme_style',$MyPrettyTheme_style,$core->blog->settings->MyPrettyTheme_style).
'</p>'.
'</fieldset>';
?>

Hors ligne

#18 2011-12-01 17:54:45

pierrevg
Membre
Inscription : 2005-04-13
Site Web

Re : Réaliser un configurateur de thème

Bonjour,

Pour les besoins de mon thème usinàgaz pas fini, j'ai ça. Très perfectible sûrement :

<?php

if (!defined('DC_CONTEXT_ADMIN')) { return; }

// chargement de la traduction
l10n::set(dirname(__FILE__).'/locales/'.$_lang.'/admin');

// styles pour le menu
$breathemenu_styles = array(
	"Horizontal" => 'menuH',
	"Vertical" => 'menuV'
);

if (!$core->blog->settings->themes->breathemenu_style) {
	$core->blog->settings->themes->breathemenu_style = 'menuH';
}

if (!empty($_POST['breathemenu_style']) && in_array($_POST['breathemenu_style'],$breathemenu_styles))
{
	$core->blog->settings->themes->breathemenu_style = $_POST['breathemenu_style'];
	$core->blog->settings->addNamespace('themes');
	$core->blog->settings->themes->put('breathemenu_style',$core->blog->settings->breathemenu_style,'string','Menu',true);
	$core->blog->triggerBlog();
}

echo
'<fieldset><legend>'.__('Menu').'</legend>'.
'<p class="field"><label>'.__('Display:').'</label>'.
form::combo('breathemenu_style',$breathemenu_styles,$core->blog->settings->themes->breathemenu_style).
'</p>'.
'</fieldset>';

// style pour l'affichage des saisons
$breathestyle_styles = array(
	__('Default') => 'gray',
	__('Spring') => 'spring',
	__('Summer') => 'summer',
	__('Autumn') => 'autumn',
	__('Winter') => 'winter'
);

if (!$core->blog->settings->themes->breathestyle_style) {
	$core->blog->settings->themes->breathestyle_style = 'gray';
}

if (!empty($_POST['breathestyle_style']) && in_array($_POST['breathestyle_style'],$breathestyle_styles))
{
	$core->blog->settings->themes->breathestyle_style = $_POST['breathestyle_style'];
	$core->blog->settings->addNamespace('themes');
	$core->blog->settings->themes->put('breathestyle_style',$core->blog->settings->breathestyle_style,'string','Season',true);
	$core->blog->triggerBlog();
}

echo
'<fieldset><legend>'.__('Season').'</legend>'.
'<p class="field"><label>'.__('Display:').'</label>'.
form::combo('breathestyle_style',$breathestyle_styles,$core->blog->settings->themes->breathestyle_style).
'</p>'.
'</fieldset>';

// affichage du dock
$breathedock_styles = array(
	__('Yes') => 'dock',
	__('No') => 'nodock'
);

if (!$core->blog->settings->themes->breathedock_style) {
	$core->blog->settings->themes->breathedock_style = 'dock';
}

if (!empty($_POST['breathedock_style']) && in_array($_POST['breathedock_style'],$breathedock_styles))
{
	$core->blog->settings->themes->breathedock_style = $_POST['breathedock_style'];
	$core->blog->settings->addNamespace('themes');
	$core->blog->settings->themes->put('breathedock_style',$core->blog->settings->breathedock_style,'string','Dock',true);
	$core->blog->triggerBlog();
}

echo
'<fieldset><legend>Dock</legend>'.
'<p class="field"><label>'.__('Display:').'</label>'.
form::combo('breathedock_style',$breathedock_styles,$core->blog->settings->themes->breathedock_style).
'</p>'.
'</fieldset>';
?>

Hors ligne

#19 2011-12-01 18:23:43

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

pierrevg > ça m'inquiète, chez toi quelque chose s'affiche côte admin (page Configurateur de thème) ?

Hors ligne

#20 2011-12-01 18:36:03

pierrevg
Membre
Inscription : 2005-04-13
Site Web

Re : Réaliser un configurateur de thème

Ben oui. Sinon, j'ai les fonctions dans le _public.php (je te mets tout sans faire de ménage) :

<?php

if (!defined('DC_RC_PATH')) { return; }

l10n::set(dirname(__FILE__).'/locales/'.$_lang.'/public');

$core->tpl->addValue('gravatar', array('gravatar', 'tplGravatar'));

class gravatar {

  const
    URLBASE = 'http://www.gravatar.com/avatar.php?gravatar_id=%s&amp;default=%s&amp;size=%d',
    HTMLTAG = '<img src="%s" class="%s" alt="%s" />',
    DEFAULT_SIZE = '40',
    DEFAULT_CLASS = 'gravatar_img',
    DEFAULT_ALT = 'Gravatar de %s';

  public static function tplGravatar($attr)
  {
    $md5mail = '\'.md5(strtolower($_ctx->comments->getEmail(false))).\'';
    $size    = array_key_exists('size',   $attr) ? $attr['size']   : self::DEFAULT_SIZE;
    $class   = array_key_exists('class',  $attr) ? $attr['class']  : self::DEFAULT_CLASS;
    $alttxt  = array_key_exists('alt',    $attr) ? $attr['alt']    : self::DEFAULT_ALT;
    $altimg  = array_key_exists('altimg', $attr) ? $attr['altimg'] : '';
    $gurl    = sprintf(self::URLBASE,
                       $md5mail, urlencode($altimg), $size);
    $gtag    = sprintf(self::HTMLTAG,
                       $gurl, $class, preg_match("/%s/i", $alttxt) ?
                                      sprintf($alttxt, '\'.$_ctx->comments->comment_author.\'') : $alttxt);
    return '<?php echo \'' . $gtag . '\'; ?>';
  }

}

$core->addBehavior('templateBeforeBlock',array('behaviorsExcludeCurrentPost','templateBeforeBlock'));

class behaviorsExcludeCurrentPost
{
	public static function templateBeforeBlock($core,$b,$attr)
	{
	       if ($b == 'Entries' && isset($attr['exclude_current']) && $attr['exclude_current'] == 1)
	       {
		       return
		       "<?php\n".
		       '$params["sql"] .= "AND P.post_url != \'".$_ctx->posts->post_url."\' ";'."\n".
		       "?>\n";
	       }
	}
}

$core->addBehavior('publicHeadContent','breathemenu_publicHeadContent');

function breathemenu_publicHeadContent($core)
{
	$style = $core->blog->settings->themes->breathemenu_style;
	if (!preg_match('/^menuH|menuV$/',$style)) {
		$style = 'menuH';
	}

	$url = $core->blog->settings->themes_url.'/'.$core->blog->settings->theme;
	echo '<link rel="stylesheet" type="text/css" media="screen" href="'.$url."/".$style.".css\" />\n";
}

$core->addBehavior('publicHeadContent','breathestyle_publicHeadContent');

function breathestyle_publicHeadContent($core)
{
	$style = $core->blog->settings->themes->breathestyle_style;
	if (!preg_match('/^spring|summer|autumn|winter|gray$/',$style)) {
		$style = 'gray';
	}

	$url = $core->blog->settings->themes_url.'/'.$core->blog->settings->theme;
	echo '<link rel="stylesheet" type="text/css" media="screen" href="'.$url."/".$style.".css\" />\n";
}

$core->addBehavior('publicHeadContent','breathedock_publicHeadContent');

function breathedock_publicHeadContent($core)
{
	$style = $core->blog->settings->themes->breathedock_style;
	if (!preg_match('/^dock|nodock$/',$style)) {
		$style = 'dock';
	}

	$url = $core->blog->settings->themes_url.'/'.$core->blog->settings->theme;
	echo '<link rel="stylesheet" type="text/css" media="screen" href="'.$url."/".$style.".css\" />\n";
}

?>

Hors ligne

#21 2011-12-01 19:15:24

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

pierrevg > Merci pour le partage, je fais des tests, je vous tiens au courant ;)

Hors ligne

#22 2011-12-01 20:47:32

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

Je peaufine mais ça marche \o/… enfin jusqu'à preuve du contraire ;)

Hors ligne

#23 2011-12-01 23:23:51

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : Réaliser un configurateur de thème

Je suis impatient de pouvoir tester tout ça! :)

Une petite question me vient : est-ce que ce configurateur pourra être ré-employé facilement et sans retouche sur une multitude de thèmes ? (Ductile me semble hélas bien compliqué à mon niveau)

Hors ligne

#24 2011-12-02 08:50:18

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

Mathieu M. > Comme dit en #1, c'est le but du jeu : créer un "basique". Après… chaque concepteur a ses idées de "configurateur" et/ou le thème/projet en imposent.

Hors ligne

#25 2011-12-02 17:33:16

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Réaliser un configurateur de thème

Pardon de ma question de novice mais est-ce que je peux me fier à cette page de la documentation ? car cela n'a pas l'air de ressembler exactement aux codes que me donnait pierrevg dans ces précédents messages.

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map