JomSocial: CSS non pris en charge.

[BickyBik]

Je vais reposter mon sujet ici, m'étant rendu compte que la catégorie dans laquelle je l'avais mis à la base n'était peut-être pas vraiment adaptée. (lien de ce sujet pour suppression: http://forum.joomla.fr/showthread.ph...late-JomSocial )

Salut tout le monde.
Premier passage sur la communauté française du CMS, étonnant d'ailleurs...

Bref ! Je connais Joomla & JomSocial depuis pas mal de temps maintenant, sans vraiment m'être intéressé à ce dernier pour autant hormis pour voir ce qu'il avait dans le ventre et... On va pas se mentir, il mérite sa place de leader. Cependant j'ai remarqué qu'il n'y avait pas tant de thèmes que ça pour une extension aussi populaire... Ou bien s'il y en a, ils sont soit livrés avec un template premium, soit ils ne sont pas terribles. Eh bien qu'à cela ne tienne !

Je me lance donc dans un projet de création de templates JomSocial. Qui seront tous OpenSource bien entendu... A mon avis je commencerai avec une suite 10 couleurs épurée/moderne comme ça tout le monde y trouvera son compte. Ce sera proposé en libre téléchargement et je fournirai tout le support qu'il me sera possible de donner.

Encore bref ! Je ne viens pas demander de l'aide pour mon projet, je pense que je vais très bien m'en sortir, si je passe juste un minuscule petit détail...

Le fait est que pour ces Colors Series je me base sur le template par défaut, normal. Premièrement, je décide de virer la colonne droite réservée aux applis et modules internes à JomSocial pour avoir un composant qui s'étire sur la longueur (généralement on a déjà 1 ou 2 colonnes en plus et pour les non-responsives design, une 3ème ça fait beaucoup). Du coup je crée de nouvelles positions de modules JomSocial, dont une où je décide d'afficher les derniers membres, les derniers groupes et les évènements à venir dans un Tabs Content, en Jquerry pour plus de dynamisme/fluidité. Jusque-là franchement tout va bien, j'avais peur car on m'avait souvent dit que le Javascript mal inclus avait tendance à faire chavirer le bateau. Donc mon hack fonctionne, techniquement parlant...

Le soucis est que mon CSS n'est pas pris en compte, donc je me retrouve avec trois éléments de menus, qui quand on clique dessus, affichent bien les parties désirées, mais qui ne sont pas mis en page... Pourtant juste avant j'ai modifié avec succès la toolbar, ses couleurs, ses icônes et d'autres éléments du composant.

• J'ai aussi bien suivis la doc de JS.
• Créé mes fichiers et dossiers d'override mais rien n'y fait...
• J'ai tenté le style.css du template JS, le template.css de mon thème et j'ai même été jusqu'à insérer le bout de code dans les balises head de mon index... Mais rien à faire.
• Mon cache n'est pas activé, je suis en local.

Du coup voilà, si j'arrive même pas à afficher ma mise en page, ça craint un peu du boudin.
Quelqu'un aurait une idée vite fait ou aurait déjà traité ce genre de problème ?

Voilà mes bouts de code histoire d'y voir plus clair:

<?php $this->renderModules( 'js_profilinfos_tabs' ); ?>
  
  
  <ul id="infos-profil" class="menu-profil-tabs">
            <li class="active"><a href="#membres">Derniers Membres</a></li>
            <li><a href="#derniers-groupes">Derniers Groupeso</a></li>
            <li><a href="#evenements">Évènements</a></li>
  </ul>
        <div id="membres" class="contenu-tabs">
            <p>
            <?php if($this->params->get('showlatestmembers') ){ ?>
            <?php if ( ($this->params->get( 'showlatestmembers' ) == '1' || ( $this->params->get('showlatestmembers') == '2' && $my->id != 0 )) && !empty($latestMembers) ) { ?>
                <?php echo $latestMembers; ?>
            <?php } ?>
            <?php } ?>
            </p>
        </div>
        
        <div id="derniers-groupes" class="contenu-tabs">
            <?php if($this->params->get('showlatestgroups')) { ?>
            <?php if($config->get('enablegroups') ) { ?>
            <?php if( !empty($latestGroups) && ( $this->params->get('showlatestgroups') == '1' || ($this->params->get('showlatestgroups') == '2' && $my->id != 0 ) ) ) { ?>
                <?php echo $latestGroups; ?>
            <?php } ?>
            <?php } ?>
            <?php } ?>
        </div>

        <div id="evenements" class="contenu-tabs">
            <?php if($this->params->get('frontpage_latest_events')) { ?>
            <?php if($config->get('enableevents') ) { ?>
            <?php if( !empty($latestEvents) && ( $this->params->get('frontpage_latest_events') == '1' || ($this->params->get('frontpage_latest_events') == '2' && $my->id != 0 ) ) ) { ?>
                <?php echo $latestEvents; ?>
            <?php } ?>
            <?php } ?>
            <?php } ?>
        </div>

.menu-profil-tabs { 
padding: 0; 
clear: both; 
}

.menu-profil-tabs li { 
display: inline; 
}

.menu-profil-tabs li a { 
background: #ccf; 
padding: 10px; 
float:left; 
border-right: 1px solid #ccf; 
border-bottom: none; 
text-decoration: none; 
color: #000; 
font-weight: bold;
}

.menu-profil-tabs li.active a { 
background: #eef; 
}

.contenu-tabs{ 
float: left; 
clear: both; 
border: 1px solid #ccf; 
border-top: none; 
border-left: none; 
background: #eef;  
width: 100%; 
}

(function($){ 
     $.fn.extend({  
         tabify: function( callback ) {
         	
			function getHref(el){
				hash = $(el).find('a').attr('href');
				hash = hash.substring(0,hash.length-4);
				return hash;
			}
			
		 	function setActive(el){
		 		
				$(el).addClass('active');
				$(getHref(el)).show();
				$(el).siblings('li').each(function(){
					$(this).removeClass('active');
					$(getHref(this)).hide();
				});
			}
			
			return this.each(function() {
			
				var self = this;
				var	callbackArguments 	=	{'ul':$(self)};
					
				$(this).find('li a').each(function(){
					$(this).attr('href',$(this).attr('href') + '-tab');
				});
				
				function handleHash(){
					
					if(location.hash && $(self).find('a[href=' + location.hash + ']').length > 0){				
						setActive($(self).find('a[href=' + location.hash + ']').parent());
					}
				}
				
				if(location.hash){
					handleHash();
				}
					
				setInterval(handleHash,100);
				
				$(this).find('li').each(function(){
					if($(this).hasClass('active')){
						$(getHref(this)).show();
					} else {
						$(getHref(this)).hide();
					}
				});
				
				if(callback){
					callback(callbackArguments);
				}	
				
            }); 
        } 
    }); 
})(jQuery);

[SimonG]

Re : JomSocial: CSS non pris en charge.

Bonjour et bienvenue,

Je vais reposter mon sujet ici, m'étant rendu compte que la catégorie dans laquelle je l'avais mis à la base n'était peut-être pas vraiment adaptée. (lien de ce sujet pour suppression: http://forum.joomla.fr/showthread.ph...late-JomSocial )

Doublon supprimé