Se connecter avec
S'enregistrer | Connectez-vous

[Résolu] Modification template Joomla

Dernière réponse : dans Programmation

Salut à tous,

1er topic et sûrement 1er post "utile" dans cette section ! :D 

Je vous expose mon problème.

J'ai un site à faire pour mon père, pour son boulot. Je me suis tourné vers un CMS car c'est le plus simple pour moi, et surtout pour lui, pour ajouter des articles, etc. J'ai donc choisi Joomla.

Mais là, il me demande de faire quelques modif' de présentations. J'en ai déjà fait quelques unes tout seul, mais pour les autres, ne connaissant rien au css, je ne sais pas comment faire.

Je ne peux pas mettre le vrai site car il est privé (compte-rendus de réunion, etc) donc je vous explique sur le site démo du template : http://www.joomlademos.de/home?template=kodadesign


  • Je voudrais passer certains menus à droite en conservant la même présentation (celle du Hauptmenü). Lorsque je déplace à droite, le menu devient blanc comme Wer ist online ou Advertising.

  • Je voudrais également dégager toute la partie au dessus de la barre de menu horizontale (le topmenu).

    Comme j'imagine que vous avez besoin du .css, voici l'archive du template : http://www.joomlaos.de/option,com_remository/Itemid,41/func,download/id,3518/chk,b5f384bd0f52a05b792c271561c926ca/no_html,1/fname,kodadesign.zip.html


    Si vous avez besoin de détails, n'hésitez pas. :jap: 

    Merci d'avance à celui qui pourra m'aider. :D 

    • Autres pages sur : resolu modification template joomla

    Lassé par la pub ? Créez un compte

    Après quelques explications plus claires avec Loni sur MSN, j'ai la solution pour la présentation des menus de droite.

    Il me dit de préciser mon histoire alors voilà. Lorsque le menu de gauche (barre bleue, puces vertes) passait à droite - déplacement via l'interface de gestion de Joomla - le "Suffixe de classe de module" que l'on peut définir dans l'interface d'admin n'était plus pris en compte.

    Le menu de gauche utilise le Suffixe de classe de module "_menu". Si on le vire, le barre bleue passait blanche et les puces vertes passaient en noires, etc.

    Bref, voilà la solution pour ce souci.



    Dans le fichier templates/kodadesign/css/template.css, il suffit de remplacer les lignes 322 à 375 :

    1. div#left div.moduletable_menu {
      

    2. 	margin-bottom:10px;
      

    3. 	text-align: left;
      

    4. 	background-image: url('../images/module_menu_bg.gif');
      

    5. 	background-repeat: repeat-y;
      

    6. 	position: relative;
      

    7. 	padding:30px 10px 20px 10px;
      

    8. 	border-bottom: 1px solid  #E3EAEE;
      

    9. }
      

    10.  
    11.  
    12. div#left div.moduletable_menu h3 {
      

    13. 	margin: 0px;
      

    14. 	top: 0px;
      

    15. 	left: 0px;
      

    16. 	display:block;
      

    17. 	width:185px;
      

    18. 	height: 9px;
      

    19. 	position: absolute;
      

    20. 	background-image: url('../images/module_menu_t.gif');
      

    21. 	background-repeat: no-repeat;
      

    22. 	padding:7px 0px 10px 20px;
      

    23. 	color: #FFFFFF;
      

    24. 	font-size: 1.17em;
      

    25. }
      

    26.  
    27. div#left div.moduletable_menu ul {
      

    28. 	margin: 0px 0px 0px 0px;
      

    29. 	padding: 0px;
      

    30. 	list-style-type: none;
      

    31. }
      

    32.  
    33. div#left div.moduletable_menu ul li {
      

    34. 	border-bottom: 1px solid #e3eaee;
      

    35. 	padding: 5px 10px;
      

    36. }
      

    37. div#left div.moduletable_menu ul li ul li {
      

    38. 	border:0px;
      

    39. }
      

    40. div#left div.moduletable_menu ul li a {
      

    41. 	line-height: 1.2em;
      

    42. 	font-size: 0.92em;
      

    43. 	text-decoration: none;
      

    44. 	color:#003456;
      

    45. 	display:block;
      

    46. 	padding-left:15px;
      

    47. 	background-image: url('../images/bullet_menu.gif');
      

    48. 	background-repeat: no-repeat;
      

    49. 	background-position: 0px 4px;
      

    50. }
      

    51.  
    52. div#left div.moduletable_menu ul li a:hover {
      

    53. 	text-decoration: underline;
      

    54. }


    par 

    1. div#right div.moduletable,
      

    2. div#left div.moduletable_menu {
      

    3. 	margin-bottom:10px;
      

    4. 	text-align: left;
      

    5. 	background-image: url('../images/module_menu_bg.gif');
      

    6. 	background-repeat: repeat-y;
      

    7. 	position: relative;
      

    8. 	padding:30px 10px 20px 10px;
      

    9. 	border-bottom: 1px solid  #E3EAEE;
      

    10. }
      

    11.  
    12. div#right div.moduletable h3,
      

    13. div#left div.moduletable_menu h3 {
      

    14. 	margin: 0px;
      

    15. 	top: 0px;
      

    16. 	left: 0px;
      

    17. 	display:block;
      

    18. 	width:185px;
      

    19. 	height: 9px;
      

    20. 	position: absolute;
      

    21. 	background-image: url('../images/module_menu_t.gif');
      

    22. 	background-repeat: no-repeat;
      

    23. 	padding:7px 0px 10px 20px;
      

    24. 	color: #FFFFFF;
      

    25. 	font-size: 1.17em;
      

    26. }
      

    27.  
    28. div#right div.moduletable ul,
      

    29. div#left div.moduletable_menu ul {
      

    30. 	margin: 0px 0px 0px 0px;
      

    31. 	padding: 0px;
      

    32. 	list-style-type: none;
      

    33. }
      

    34.  
    35. div#right div.moduletable ul li,
      

    36. div#left div.moduletable_menu ul li {
      

    37. 	border-bottom: 1px solid #e3eaee;
      

    38. 	padding: 5px 10px;
      

    39. }
      

    40.  
    41. div#right div.moduletable ul li ul li,
      

    42. div#left div.moduletable_menu ul li ul li {
      

    43. 	border:0px;
      

    44. }
      

    45.  
    46. div#right div.moduletable ul li a,
      

    47. div#left div.moduletable_menu ul li a {
      

    48. 	line-height: 1.2em;
      

    49. 	font-size: 0.92em;
      

    50. 	text-decoration: none;
      

    51. 	color:#003456;
      

    52. 	display:block;
      

    53. 	padding-left:15px;
      

    54. 	background-image: url('../images/bullet_menu.gif');
      

    55. 	background-repeat: no-repeat;
      

    56. 	background-position: 0px 4px;
      

    57. }
      

    58.  
    59. div#right div.moduletable ul li a:hover,
      

    60. div#left div.moduletable_menu ul li a:hover {
      

    61. 	text-decoration: underline;
      

    62. }


    Merci Loni !

    Reste plus qu'à trouver comment supprimer tout le bloc gris (logo) au dessus de la barre de menu horizontale bleue, pour faire remonter le tout !

    Bon, deuxième question résolu aussi par Loni via MSN.

    Pour supprimer le logo et tout ce qui va avec, il suffit de supprimer les lignes suivantes dans le fichier index.php du template :

    1. <div id="header">
      

    2. 				<div id="headerl">
      

    3. 					<div id="headerr">
      

    4. 						<div id="logo"></div>
      

    5. 						<jdoc:include type="modules" name="top" />
      

    6. 					</div>
      

    7. 				</div>
      

    8. 			</div>


    Ce sont les lignes 53 à 60 !

    où plutôt les commenter, si jamais on veut les remettre par la suite... :o 

    on remplace 
    1. <div id="header">
      

    2. 				<div id="headerl">
      

    3. 					<div id="headerr">
      

    4. 						<div id="logo"></div>
      

    5. 						<jdoc:include type="modules" name="top" />
      

    6. 					</div>
      

    7. 				</div>
      

    8. 			</div>


    par 
    1. /* <div id="header">
      

    2. 				<div id="headerl">
      

    3. 					<div id="headerr">
      

    4. 						<div id="logo"></div>
      

    5. 						<jdoc:include type="modules" name="top" />
      

    6. 					</div>
      

    7. 				</div>
      

    8. 			</div> */
    Lassé par la pub ? Créez un compte

    Créer un nouveau sujet

    Tom's guide dans le monde