Adaptation d'un thème WordPress pour PluXml 5.3

Frédéric · mars 2014

Concernant le formulaire de recherche en sidebar, il faut avoir le plugin adéquate et modifier le html de la sidebar en conséquence.
D'origine le champ il y est donc pour ceux qui veulent l’utiliser savent qu'il existe.

Pour le menu soit tu le fait en dur et tu es SUR qu'il resteras même après mise à jour de PluXml ! soit tu le fait en Jquery ce qui et plus difficile si tu n'y connais pas js.

Pour le type de sujet utilise le plugin champart, il permet d'ajouter un champ lors de la rédaction d'un article.
Voici les class css si tu le souhaite à indiquer dans ton champ champart via le nom de 'post_type' par exemple (lit la doc du plugin).
Les class:

[== CSS ==]
/* post foramt label */

.post_type_label.gallery {
  background-position: 0 0;
}
.post_type_label.quote {
  background-position: 0 -60px;
}
.post_type_label.image {
  background-position: 0 -120px;
}
.post_type_label.video {
  background-position: 0 -180px;
}
.post_type_label.audio {
  background-position: 0 -300px;
}
.post_type_label.aside {
  background-position: 0 -360px;
}
.post_type_label.link {
  background-position: 0 -420px;
}
.post_type_label.chat {
  background-position: 0 -480px;
}
.post_type_label.status {
  background-position: 0 -540px;
}
.left .post_type_label {
  left: 100%;
  border-radius: 0 30px 30px 0;
}

Pour le reste couleur de fond, de police etc.... ca se passe dans le css...

Je ne rajouterais rien sur ce thème mise à part des corrections de bogues...

LolYangccool · mars 2014

Bonjour,
Je reviens vous embêter un peu...

J'ai réussis à mettre mon menu en HTML, cependant je l'ai enlevé pour les raisons suivantes :
[list=*]
[*]Toujours la même chose, je souhaite le gérer par l'admin du site, simplement parce que j'ajouterais surement des éléments assez souvent dans le menu.[/*]
[*]Ensuite, via l'admin du site, je pourrais gérer plus finement la position via l'ordre des pages.[/*]
[*]C'est plus simple à gérer[/*]
[/list]

Avez-vous un code ou quelques chose à me fournir.
Je ne suis pas développeur (et n'ai pas de connaissances dans ce domaine) mais j'aimerai vraiment pouvoir faire ça.

Merci beaucoup à vous.

Stéphane · mars 2014

Réaliser des menus déroulants à partir des menus des pages statiques

Dans la zone url d'une page statique tu peux saisir des liens externes, ou des liens absolus pointant vers des pages spécifiques de ton site. Donc en gros tu devrais arriver à avoir un peu tous les cas de figure

LolYangccool · mars 2014

Un grand merci à vous tous, j'y suis arrivé grâce au tutoriel.

{)

Bonne journée.

Jerry Wham · mars 2014

Pour la recherche, il faut utiliser le plugin plxMySearch de Stéphane.

LolYangccool · mars 2014

Bonjour,
Merci pour la réponse.

Effectivement, j'utilise déjà MySearch, mais comment l'adpater au formulaire présent dans le thème duena ?
Pour le moment j'ai supprimé le code du formulaire du thème et ai mis celui fournis par Stéphane dans le plugin, sur la page de configuration.
Recherche%20formulaire%20iBlog%20iTech.png

Recherche%20formulaire%20iBlog%20iTech.png

Merci.

Stéphane · mars 2014

chaque element html du formulaire possède une classe css que tu peux utiliser dans le fichier css de ton theme pour y reporter les propriétés nécessaires (.searchform, .searchfield, .searchbutton). Regarde les sources de la page d'accueil de ton site, localise le formulaire et tu verras la structure html.

LolYangccool · mars 2014

Bonjour,
Je vous fais encore un appel à l'aide puisque j'aimerai mettre les commentaires de type admin avec un fond de couleur différente sur le site.
Ici, au lieu d'avoir du gris pour les commentaires de type admin, avoir par exemple une couleur saumon avec une fonte en blanc, par exemple :
Commentaires%20en%20gris%20iBlog%20iTech.png

Commentaires%20en%20gris%20iBlog%20iTech.png

Le premier commentaire est celui d'un visiteur et le second est un commentaire de type admin. Repéré par un fond jaune dans l'administration.

Merci à vous.

Bonne journée.

LolYangccool · avril 2014

Bonjour,
J'essaye de m'atteler à la tâche de modifier l'apprence sur la partie publique du site des commentaires admin.
J'aimerai customiser un peu le fond et éventuellement le style de l'écriture mais je n'arrive pas à récupérer le type-admin dans le CSS pour personnaliser l'affichage.

Dans style.css j'ai essayé de mettre pour essayer :
.comment-list .type-admin {
background: red
}
Ca ne fonctionne pas.
J'ai aussi essayé :
.type-admin {
background: red
}
Ca ne fonctionne pas non plus...

Je ne sais pas comment faire.
Quelle est la class à récupérer ?
J'ai pourtant vu dans le code source de mon site sur un commentaire que j'ai posté qu'il est noté type-admin.
La class récupérée est donc bien celle-ci ?

Kyodev · avril 2014

bonjour,

[== CSS ==]
.type-admin {
    background: red
}

fonctionne bien sur ton site (merci firebug)
dans firebug ou outils de développement de firefox/chrome, regarde si cette règle est éventuellement barrée (donc écrasée par une plus récente ou avec plus de poids)
éventuellement essaye avec

[== CSS ==]
.comment-body p.type-admin {  /* pour avoir plus de poids */
    background: red;
}

