Template JA Elastica et module défilant

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Template JA Elastica et module défilant

    Bonjour,

    J'ai téléchargé le module LOF articles slideshow sur le JED.
    Je l'ai placé sur ma page d'accueil en headertop (position créée selon un tuto, au-dessus du logo et du menu), et je souhaite l'aligner à droite de cette position, et centrer le texte défilant dans le module. Le problème c'est que je ne sais pas comment y arriver. J'ai un fichier CSS dans modules/module lof articlesslideshow/assets nommé jstyle. Le voici :

    Code:
    /* CSS Document */
    .lof-ass{border:#F4F4F4 solid 1px; color:#FFF }
    .lof-ass .lofass-container{width:auto; height:auto	; overflow:hidden;	position:relative;}
    .lof-ass li { list-style-type:none!important; padding:0; margin:0}
    .lof-ass h4 { text-transform:inherit;margin:0!important;padding:0;background:none!important}
    .lof-ass .preload{height:100%;width:100%;background:#E9E9E9;position:absolute;top:0;left:0;z-index:100000;color:#FFF;text-align:center}
    .lof-ass .preload div{height:100%;width:100%;background:transparent url(images/load-indicator.gif) no-repeat scroll 50% 50%;}
    
    /* main flash */
    .lof-ass .lof-main-wapper{
    	overflow:hidden;
    	padding:0px;
    	height:100%;
    	width:600px;
    	position:relative;
    	overflow:hidden;
    	text-align:center;
    }
    
    .lof-ass .lof-main-wapper .lof-main-item{
    	overflow:hidden;
    	padding:0px;
    	height:100%;
    	width:100%;
    	position:absolute;	
    	text-align:center;
    }
    .lof-ass .lof-main-wapper .lof-main-item img{
    	padding:0px;	
    	text-align:center;
    }
    
    .lof-ass .lof-description{
    	z-index:3;
    	position:absolute;
    	bottom:20px;
    	left:50px;
    	max-width:600px;
    	background:url(images/transparent_bg.png);
    	
    
    	/* filter:0.7(opacity:60) */
    }
    .lof-ass .lof-description p{;
    	margin:0 8px;
    	padding:8px 0
    }
    .lof-ass .lof-description h4 a{;	
    	margin:0;
    	color:#FFF;
    	text-decoration:none;
    	text-transform:none;
    	font-size:140%;
    	padding:20px 8px 2px;
    	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
    	
    }
    .lof-ass .lof-description h4 a:hover{
    	color:#FF6;
    	text-decoration:underline;
    	
    }
    
    
    /* item navigator */
    .lof-ass ul.lof-navigator{top:0;padding:0;margin:0;position:absolute;width:100%;}
    .lof-ass ul.lof-navigator li{
    	cursor:hand; 
    	cursor:pointer;
    	list-style:none;
    	width:100%;
    	padding:0!important;
    	margin:0!important;
    	overflow:hidden;
    	background:none!important;
    	
    }
    .lof-ass .lof-navigator-outer{
    	position:absolute;
    	right:0;
    	top:00px;
    	z-index:3;
    	height:300px;
    	width:310px;
    	overflow:hidden;
    	
    }
    
    .lof-ass .lof-navigator li.active{
    	background:url(images/arrow-bg.png) no-repeat scroll left center!important;
    	
    }
    .lof-navigator li:hover{}
    .lof-ass .lof-navigator li h4{;
    	font-size:100%;
    	padding:15px 0 0 !important;
    	
    }
    .lof-ass .lof-navigator li div{
    	background:url(images/transparent_bg.png);;
    	height:100%;
    	position:relative;
    	margin-left:15px;
    	border-top:1px solid #E1E1E1;
    }
    
    .lof-ass .lof-navigator li.active div{background:url(images/grad-bg.gif);color:#FFF;}
    .lof-ass .lof-navigator li img{	margin:15px 15px 10px 0px;float:left;border:#F5F5F5 solid 2px;}
    .lof-ass .lof-navigator li:hover img{ -moz-transition:border-color 1s; border-color:#C3C3C3  }
    .lof-ass .lof-navigator li.active h4, .lof-ass .lof-navigator a{color:#FFF;padding:0;right:0}
    .lof-ass .lof-buttons-control  .lof-previous, .lof-ass .lof-buttons-control .lof-next {
    	z-index:4;
    	position:absolute;
    	top:45%;
    	height:38px;
    	display:block;
    	width:19px;
    	overflow:hidden;
    	text-indent:-999em;	
    	text-align:center;}
    .lof-ass .lof-next{	right:0;background:url(images/next.png) repeat;}
    .lof-ass .lof-previous{	left:0;	background:url(images/previous.png) repeat;}
    .lof-ass  .lof-proccessbar{  width:100%; height:4px; position:absolute; top:0px;background:url(bg.png); z-index:9 }
    
    .lof-ass    .lof-startstop{ width:54px;height:25px;cursor:hand; cursor:pointer; position:absolute; left:40%; z-index:8}
    .lof-ass   .lof-startstop div{ width:100%; height:100%;}
    .lof-ass   .lof-startstop .lof-start{ background:url(images/pause.png) no-repeat center center}
    .lof-ass    .lof-startstop .lof-stop{ background:url(images/play.png) no-repeat center center}
    Que dois-je modifier?

    Autre chose, à propos du template JA Elastica : je souhaite modifier la position du logo pour qu'il soit au-dessus du menu (donc à gauche de mon module slideshow). Dans ce template, le fichier template.css ne gère pas la position du logo. Que dois-je modifier? Enfin, j'aimerais pouvoir fixer la largeur du cadre contenant mes articles, le cadre est trop large à mon goût.

    Merci!

    Edit: désolé pour l'affichage du code, la prévisualisation du message m'affiche le code correctement, mais...
    Dernière édition par Utilisateur_49 à 16/04/2013, 13h45

  • #2
    Re : Template JA Elastica et module défilant

    Sur 84 lectures, personne ne travaille avec le module ou le template que j'utilise?

    Commentaire

    Annonce

    Réduire
    Aucune annonce pour le moment.

    Partenaire de l'association

    Réduire

    Hébergeur Web PlanetHoster
    Travaille ...
    X