Joomladay francophone 2018 à Paris 18 et 19 mai

Position des drapeaux (joomfish) dans template

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

  • Position des drapeaux (joomfish) dans template

    Bonjour,

    Je travaille pour offrir une deuxième langue à mes visiteurs sur mon site www.timelapse-photo.com. Mais je fais face à un petit problème de position des drapeaux. J'ai un menu horizontal au sommet de mon site. J'aimerais placer les drapeaux à droite de ce menu.

    Dans le module "language selection" je peux choisir comme position "mainmenu". Lorsque je fais cela, je peux bien visualiser les drapeaux vers le menu, mais ils s'affichent en dessous.

    Comment dois-je modifier mon css pour visualiser mes drapeaux à droite du menu et pas en dessous?

    J'ai joint deux copies d'écran qui illustre mon problème (dans la deuxième on peut voir ou se sont placé les drapeaux) ainsi que mon fichier template.css et le fichier templateDetails.xml

    Cliquez sur l'image pour l'afficher en taille normale

Nom : withoutflag.JPG 
Affichages : 1 
Taille : 37,0 Ko 
ID : 1810854

    Cliquez sur l'image pour l'afficher en taille normale

Nom : withflag.JPG 
Affichages : 1 
Taille : 27,6 Ko 
ID : 1810853



    Mon fichier css
    Code:
    BODY#body{
    	margin:0;
    	padding:0;
    	text-align: center;
    	background: #000;
    }
    
    body, td, th, tr, p, div {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #333;
    	line-height: 145%;
    }
    #home_module div,
    #home_module p {
    	color: #666;
    }
    
    #right div,
    #right p {
    	color: #fff;
    }
    
    .moduletable {
    	margin: 0;
    	padding: 0px;
    }
    
    #content .moduletable {
    	padding-left: 0;
    }
    
    p {
    	margin:0;
    	padding: 10px;
    	padding-left: 0;
    }
    
    #left .moduletable,
    #left .moduletable_text,
    #left .moduletable_menu {
    	padding-left: 0px;
    }
    
    #wrapper {
    	position: relative;
    	width: 800px;
    	margin: 0 auto;
    	text-align: left;
    }
    
    #header {
    	position: relative;
    	height: 80px;
    }
    
    #logo {
    	position: absolute;
    	top: 30px;
    	left: 0;
    	width: 210px;
    	height: 120px;
    }
    
    #menu {
    	position: absolute;
    	right: 10px;
    	bottom: 10px;
    }
    
    #wrapper_content {
    	float: left;
    	width: 800px;
    	background: #fff;
    	padding-top: 10px;
    
    }
    
    #right {
    	width: 200px;
    	float: left;
    	padding-top: 10px;
    }
    
    #right .moduletable {
    	padding-left: 0px;
    }
    
    #right p {
    	padding: 10px;
    }
    
    #home_img {
    	width: 800px;
    	height: 178px;
    	text-align: center;
    }
    
    #home_module {
    	float: right;
    	width: 315px;
    }
    
    #in_img {
    	height: 178px;
            width: 800px;
            padding-left: 0px;
    }
    
    #left {
    	float: left;
    	width: 100px;
    }
    
    #content {
    	float: left;
            padding-left: 0px;
    	width: 800px;
    }
    
    #content-padding {
    	padding: 0px;
    }
    
    #footer {
    	text-align: left;
    }
    
    #logo img {
    	display: block;
    }
    
    .space {
    	height: 50px;
    }
    
    .clear {
    	clear: both;
    }
    
    
    /* GENERAL PURPOSE STYLES */
    
    a:link, 
    a:active, 
    a:visited {
    	color: #9B0F05;
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    }
    
    #header2 .moduletable {
    	padding: 0;
    	margin: 0;
    }
    
    .inputbox {
    	margin-right: 5px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #666;
    	border: 1px solid #ddd;
    }
    
    .sectiontableentry1 {
    	background-color: #fff;
    }
    
    .sectiontableentry2 {
    	background-color: #f9f9f9;
    }
    
    .small {
      font-size: 9px;
      text-decoration: none;
      font-weight: normal;  
    }
    
    form {
    	padding: 0;
    	margin: 0;
    }
    
    #footer a, 
    #footer a:link, 
    #footer a:visited,
    #right a:link, 
    #right a:visited  {
    	color: #999;
    }
    
    #footer a:hover {
    	text-decoration: underline;
    }
    
    .componentheading,
    .contentheading {
    	font-size: 13px;
    	color: #E13D0C;
    	font-weight: bold;
    	padding: 0;
    	margin: 0;
    	padding-bottom: 5px;
    	text-transform: lowercase;
    }
    
    
    /* new tags */
    
    h1, h2, h3, h4 {
    	margin: 0;
    	padding: 10px;
    	padding-bottom: 0;
    	padding-left: 0;
    }
    
    h1 {
    	font-size: 14px;
    }
    
    h2 {
    	font-size: 13px;
    	color: #333;
    }
    
    h3 {
    	font-size: 12px;
    }
    
    #left h3 {
    	padding-right: 0;
    	padding-bottom: 5px;
    	text-transform: lowercase;
    }
    
    #right h3 {
    	background: url(../images/right_h3.jpg) no-repeat left top;
    	padding: 5px;
    	padding-left: 10px;
    	text-transform: lowercase;
    	height: 24px;
    }
    
    #footer h3 {
    	display: none;
    }
    
    h4 {
    	font-size: 11px;
    	color: #333;
    }
    
    ul { 
    	margin: 2px;
    	padding: 6px;
    	padding-left: 15px;
    }
    
    li {	
    	list-style: none;
    	padding-left: 1px;
    	line-height: 150%;
    }
    
    #content li {
    	list-style-image: url(../images/arrow.png);
    }
    
    ul.arrow1 li,
    ul.arrow2 li {
    	padding-left: 5px;
    	padding-bottom: 2px;
    	padding-top: 2px;
    }
    
    ul.arrow1,
    ul.arrow2  {	
    	line-height: 150%;
    	padding-bottom: 3px;
    	margin-top: 2px;
    }
    
    ul.arrow1 li {	
    	list-style-image: url(../images/arrow1.jpg);
    }
    
    ul.arrow2 li {
    	list-style-image: url(../images/arrow2.jpg);
    }
    
    #left ul {
    	margin: 0;
    	padding: 0;
    	padding-left: 10px;
    }
    
    #left ul li {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	list-style-image: none;
    }
    
    #left ul li a, 
    #left ul li a:link, 
    #left ul li a:visited {
    	text-decoration: underline;
    	line-height: 20px;
    	font-size: 11px;
    	color: #666;
    }
    
    #left ul li a:hover,
    #left ul li a:active {
    	color: #E13D0C;
    }
    
    /* primary menu - at the top of this site */
    
    
    #menu ul, 
    #menu li {
    	list-style-type:none;
    	list-style-image:none;
    	padding: 0;
    	margin: 0;
    }
    
    #menu ul li {
    	float: left;
    	line-height: 30px;
    }
    
    #menu a, 
    #menu a:link, 
    #menu a:visited  {
    	font-size: 11px;
    	color: #C9C0A3;
    	padding-left: 6px;
    	padding-right: 8px;
    	text-transform: lowercase;
    }
    
    #menu ul li a:hover,
    #menu ul li a#active_menu {
    	text-decoration: underline;
    }
    
    
    img, fieldset {
    	border: 0;
    }
    
    #in_img .moduletable {
    	margin: 0;
    	padding-top: 0px;
            width: 800px;
    }
    
    #in_img ul {
            margin: 0;
            padding-left: 0px;
            padding-top: 0px;
          
    }
    template details.xml
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <install version="1.5" type="template">
      <name>tem_trentco</name>
      <creationDate>01/01/2008</creationDate>
      <author>cmslounge</author>
      <copyright>CMS Lounge</copyright>
      <authorEmail>info@cmslounge.com</authorEmail>
      <authorUrl>www.cmslounge.com</authorUrl>
      <version>1.0</version>
      <description>This is a free Joomla 1.5 template designed by CMS Lounge. Go to our website to get more like this.</description>
      <files>
    		<filename>css/index.html</filename>  
    		<filename>css/common.css</filename>
    		<filename>css/template_css.css</filename>
    		<filename>params.ini</filename>
    		<filename>index.php</filename>
    		<filename>overIE.js</filename>
    		<filename>template_thumbnail.png</filename>
    		<filename>images/arrow.png</filename>
    		<filename>images/arrow1.jpg</filename>
    		<filename>images/arrow2.jpg</filename>
    		<filename>images/indent1.png</filename>
    		<filename>images/home_img.jpg</filename>
    		<filename>images/in_img.jpg</filename>
    		<filename>images/logo.jpg</filename>
    		<filename>images/right_h3.jpg</filename>
    		<filename>html/com_content/archive/default_items.php</filename>
    		<filename>html/com_content/archive/default.php</filename>
    		<filename>html/com_content/article/default.php</filename>
    		<filename>html/com_content/article/form.php</filename>
    		<filename>html/com_content/category/blog_item.php</filename>
    		<filename>html/com_content/category/blog_links.php</filename>
    		<filename>html/com_content/category/blog.php</filename>
    		<filename>html/com_content/category/default_items.php</filename>
    		<filename>html/com_content/category/default.php</filename>
    		<filename>html/com_content/frontpage/default_item.php</filename>
    		<filename>html/com_content/frontpage/default.php</filename>
    		<filename>html/com_content/section/default.php</filename>
    		<filename>html/com_content/section/blog_item.php</filename>
    		<filename>html/com_content/section/blog.php</filename>
    		<filename>html/com_search/search/default_error.php</filename>
    		<filename>html/com_search/search/default_form.php</filename>
    		<filename>html/com_search/search/default_results.php</filename>
    		<filename>html/com_search/search/default.php</filename>
    		<filename>html/com_user/login/default_login.php</filename>
    		<filename>html/com_user/login/default_logout.php</filename>
    		<filename>html/mod_newsflash/_item.php</filename>
    		<filename>html/mod_newsflash/horiz.php</filename>
    		<filename>html/mod_poll/default.php</filename>
     </files>
    
     <positions>	
    		<position>mainmenu</position>
    		<position>footer</position>
    		<position>right</position>
    		<position>left</position>
    		<position>abovemain</position>
    		<position>belowmain</position>
    		<position>center_header</position>
    		<position>top</position>
    
    </positions>
    	<params>
    		<param name="authorName" type="list" default="yes" label="Author Name" description="Display author name on entries">
    			<option value="yes">Yes</option>
    			<option value="no">No</option>
    		</param>
    		<param name="dateCreated" type="list" default="yes" label="Date Created" description="Display date created on entries">
    			<option value="yes">Yes</option>
    			<option value="no">No</option>
    		</param>
    		<param name="dateModified" type="list" default="yes" label="Date Modified" description="Display date modified on entries">
    			<option value="yes">Yes</option>
    			<option value="no">No</option>
    		</param>
    		<param name="Buttons" type="list" default="yes" label="Buttons" description="Display Print, PDF, Email buttons on entries">
    			<option value="yes">Yes</option>
    			<option value="no">No</option>
    		</param>
    	</params>
    </install>
    J'ai également une autre question: Est-ce possible d'afficher les drapeaux en colonne plutôt qu'en ligne ?

    Merci d'avance pour tout conseil
    Dernière édition par skuallpa à 27/04/2009, 14h01

  • #2
    Il faut que tu ajoutes un style #menu ul {float:left;}

    Ancien pseudo : Fleuve Blanc

    Commentaire


    • #3
      Merci pour ta réponse fleuveblanc!

      Les drapaux se sont maintenant affichés à droite mais j'ai un problème d'alignement. Le texte du menu est monté trop haut.

      Cliquez sur l'image pour l'afficher en taille normale