/*   ou le temps de debuguer */

.type-admin {  /* important, pour sceller cette règle */
    background: red !important;
}

LolYangccool · mai 2014

Je reviens vous demander un peu d'aide puisque j'ai réussis à faire ceci sur les commentaires :
Commentaires%20bordure%20gauche.png

J'ai utilisé le code CSS suivant :

[== CSS ==]
.comment-list .comment-body {
  border-left: 4px solid #FF5B5B;
}

Comme vous pouvez le voir sur la capture ci-dessus, pour le moment, tous les commentaires ont cette bordure.
J'aimerai que les commentaires de type admin aient toujours une bordure mais de couleur #71A08B.

J'ai essayé :

[== CSS ==]
.type-admin .comment-list {
border: 4px solid #71A08B;
}

Mais aussi :

[== CSS ==]
.comment-list .type-admin{
border: 4px solid #71A08B;
}

Ainsi que :

[== CSS ==]
.type-admin .comment-admin {
border: 4px solid #71A08B;
}

Rien ne fonctionne.

Auriez-vous une idée de comment je dois faire ?

Merci.

Suricat · mai 2014

Bonjour,

Il faut déplacer la mention de la class "type-admin" à côté de la class "comment-body", c'est à dire dans le div principal et non dans le paragraphe (<p>) :

class="comment-body type-admin clearfix"
ou
class="comment-body type-normal clearfix"

LolYangccool · mai 2014

Il faut que je fasse une div ?
<div class="comment-body type-admin clearfix"></div> ?
Si oui, dans le fichier commentairs.php je dois la placer où ?

Merci.

Suricat · mai 2014

Là où tu as class="comment-body clearfix", tu remplace par :

class="comment-body type-<?php $plxShow->comType(); ?> clearfix"

LolYangccool · mai 2014

Bon, ça ne fonctionne pas, il doit y avoir un soucis quelques pars.

J'ai bien remplacé dans commentaires.php comme tu l'as dit dans le post #45 et j'ai, dans mon fichier CSS :

[== CSS ==]
.comment-body type-admin clearfix {
   border: 4px solid #71A08B;
}

j'ai aussi essayé avec le point :

[== CSS ==]
.comment-body .type-admin clearfix {
   border: 4px solid #71A08B;
}

Ça ne fonctionne pas.

Jerry Wham · mai 2014

Tu as toujours un problème de balise head mal fermée.

<!DOCTYPE html>
<html lang="fr">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
    $('#static-nav > li').bind('mouseover', openSubMenu);
    $('#static-nav > li').bind('mouseout', closeSubMenu);
    function openSubMenu() {
        $(this).find('ul').css('visibility', 'visible');    
    };
    function closeSubMenu() {
        $(this).find('ul').css('visibility', 'hidden'); 
    };
});
</script>
<head>
<meta charset="utf-8">

Commence par corriger cela. Ce sera plus pratique pour que la css réagisse comme attendu.

LolYangccool · mai 2014

Bin, là elle commence. 8)
Et apparemment elle ferme bien après les balises meta :

[== HTML ==]
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<title>iBlog iTech - le site d&#039;un passionné...</title>
<link rel="icon" href="http://iblogitech.fr/themes/duena/images/favicon.png" />

