Comment: Un nouveau petit site Yacs

Bon je suis nul en CSS, PHP et autre acronyme de ce site... et ceci est d'un bas niveau pour certain du site... mais voilà... en créant le site, je me pose des questions que beaucoup de nouveaux vont surement ce poser... Alors ce me propose de tenir une liste des questions que je me pose et des solutions que j'aurais trouvé ou seul ou sur les forums...

La premiére chose que j'ai faite:

Dérivé un style pour le modifier (comme dit dans la doc). Je suis partie du skin skeleton.

Puis changer les images dans \yacs\skins\RanaSkeleton\images , pour avoir une base de couleur orange et un bandeau avec le logo de l'association.

 

La premier soucis: Pour afficher le logo il a fallu que je change la hauteur de l'image header_background.jpg et une fois la page afficher les onglets se retrouvé au même endroit et me bouffer tout le bas de mon image que j'avait ajouter.

Premiére lesson: Si on change la hauteur de l'image d'entête header_background.jpg il faut allez dans le fichier .css de votre style change les paramêtres suivant.

Localiser la chaine suivante:

<p></code></p>
<p>#header_panel { /* comes before everything */<br />
    background-image: url("images/header_background.jpg");<br />
    margin: 0;<br />
    padding: 0;<br />
    width: 100%;<br />
    max-width: 90em;<br />
    position: relative;<br />
    min-height: 5em;<br />
    height: 5em;<br />
    border-width: 1px;<br />
    border-style: solid solid none solid;<br />
    border-color: #000;<br />
}</p>
<code>

Changer min-height et height avec des valeurs qui corespondent à la hauteur de votre bandeau... pour moi cela done:

<p></code></p>
<p>    min-height: 7.5em;<br />
    height: 7.5em;</p>
<code>

 

Ensuite en modifiant les images yacs_background.png, yacs_top.png, yacs_bottom.png on donne le look de la page. En modifiant side_header.gif le look des boites des menus.

Voilà c'est tout... il y as maintenant un nouveau look...

Juste un petit  probléme:... dans l'affichage du menu sous forme d'arbre lorsque l'on est dans des sous-sections... la derniére sous branche reste en bleu et ne prend pas votre look...

Juste une petite solution: Toujours dans le fichier .css de votre skin.

Localiser les lignes

<p></code></p>
<p>#contextual_menu ul.tree_level_2 li.last,<br />
#contextual_menu ul.tree_level_3 li.last,<br />
#contextual_menu ul.tree_level_4 li.last,<br />
#contextual_menu ul.tree_level_5 li.last { /* last item of a branch */<br />
    background-image: url("icons/tree/last.gif");<br />
    background-color: #8483AF; /* mask the default ul background -use the exact underlying background color */<br />
    background-repeat: no-repeat;<br />
    background-position: 0px 0px;<br />
}</p>
<p>Supprimer la ligne background-color et tout fonctionne....</p>
<code>

 

Un dernier petit ajustement: Le titre du site RANA apparait en plein sur mon logo... et j'aimerai le déplacer pour l'afficher à coté du logo de Rana...

La solution: Toujours est encore le fichier magique .css de votre skin localiser le texte suivant.

<p></code></p>
<p>#header_title { /* appears towards the top of the page -- see template script */<br />
    position: absolute;<br />
    top: 0;<br />
    left: 0;<br />
    margin: 0; /* need for IE Mac */<br />
    padding: 12px 0 0 20px;<br />
    font-size: 1.3em;<br />
    font-weight: bold;<br />
    color: #5F697E;<br />
    background: transparent;<br />
}</p>
<code>

et jouer avec top et left...

<p></code></p>
<p>    top: 40px;<br />
    left: 110px;</p>
<code>

 

Voilà, j'ai plein d'autre modif à faire, je vais m'amuser à chercher, et si je trouve pas je posserai des questions sur le forum.

 

On vois qu'il y as plein d'autres paramêtres possible à modifier  pour le titre, la baniére (la plus part je ne sait pas à quoi ils servent). Si vous avec des questons voir avec les guru du site... Moi c'est service minimum, j'ai besoin de ça, je touche à ça et cela à l'air de marcher....

 

YACS, c'est trops cool, trop fort, trop flexibe, trop top...