Nom : timelapseFlags.JPG 
Affichages : 1 
Taille : 31,2 Ko 
ID : 1792622

      Une idée pour corrigé l'alignement?
      Aussi pour afficher les drapaux verticalement, as-tu une idée de quel fichier modifié?

      Merci d'avance

      Commentaire


      • #4
        Modifier les padding ou margin sur ces éléments. Si tu veux une réponse plus précise, il faut qu'on puisse le voir sur ton site.
        Ancien pseudo : Fleuve Blanc

        Commentaire


        • #5
          Pour info: pour corriger l'alignement des drapeaux il fallait modifier le fichier mod_jflanguageselection.css dans le module "language selection"

          Commentaire


          • #6
            Il me semble probable qu'il serait plus avisé de copier ces styles modifiés dans template.css. Si tu fais une mise à jour de joomfish, tu ne sera pas sur que mod_jflanguageselection.css ne sera pas mis à jour lui aussi.

            Ancien pseudo : Fleuve Blanc

            Commentaire

            Annonce

            Réduire
            1 sur 2 < >

            C'est [Réglé] et on n'en parle plus ?

            A quoi ça sert ?
            La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

            Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

            Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
            Comment ajouter la mention [Réglé] à votre discussion ?
            1 - Aller sur votre discussion et éditer votre premier message :


            2 - Cliquer sur la liste déroulante Préfixe.

            3 - Choisir le préfixe [Réglé].


            4 - Et voilà… votre discussion est désormais identifiée comme réglée.

            2 sur 2 < >

            Assistance au forum - Outil de publication d'infos de votre site

            Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

            Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

            Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

            UTILISER À VOS PROPRES RISQUES :
            L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

            Problèmes connus :
            FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

            Installation :

            1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

            Archive zip : https://github.com/AFUJ/FPA/zipball/master

            2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

            3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

            4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

            5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

            6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
            et remplacer www. votresite .com par votre nom de domaine


            Exemples:
            Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
            Télécharger le script fpa-fr.php dans: /public_html/
            Pour executer le script: http://www..com/fpa-fr.php

            Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
            Télécharger le script fpa-fr.php dans: /public_html/cms/
            Pour executer le script: http://www..com/cms/fpa-fr.php

            En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

            Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
            Voir plus
            Voir moins
            Travaille ...
            X