<link rel="stylesheet" id="duena-bootstrap-css" href="http://iblogitech.fr/themes/duena/bootstrap/css/bootstrap.css?ver=3.0.3" type="text/css" media="all" />
<link rel="stylesheet" id="flexslider-css" href="http://iblogitech.fr/themes/duena/css/flexslider.css?ver=2.0" type="text/css" media="all" />
<link rel="stylesheet" id="magnific-css" href="http://iblogitech.fr/themes/duena/css/magnific-popup.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://iblogitech.fr/themes/duena/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://iblogitech.fr/themes/duena/css/font-awesome.css?ver=4.0.3" type="text/css" media="all" />
<link rel="alternate" type="application/rss+xml" title="Fil Rss des articles" href="http://iblogitech.fr/feed/rss" />
<link rel="alternate" type="application/rss+xml" title="Fil Rss des commentaires" href="http://iblogitech.fr/feed/rss/commentaires" />
<!--[if lt IE 9]>
<script src="http://iblogitech.fr/themes/duena/js/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if (gt IE 9)|!(IE)]>
<script src="http://iblogitech.fr/themes/duena/js/jquery.mobile.customized.min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" id="duena_ie-css"  href="http://iblogitech.fr/themes/duena/css/ie.css?ver=3.9-alpha-27234" type="text/css" media="all" />
<![endif]-->
<script type="text/javascript" src="http://iblogitech.fr/themes/duena/js/jquery.js?ver=1.11.0"></script>
<script type="text/javascript" src="http://iblogitech.fr/themes/duena/js/jquery-migrate.min.js?ver=1.2.1"></script>
	<link rel="stylesheet" type="text/css" href="http://iblogitech.fr/plugins/plxMyAllArchive/style.css" media="screen" />
	<script type="text/javascript" src="http://iblogitech.fr/plugins/plxMyComSmilies/function.js"></script>
	<link rel="stylesheet" type="text/css" href="http://iblogitech.fr/plugins/plxMyContact/style.css" media="screen" />


<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-44843239-1']);
	_gaq.push(['_trackPageview']);
	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
</script>
	<link rel="stylesheet" type="text/css" href="http://iblogitech.fr/plugins/plxMySearch/style.css" media="screen" />
</head>

Ou alors je ne comprends pas ce que tu veux dire.

Suricat · mai 2014

En fait, c'est plus en amont, là où tu as class="comment...",

insérer "t-<?php $plxShow->comType(); ?>"

+ le css :

[== Indéfini ==]
.comment-list .comment-body {
  border-bottom: 1px solid #ebeae7;
  border-radius: 0;
  padding: 15px;
  background: #f8f8f8;
}
.comment-list .t-normal {
  border-left: 4px solid #FF5B5B;
}
.comment-list .t-admin {
  border-left: 4px solid #005B5B;
}

Faudrait montrer ton fichier commentaires.php

Jerry Wham · mai 2014

Ensuite, il faut que tu vires la class type-admin des paragraphes.
Et que tu mettes pour cibler le bloc :

li.comment.type-admin  {
	
   border-left: 4px solid #71A08B;
	

}

LolYangccool · mai 2014

Oui, c'est bien là ou je l'avais mis (dernière ligne) :

[== HTML ==]
<?php while($plxShow->plxMotor->plxRecord_coms->loop()): # On boucle sur les commentaires ?>	 
   <li class="comment even thread-even depth-1 clearfix" id="<?php $plxShow->comId(); ?>">
     	<div id="comment-<?php $plxShow->comId(); ?>" class="comment-body clearfix">

Suricat · mai 2014

En fait, c'est à la deuxième ligne.

Si type-admin est utile dans le paragraphe, met "t-admin"

[== HTML ==]
<?php while($plxShow->plxMotor->plxRecord_coms->loop()): # On boucle sur les commentaires ?>	 
   <li class="comment t-<?php $plxShow->comType(); ?> even thread-even depth-1 clearfix" id="<?php $plxShow->comId(); ?>">
     	<div id="comment-<?php $plxShow->comId(); ?>" class="comment-body clearfix">

+ css :

[== Indéfini ==]
.comment-list .comment-body {
  border-bottom: 1px solid #ebeae7;
  border-radius: 0;
  padding: 15px;
  background: #f8f8f8;
}
.comment-list .t-normal {
  border-left: 4px solid #FF5B5B;
}
.comment-list .t-admin {
  border-left: 4px solid #71A08B;
}

LolYangccool · mai 2014

Grâce à vous j'ai réussis à faire quelques chose pour le moins... coloré.

:
Par exemple ici.

flotym · octobre 2014

Bonjour,

Je profites de ce post pour vous poser une question concernant l'adaptation du theme Duena pour Pluxml.
Je voudrais ajouter un logo (en haut à gauche) mais je ne trouve pas le moyen de l'ajouter dans le CSS.

Quelqu'un pourrait me filer un petit coup de main ?

Merci
Florent

testé sur test.volantetrellais.fr

Adaptation d'un thème WordPress pour PluXml 5.3

Réponses