Des cadres pour les articles

santini · juillet 2015

Bonjour la communauté !
Actuellement les titres des articles s'affiche les uns sous les autres..
Je voudrais savoir comment faire pour afficher des articles dans des cadres et sur 2 ou 3 colones ?
Voici un exemple que j'aimerais appliquer: http://mods-scripts.blogspot.fr/

Je vous remercie.

mr-toc · juillet 2015

modifier ton fichier style.css

[== CSS ==]
section.home article{
	float: left;overflow: hidden;
	width: 45%;
	height: 250px;
	margin: 10px;
	padding: 10px;
	background-color: cyan;
	border: solid 1px black;
}

Stéphane · juillet 2015

Pour le thème par défaut de PluXml 5.3.1 (affichage 2 colonnes)

Rajoute à la fin du fichier /css/style.css


article {
	width: 50%;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (max-width:800px) {
	article {
		width: 100%;
	}
}

.rss {
	clear: both;
	float: left;
}

adapte width: 50%; si tu veux + de 2 colonnes

Jos · juillet 2015

La solution de Stéphane me semble bien. Si tu veux rajouter les bordures, ça se passe dans la balise article.

santini · juillet 2015

Cool merci, je vais essayer tout ça

bg62 · juillet 2015

lut;)
effectivement ça fonctionne très bien, MAIS, comment faire pour que ça ne fasse effet QUE dans dans la 'home', éventuellement dans les catégories ( ou ??? ) car cela joue également partout et donc déforme énormément l'affichage d'un article par exemple : les commentaires ou le formulaire d'envoi de com prennent alors cette place et ça fait affreux

autrement dit il semble que ce soit la paramètre "article" en lui-même qui coince ... mais ???

mr-toc · juillet 2015

regarde ce que j'ai mis plus haut et avec le css proposé par Stéphane ça devrait être mieux.

bg62 · juillet 2015

mr-toc a écrit:

regarde ce que j'ai mis plus haut et avec le css proposé par Stéphane ça devrait être mieux.

je suis sur le thème par defaut de PluXml5
combiner les deux n'a pas l'air de changer grand chose au problème, il y a toujours la même répercussion sur les pages d'articles par exemples ...
pour l'instant, j'en suis ici:
- un nouveau fichier css avec le code de stéphane ( theme4.cs )
- création d'un ' headerhome.php '
avec ceci dedans:

[== Indéfini ==]
	<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css" media="screen"/>
	<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css" media="screen"/>
	<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme4.css" media="screen"/>

- dans home.php:

[== Indéfini ==]
<?php include(dirname(__FILE__).'/headerhome.php'); ?>

là plus de soucis, mais bon, cela fait un fichier de plus ...
@+

mr-toc · juillet 2015

excuse, j'avais oublié que j'avais modifié ça.
en fait, j'avais modifié dans le fichier home.php pour rajouté <section class="home"> et ça risque pas de marcher chez toi.

ça te permet d'avoir des règles css spécififque pour article à ta page d'accueil.

bg62 · juillet 2015

oui, finalement ça finit par revenir au même, non ?

santini · octobre 2015

Salut,
J'ai essayer de trouver le problème mais je n'y parviens pas

