× Forum d'aide en Français

Mise en page de l'événement dans la template

Début
Précédent
1
Suivant
Fin

BassT4ken
Auteur du sujet
Nouveau membre

Plus d'informations

il y a 12 ans 4 mois - il y a 12 ans 4 mois #6792 par BassT4ken

Mise en page de l'événement dans la template a été créé par BassT4ken

Version Joomla : 2.5.16
Version iCagenda : 3.2.11
version php : 5.3.13

Bonjour,

Voici le premier de mes 2 petits soucis.

Normalement, les articles sont dans une div <div id='wrapper'> puis une <div id='main'> et enfin dans une <div class='item-page'>. Ceci permet d'afficher l'article et le titre de l'article avec une certaine mise en page.
Avec iCagenda, lorsque je clique sur Prochains événements par exemple, la div iCagenda s'ouvre dans la div <div id='wrapper'> puis une <div id='main'>.

Je pense qu'il faudrait que cette div iCagenda soit imbriquée dans la div item-page.

Un élément de réponse pour que je puisse corriger cela ?

Voici le site : www.afapms.be

Merci beaucoup !

Jérémie Boilan

Dernière édition: il y a 12 ans 4 mois par BassT4ken.

Connexion ou Créer un compte pour participer à la conversation.

Lyr!C
Administrateur
Lead Developer

Plus d'informations

il y a 12 ans 4 mois #6804 par Lyr!C

Réponse de Lyr!C sur le sujet Mise en page de l'événement dans la template

Bonjour Jérémie,

Je pense que vous trouverez votre bonheur dans les options du composant, en désactivant le titre iCagenda. (options globales, puis onglet "évènements")

Ensuite, il faut dans votre lien de menu, afficher le titre de la page, pour pouvoir obtenir le titre du menu, avec les mêmes styles css que les autres pages.

Tenez moi au courant si c'est ok!

Lyr!C

Latest version : iCagenda 4.0.11
We recommend every user to keep iCagenda updated.
Don't forget to have your Joomla!™ up-to-date!

Do you like iCagenda?
I would appreciate if you could take 5 minutes to post a review on JED (Joomla Extensions Directory) .

Connexion ou Créer un compte pour participer à la conversation.

BassT4ken
Auteur du sujet
Nouveau membre

Plus d'informations

il y a 12 ans 4 mois #6809 par BassT4ken

Réponse de BassT4ken sur le sujet Mise en page de l'événement dans la template

Merci pour la réponse rapide.

Malheureusement, ça n'a pas l'air de régler mon problème.

Voici ce que je viens de faire :

1) Dans Paramètres et Droits d'accès iCagenda, onglet évènements, affichage en tête, option d'affichage est configuré à "Aucun".

2) Dans le menu de droite appelé "Menu Principal" (nom temporaire), le lien de menu "Prochains événements", j'ai activé "Afficher l'en tête de page".

Mais cela ne change rien en ce qui concerne la mise en page même en ajoutant la class css item-page à la page.

Connexion ou Créer un compte pour participer à la conversation.

Lyr!C
Administrateur
Lead Developer

Plus d'informations

il y a 12 ans 4 mois #6810 par Lyr!C

Réponse de Lyr!C sur le sujet Mise en page de l'événement dans la template

Désolé, j'ai en fait regardé un peu vite...

Cette classe ne s'applique qu'aux titres des articles joomla, et non au titre des pages.

Donc, il faudrait modifier le fichier template.css, pour ajouter à cette classe items-leading h2 (titre d'un article), la classe componentheading h1 (titre d'une page). (vous devez trouvez cette dernière dans votre fichier css de votre template de site, car il s'agit d'une classe de style de Joomla core.)

Cela devrait être quelque chose comme :

