Tuto: modifier le menu de CSS

Modifier le menu de CSS


Voici un menu d' origine :


 
  Le menu de Counter Strike Source est accessible quand on démarre le jeu, avant de se connecter à un serveur. Il est en général situé en bas à gauche. Nous avions déjà vu dans un précedent tuto comment le déplacer. Dans ce tuto je vais vous montrer comment changer la couleur de ce menu, sa police et sa taille :
voici quelques exemples:

 

 Vous pourrez obtenir un menu personnalisé qui ne ressemblera à aucun autre !



1_ Chercher et ouvrir le fichier Sourcescheme.res


 - Se rendre dans le répertoire de Css, et ouvrir le dossier "Resource", ici:


C ou D:\Program Files\Counter Strike Source 2010\cstrike\resource
ou
C ou D:\Program Files\Steam\SteamApps\Counter Strike Source 2010\cstrike\resource


- Localiser le fichier "Sourcescheme.res" puis double cliquer dessus pour l' ouvrir (s' ouvre naturellement avec le Notepad de Windows)

remarque: pour vous rendre + rapidement dans le répertoire de css, vous pouvez faire un clic droit sur le raccourcis Css de votre bureau, puis "propriete", et "rechercher la cible".


2_Changer la couleur du menu


- Localiser cette partie qui nous interesse:




- Si vous avez suivi les précédents tutos, vous savez que la couleur est au format RVBA (Rouge, Vert, Bleu et Alpha. Alpha etant la transparence). Elle est donc décrite par 3 nombres.
 
- Pour la couleur du menu, changer les valeurs de la ligne "MainMenu.TextColor", dans mon cas elles sont: "0 0 0 255" (noir opaque):


   


- Pour choisir une couleur et trouver le code correspondant, rendez vous sur ce site. Choisissez votre couleur et récupérer la suite de 3 nombres se trouvant sur la colone nommée "R; G; B Dec":





- Pour cet exemple, je vais choisir de mettre mon menu dans un rose vif. Je repère le code correspondant (composé de 3 nbres donc), ce qui donne pour le rose: 255;20;147

-
Je vais donc remplacer le code couleur du noir par celui du rose, tout en gardant l' opacité maxi à 255. Je ne garde pas les points virgules, mais un espace à la place, ce qui va me donner ça:

MainMenu.TextColor            "255 20 147 255"




- On peut déjà allé tester dans Css si notre menu a bien changé ou pas. N' oubliez pas d' enregistrer avant de lancer Css. Voilà ce que ça donne pour mon exemple:

   
   

[NB: ce n' est pas la police d' origine. Nous allons voir plus bas ds ce tuto, comment la changer]


3_Changer la couleur du menu quand la souris est sur le texte


- Quand on passe la souris sur un élément du menu, on voit que le texte change de couleur. Dans mon cas il devient blanc:




- Pour changer cette couleur, nous allons nous interesser à la ligne suivante:

MainMenu.ArmedTextColor        "200 200 200 255" 




- Donc choisir une couleur, copier le code RGB dec et le mettre à la place des valeurs actuelles. Toujours avec un espace entre les nombres. J' ai choisi un bleu turquoise (code:0;255;255), ce qui va me donner ça:

MainMenu.ArmedTextColor        "0 255 255 255"

 


- On peut aussi aller tester en lançant Css, après avoir enregistrer (sinon pas de changement !):





  
  
  
4_Changer la distance entre chaque ligne


- Accessoire, cette "option" peut être utile si vous avez un menu avec pleins d' éléments, donc un long menu. Vous pourrez augmenter ou diminuer l' espace entre les lignes, comme ici:





- Pour cela, modifier la valeur située sur cette ligne: MainMenu.MenuItemHeight        "30".



  

Remplacer la valeur "30" par un nombre + grand et l' interlignage' sera + grand, et inversement. Dans cet exemple j' ai utilisé la valeur 50, ce qui donne ça:

MainMenu.MenuItemHeight        "50"


5_Changer la police et la taille du menu

- Voici la partie la plus importante ! Changer la police du texte et accessoirement sa taille. Commençons donc par la police. Pour cela, vous devrez avoir une police d' écriture (ou 'font') à disposition.

- Cette police devra etre de préférence installée sur votre pc (dossier Font du dossier "Windows" dans C:\Windows\Font)

- A présent rendons nous un peu plus bas dans le même fichier "Sourcescheme.res", et localiser cette partie: "MenuLarge":



[ps: J' avais déjà ajouté une police, vous ce sera verdana, Trebuchet ou autre à l' origine]


- Sur la ligne "Name", a la place du nom de la police, mettez celui de la police que vous voulez utiliser. Dans mon cas je vais utiliser la police Transformers Movie (sans l' extension ".ttf"). Ce qui va me donner ça:





- Puis se rendre tout en bas du fichier "Sourcescheme.res", là:





- On va ajouter une ligne juste en dessous de: "1"        "resource/HALFLIFE2.ttf". On va ajouter:

"2"        "resource/Transformers Movie.ttf"






explication
:Il s' agit d' indiquer au jeu que l' on a modifié une police, et ou il pourra la trouver: dans le dossier "Resource".

- C' est pourquoi nous allons maintenant copier coller notre font dans le dossier "Resource":







- si on va tester vite fait dans Css, on trouvera notre police changée. N' oubliez pas d' enregistrer:



 

- Changeons la taille de la police du menu. Pour cela, toujours dans le fichier "Sourcescheme.res", juste en dessous de la police, on va changer la valeur en face de "tall":




 
 
 
 
 
 
 
 
 
 
 
- j' ai mis "tall" à 38, avec cette police voilà ce que ça donne:




 Voilà pour ce tuto. Vous savez maintenant changer la couleur du menu, sa police et sa taille, ainsi que l' espacement entre chaque ligne. Vous pouvez vous amuser à tester diverses polices et couleurs, jusqu' à trouver celle qui vous convient le mieux.
 Il est à noter que certaines polices (farfelues) ne fonctionneront pas car pas acceptées. Avant de tester, penser à enregistrer, penser aussi à placer une copie de votre police dans le dossier "Resource". Je ne suis plus sûr mais je crois que la police utilisée doit être installée sur votre pc (dossier "Font" de Windows).









 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Votre adresse IP est :

Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site