(j'ai oublier de préciser que je voulais appliquer les deux colonne uniquement en page d’accueil :8

Voici mon fichier Home.php:

<?php include(dirname(__FILE__).'/header.php'); ?>

<div id="section">

<section class="home">

<div id="article">

<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
<h1><?php $plxShow->artTitle('link'); ?></h1>
<div class="art-chapo"><?php $plxShow->artChapo(); ?></div>
<p class="art-infos"><?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?> - <?php $plxShow->lang('TAGS') ?> : <?php $plxShow->artTags(); ?> - <?php $plxShow->artNbCom(); ?></p>
<?php endwhile; ?>

<p id="pagination"><?php $plxShow->pagination(); ?></p>

</div>

<?php include(dirname(__FILE__).'/sidebar.php'); ?>

</div>

<?php include(dirname(__FILE__).'/footer.php'); ?>

Et voici ce que j'ai rajouter a la fin de style.css

section.home article{

float: left;

overflow: hidden;

width: 45%;

height: 250px;

margin: 10px;

padding: 10px;

background-color: cyan;

border: solid 1px black;
}

Merci pour votre aide

Pierre · octobre 2015

J'ai une question qui pourrait sembler simpliste, pourquoi ne pas tout bonnement utiliser uniquement le CSS de mods-scripts.blogspot.fr? Il a 1834 lignes remplies de tous les ingrédients dont Pluxml a besoin pour fonctionner, et encore plus. On utilise la page en question comme "home" et on passe au suivant. La page d'article typique du site mentionné fait un excellent gabarit pour la partie "boîte de contenu" affublé de sa "sidebar".

Désolé à l'avance pour mes pratiques, elles me font rechercher la facilité avant la vertu...

kowalsky · octobre 2015

@pierre : en l'état cela ne marchera pas car il faut aussi indiquer dans le fichier PHP les classes CSS à utiliser. Par exemple PluXml utilise la classe "article" alors que mods-scripts.blogspot.fr utilise la classe "post" pour l'affichage des articles.

@santini : à première vue il manque une fin de section </section> sur ta page home.php

[== HTML ==]
</div>
</section>
<?php include(dirname(__FILE__).'/sidebar.php'); ?>

il me semble aussi que la pagination est mal placée, devrait être après la fin de la balise div article et non avant

</div>
<p id="pagination"><?php $plxShow->pagination(); ?></p>
</section>
<?php include(dirname(__FILE__).'/sidebar.php'); ?>

Pierre · octobre 2015

Bien évidemment, les termes utilisés par le créateur du CSS ne seront pas souvent (lire: jamais) exactement les mêmes que ceux utilisés par Pluxml. Le travail de cambriolage comporte une partie de copiage-collage en utilisant le modèle d'une page typique d'article, n'importe laquelle, disons http://mods-scripts.blogspot.fr/2014/10/mypartner-10.html .

La balise <article> doit être utilisée, ainsi que son attribut ID, rien avoir avec la classe article du CSS de Pluxml (puisqu'on l'a balancé, désolé pour son créateur mais bon, il comprend...) qui définissait le côté cosmétique de son usage. Ainsi la balise <article></article> est bien là, mais le cosmétique de blogspot utilise "post hentry" (ligne 316 de la page format brut). Ainsi la portion entre les lignes 316-403 se verront recevoir le contenu $plxShow->artChapo(); ou toute autre portion de "milieu de page" dans les autres cas des pages comme contact, les statiques, etc.

Je conseille fortement d'utiliser Firefox et ses outils de développement pour extraire le tout, rien de spécial, simplement le "Examiner l'élément" peut déjà répondre à bien des questions.

J'ai fait la suite d'opérations tellement de fois que ça devient une habitude. La tentation serait grande de vous découper le tout bien emballé et retourner à mes moutons, vous comprendrez que je ne le fais pas pour ne pas mettre le forum dans le pétrin avec les droits d'auteurs, mais le crime complet prend quelques heures à commettre au commun des mortels qui aspirent encore au paradis. Votre humble serviteur ayant vendu son âme au diable depuis longtemps, vous devinez que quelques minutes suffiraient.

Je pourrais le faire sous forme de tutoriel, ça débuterait déjà ma sentence de travaux communautaires...

Pierre · octobre 2015

La raison pour laquelle je pouvais affirmer très tôt que l'exercice est classé "facile" est la structure visuelle générale du gabarit de http://mods-scripts.blogspot.fr/

On a une entête clairement définie, un pied de page tout aussi clair et une portion entre les deux ou se passera toute l'action.

Première étape est de copier le thème par défaut dans un nouveau répertoire. Vider les répertoire CSS et JS mais les laisser en place.

En tirant le code de la page ci-haut:

1- couper l'entête à la ligne 295 et recopier le tout SOUS le contenu de header.php (on enlèvera l'excédent plus tard).

2- couper le pied de page à la ligne 585 et recopier (vers le bas, duh) dans le haut du fichier footer.php mais sous la première ligne qui réfère à Pluxml.

3. La portion entre les deux devient home.php

Reprise (du numéro 3) de l'exercice avec une page de type 2-colonnes en séparant avec attention la portion de la colonne de droite du "corps central", vous aurez deviné que les pages article.php et sidebar.php viennent de naître. Les parties header et footer sont déjà faites, on ne touche qu'au milieu.

En copiant dans leur répertoire les quelques CSS qui traînent un peu partout dans la page et en redirigeant aux même lignes avec le lien de répertoire, on voit déjà Frankenstein revenir à la vie. La partie suivante est un peu moins reluisante, elle demande de jouer dans les pages de gabarit, surtout article.php et categorie.php pour polir le tout.

Ça demande un peu de volonté et de frustration mais rien à comparer avec le travail des créateurs du gabarit que l'on remercie bien bas. Ils ont travaillé un coup pour nous rendre la vie si simple.

santini · octobre 2015

kowalsky a écrit:
@santini : à première vue il manque une fin de section </section> sur ta page home.php
[== HTML ==]
</div>
</section>
<?php include(dirname(__FILE__).'/sidebar.php'); ?>
il me semble aussi que la pagination est mal placée, devrait être après la fin de la balise div article et non avant
</div>
<p id="pagination"><?php $plxShow->pagination(); ?></p>
</section>
<?php include(dirname(__FILE__).'/sidebar.php'); ?>

Salut,
Donc j'ai bien fait ce que tu ma dit et ça ne marche pas chez moi

J'utilise le theme CF Elegante
Le theme:http://ressources.pluxml.org/?theme125/theme-cf-elegante

Merci pour votre aide

kowalsky · octobre 2015

@santini : effectivement si tu utilises ce thème, la pagination était au bon endroit.

