Kommunauty
Connexion
Inscription

[TUTO] Modifier l'apparence du left menu (menu de gauche)


algerino77 Messages : 180

Bonjour,

Voilà un petit tuto pour obtenir un left menu plus sympa et moins long:

Le tuto est basé sur un exemple, le reste étant similaire !

(Ex sur la page TECHNOLOGIE qui passe à droite du menu LABORATOIRE)

Tout ce passe exclusivement dans le fichier /templates/left-menu.tpl

Il faut trouver le code du menu Laboratoire:

{if !CheckModule(3)}<li>
    <span class="menu_icon">
        <img width="38" height="29" src="./styles/theme/{$Raza_skin}/imagenes/navegacion/menu_icon.png">
    </span>
          <a class="menu_boton " href="?page=buildings&mode=research"><span>{$lm_research}</span></a>
</li>{/if}

La ligne qui nous intéresse est la suivante:

<img width="38" height="29" src="./styles/theme/{$Raza_skin}/imagenes/navegacion/menu_icon.png">

Il faut préciser la page sur laquelle l'utilisateur va être dirigé lorsqu'il va cliquer sur l'image.

Voilà la meme ligne avec cette modification:

{if !CheckModule(28)}<a href="?page=techtree"><img width="38" height="29" src="./styles/theme/{$Raza_skin}/imagenes/navegacion/menu_icon_research.png">{/if}

Le {if !CheckModule(28)} {/if} est récupéré sur le code du menu de la page technologie.

On constate que la précision est apporté par <a href="?page=techtree"> devant l'image.

De même, le nom de l'image est modifié: menu_icon_research.png

Nous y somme presque. Pour cette étape, il faut maintenant placer l'image menu_icon_research.png au bon endroit.

Placer donc les images ici:

- styles/theme/gultra/imagenes/navegacion/menu_icon_research.png

- styles/theme/voltra/imagenes/navegacion/menu_icon_research.png

Je vous propose mes images:

Gultra:

Voltra:

Dernière étape: il faut supprimer l'ancien bouton menu pour la page technologie.

Pour cela, mettre simplement en commentaire les lignes suivantes:

{*	
{if !CheckModule(28)}<li>
<span class="menu_icon">
<img width="38" height="29" src="./styles/theme/{$Raza_skin}/imagenes/navegacion/menu_icon.png">
        </span><a class="menu_boton " href="?page=techtree"><span>{$lm_technology}</span></a>
</li>
{/if}
*}

Remarque: Pour mettre en commentaire, insérer au début un {* et à la fin un *}

Ces étapes sont à répéter pour modifier le reste des pages

Voilà

mardi 9 février 2016

Kaporal Messages : 43

Comme sur l'offi

mardi 9 février 2016

algerino77 Messages : 180
Kaporal :

Comme sur l'offi

C'est ca

mardi 9 février 2016

Répondre Pour répondre, tu dois d'abord t'inscrire rapidement sur Kommunauty. Rejoins-nous vite !