.item-leading h2 {

à remplacer par quelque chose comme :

.item-leading h2, .componentheading h1 {

A essayer bien sur, car je ne connais pas votre template...

Connexion ou Créer un compte pour participer à la conversation.

BassT4ken
Auteur du sujet
Nouveau membre

Plus d'informations

il y a 12 ans 4 mois #6811 par BassT4ken

Réponse de BassT4ken sur le sujet Mise en page de l'événement dans la template

Il me semblait bien que ce serait un peu plus subtil :silly:

Voici ce qui se rapporte au titre de l'article :

 .items-leading,
 .items-row .item, 
 .item-page ,
 .category-desc {
 width:100%;
 background:#fff ;
 border:1px solid #e4e4e4;
 padding:10px;
 margin-bottom:20px;
 padding-bottom:20px; 
 box-shadow: 2px 1px 1px #fafafa;
 
 }
 
 .items-leading h2,
 .items-leading h2 a ,
 .items-row h2,
 .items-row h2 a ,
 .item-page h2,
 .item-page h2 a,
 {
 font-size:18px;
  font-weight: normal;
 color:#020202;
 background: url(../images/bg-h3.jpg) repeat-x 0 0;
 padding-top:5px;
 padding-bottom:10px;
 margin:0;
 text-transform:capitalize;
  
 } 
 
 .items-leading h2 ,.items-row h2 ,.item-page h2 { 
 border-bottom:1px solid #e4e4e4; 
 
 } 
 
 .items-leading h2 a:hover, .items-row h2 a:hover, .item-page h2 a:hover {
 color:#c29862;
 
 }

 h2 {  
 font-size: 150%; 
 font-family: Oswald, tahoma, arial, sans-serif; 

 }

J'ai essayé en mettant le componentheading h1 là où il y a les items-leading h2...

Mais en fait, je pense que la subtilité est dans la structure des pages - la structure d'une page utilisant le composant icagenda est

<div id="wrapper">
   <div id="main">
      <div id="icagenda">
      </div>
   </div>
   <div id="colonne">
   </div>
</div>

tandis qu'une page n'utilisant pas icagenda est

<div id="wrapper">
   <div id="main">
      <div class="item-page">
      </div>
   </div>
   <div id="colonne">
   </div>
</div>

J'ai réussi à avoir le titre dans le bon format en ajoutant dans la css du template mais forcément, il n'y a que le titre qui se met au bon format, la page ne rentre pas dans la css de l'article qui est item-page :

#main h1{
 font-size:18px;
 font-weight: normal;
 color:#020202;
 background: url(../images/bg-h3.jpg) repeat-x 0 0;
 padding-top:5px;
 padding-bottom:10px;
 margin:0;
 text-transform:capitalize;
 }

On s'approche, on s'approche... Je pense en tout cas.

Connexion ou Créer un compte pour participer à la conversation.

BassT4ken
Auteur du sujet
Nouveau membre

Plus d'informations

il y a 12 ans 4 mois #6812 par BassT4ken

Réponse de BassT4ken sur le sujet Mise en page de l'événement dans la template

Je n'édite pas le post du haut car il est déjà bien grand.

Mais voilà ce que j'ai trouvé pour avoir à peu près la mise en page que je veux.
Je change la css du thème iCagenda pour qu'il ressemble à celui d'item-page.

En mettant :

#icagenda {
 width:100%;
 background:#fff ;
 border:1px solid #e4e4e4;
 padding:10px;
 margin-bottom:20px;
 padding-bottom:20px; 
 box-shadow: 2px 1px 1px #fafafa;
}
#icagenda h1 {
font-size:18px;
 font-weight: normal;
 color:#020202;
 background: url(../images/bg-h3.jpg) repeat-x 0 0;
 padding-top:5px;
 padding-bottom:10px;
 margin:0;
 text-transform:capitalize;}

J'arrive +/- à la mise en page voulue...

www.afapms.be/index.php/evenements-agenda-avenir

Connexion ou Créer un compte pour participer à la conversation.

Lyr!C
Administrateur
Lead Developer

Plus d'informations

il y a 12 ans 4 mois #6824 par Lyr!C

Réponse de Lyr!C sur le sujet Mise en page de l'événement dans la template

Bonjour,

Précision : item-page est utilisé par les articles joomla ;-)

Sinon, il y a des classes iCagenda présentes, et non utilisées dans les thème packs :

icagenda-div-header
icagenda-header

Et finalement, afficher le titre dans les paramètres d'iCagenda (et sous-titre si vous voulez) et alors, désactiver le titre de la page.

Le shéma est ainsi (si titre de la page affiché, c'est h2, si titre de la page non affiché, c'est h1, comme dans le cas suivant avec titre de page désactivé):

<div class="icagenda-div-header">
<h1 class="icagenda-header">
Évènements à venir
</h1>
</div>

On peut alors envisager ceci (non-testé, et sans autres modifications dans le thème pack) :

.icagenda-div-header,
.items-leading,
.items-row .item, 
.item-page ,
.category-desc {
	width:100%;
	background:#fff ;
	border:1px solid #e4e4e4;
	padding:10px;
	margin-bottom:20px;
	padding-bottom:20px; 
	box-shadow: 2px 1px 1px #fafafa;
 
 }
 
.icagenda-header,
.icagenda-header a,
.items-leading h2,
.items-leading h2 a ,
.items-row h2,
.items-row h2 a ,
.item-page h2,
.item-page h2 a
{
	font-size:18px;
	font-weight: normal;
	color:#020202;
	background: url(../images/bg-h3.jpg) repeat-x 0 0;
	padding-top:5px;
	padding-bottom:10px;
	margin:0;
	text-transform:capitalize;
} 
 
.icagenda-header,
.items-leading h2,
.items-row h2,
.item-page h2
{ 
	border-bottom:1px solid #e4e4e4; 
}

Si icagenda-header ne fonctionne pas, peut-être remplacé par icagenda-div-header h1

@ tester... ;-)