Par contre pour être bien sûr de ton besoin : quand tu indiques 2 colonnes, c'est bien 2 colonnes d'articles + la sidebar, soit 3 colonnes au total ?

article 1 ! article 2 ! Catégorie
article 3 ! article 4 ! Archives
article 5 ! article 6 ! ...
article 7 ! article 8 !

Si c'est bien cela, il faut insérer une div supplémentaire dans ta page "home.php" au niveau de la boucle PHP pour appliquer le code CSS proposé plus tôt par Stéphane (que j'ai un peu modifié). Essaye ceci :

[== HTML ==]
<?php include(dirname(__FILE__).'/header.php'); ?>

	<div id="section">

		<div id="article">

			<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>

			<div class="home2col">
				<h1><?php $plxShow->artTitle('link'); ?></h1>
				<p class="art-topinfos"><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> le <?php $plxShow->artDate('#num_day #month #num_year(4)'); ?></p>
				<div class="art-chapo"><?php $plxShow->artChapo(); ?></div>
				<p class="art-infos"><?php $plxShow->lang('CLASSIFIED_IN') ?> : <?php $plxShow->artCat(); ?> - <?php $plxShow->lang('TAGS') ?> : <?php $plxShow->artTags(); ?> - <?php $plxShow->artNbCom(); ?></p>
			</div>

			<?php endwhile; ?>

			<p id="pagination"><?php $plxShow->pagination(); ?></p>

		</div>

		<?php include(dirname(__FILE__).'/sidebar.php'); ?>

	</div>

<?php include(dirname(__FILE__).'/footer.php'); ?>

et à la fin de "/css/screen.css", rajoute :

[== CSS ==]
/* Home avec 2 colonnes */
.home2col {
	width: 45%;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	max-height: 350px;
	overflow: auto;	
}

@media screen and (max-width:800px) {
	.home2col {
		width: 100%;
	}
}

.rss {
	clear: both;
	float: left;
}

Pour la version avec encadrement, remplace .home2col avec une modification du CSS proposé par mr-toc :

[== CSS ==]
.home2col {
	float: left;
	overflow: hidden;
	width: 45%;
	height: 250px;
	margin: 5px;
	padding: 5px;
	background-color: cyan;
	border: solid 1px black;
}

Bien entendu, si t'es pas adepte du cyan en background, libre à toi de trouver moins flashy

En aparté, le thème n'étant pas "responsive", la sidebar ne bouge pas de sa place sur petits écrans, par contre il n'y aura plus qu'un article affiché par ligne

santini · octobre 2015

Merci beaucoups ! cela fonctionne, par contre si je souhaite rendre le tout responsive je doit faire comment?

mathieu · octobre 2015

rendre un site responsif signifie juste que l'affichage s'adapte en fonction de la résolution de l'écran.
donc si tu veux qu'on te renseigne, il faudrait que tu nous explique quelles adaptions tu souhaiterais (changement de la taille de la police ou disparition du résumé par exemple) et que tu nous montres ce que tu as déjà essayé

il y a beaucoup d'effets responsifs qui utilise le code CSS @media pour appliquer des effets CSS différents à partir d'une certaine limite :
http://www.w3schools.com/css/css3_mediaqueries.asp

kowalsky · octobre 2015

@mathieu : Santini utilise le thème "CF Elegante" et je pense que c'est parce que j'ai involontairement tendu la perche quand j'ai constaté que ce thème ne l'était pas qu'il en parle.

@santini : solution simple -> changer de thème

(avec le thème par défaut de la 5.4, le plus gros travail consistera à changer quelques couleurs de fond et polices, et de placer des helpers au bons endroits dans home.php)
solution en gardant le thème -> transformer le thème fixe pour le passer en responsive : modifier plusieurs valeurs du CSS en définissant les largeurs des principales sections en % et non en px, et utiliser les média-queries comme l'indique mathieu pour ajuster automatiquement cela en fonction de la largeur de l'écran (ce que facilite le framework PluCSS -> http://plucss.pluxml.org/grid.php)

aperçu non exhaustif des modifications à faire :
supprimer "min-width: 930px" à body
remplacer "width: 900px" pour #main, #header, #section, #footer par "width: 100%"
idem pour #article "width: 610px" -> "width: 100%"
placer quelques "display:block" aux bons endroits pour assurer les renvois, notamment pour #aside où il faudra également définir une largeur mais qui ne sera pas de 100% cette fois ci
etc.

indiquer la largeur fixe de #main et #articles via des média-queries, par exemple

@media (max-width: 767px) {
#main { width: 650px;}
}

@media (min-width: 768px) {
#main { width: 900px;}
}

sauf qu'en faisant cela, ça va casser (temporairement) l'affichage des articles en 2 colonnes vu hier, et qu'il faudra donc revoir ce bout de code également

santini · octobre 2015

ohhh merci beaucoup pour cette réponse très précise, je demander ça oui car effectivement tu en a parler et ma question était surtout par curiosité, en tout cas merci beaucoup de votre aide et patience^^

Des cadres pour les articles

Réponses