We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Remplacer "Inscription" sur le bloc de connexion | Forum

Guido
Guido Oct 19 '15
Bonsoir,
Est-ce que quelqu'un sais comment changer le mot "Inscription" sur le bloc de connexion contre un bouton?
J'essayé d'appeler le bouton directement via le clé inscription, mais ça ne marche pas.
Je joints une image pour expliquer ce que j'aimerai faire.

Marci d'avance
Attachments:
  2.jpg (82Kb)
Norias
Norias Oct 19 '15
Il va falloir aller modifier le code source de la page.


Recherche la clef dans les fichiers d'oxwall et tu devrais trouver où mettre le code du bouton.

Guido
Guido Oct 19 '15
Est-ce que je peux dans le code source directement remplacer le mot inscription avec un <src....>pour appeler le bouton ou faut-il faire aussi autre chose?
Norias
Norias Oct 19 '15

Ca se passe dans le fichier ow_system_plugins/base/views/components/sign_in.html


Aux lignes 26 à 30 on a le code qui donne la partie de droite, le coté où apparaît "INSCRIPTION": 


<div class="ow_sign_up">

<p>{text key='base+base_sign_in_txt'}</p>

<hr>

<p>{*text key='base+base_sign_in_or_label'*} <a href="{$joinUrl}">{text key='base+join_submit_button_join'}</a></p>

</div>


J'ai mis une partie du code en italique car il est commenté, je l'enlève pour y voir plus clair : 


<div class="ow_sign_up">

    <p>{text key='base+base_sign_in_txt'}</p>

    <hr>

    <p><a href="{$joinUrl}">{text key='base+join_submit_button_join'}</a></p>

</div>


c'est le dernier <p> qui nous intéresse :


<p><a href="{$joinUrl}">{text key='base+join_submit_button_join'}</a></p>


Il est possible de le remplacer par autre chose...

Mais à la prochaine mise à jour, il faudra de nouveau aller le modifier...



C'est pourquoi il vaut mieux agrémenter le texte de quelque css pour lui donner l'apparence d'un bouton ;)

Car le css qu'on entre sur la page /admin/appearance/customize/css sera conservé lors des mises à jours.


On va donc chercher à atteindre le texte de la clef base+join_submit_button_join


On remarque que ça se passe dans un div avec la classe css : ow_sign_up

Pour toucher le dernier <p> de cette classe, on utilise :last-child

Ensuite on va ajouter un "a" pour être sur le texte lié.

Ca donne :


.ow_sign_up p:last-child a


C'est ce qu'on va utiliser pour y ajouter du css :


.ow_sign_up p:last-child a {

padding: 7px 24px;

color: #ffffff;

text-decoration: none;

background-color: #d0451b;

border: 1px solid #942911;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}


Pour un effet de roll over, ajouter :


.ow_sign_up p:last-child a:hover {

background-color: #ff8800;

color: #cc0000;

}



Avec quelques règles simple on a un bouton... simple ;)


On trouve pas mal de sites qui aident à la création de boutons en générant du code css.

Suffit de googler quelque chose comme "css button generator"

Mais attention, les codes proposés sont souvent surchargés de déclarations pouvant entrer en conflit avec celles déjà utilisées.



Guido
Guido Oct 20 '15
Cool. Merci pour tous ces éxplications. Je vais regarder ça plu tard, car je cherché trois fois mais je ne toujours pas trouver /admin/appearance/customize/css.
Je fouiller tous les dossiers, soit il faut je change les lunettes, soit je suis déjà aveugle lol.
Norias
Norias Oct 20 '15
C'est l'url de la page où on peut ajouter du css perso ;)


www.tonsite.c0m/admin/appearance/customize/css

Guido
Guido Oct 20 '15
Je pense je vais essyer la prémière solution, car je ne comprend rien lol. je ne trouve pas cette page et comme je met l'adresse, se la page de connexion qui s'affiche. Et je ne pas le moindre idée ou se trouve cette page pour le modifier
Norias
Norias Oct 20 '15
C'est une page dans la partie admin, il faut donc que tu sois connecté en tant qu'admin pour pouvoir y accéder.
Guido
Guido Oct 20 '15
Je suis conneté en tant que Admin, mais je ne pas trouvé. Après je fait une rechercher sur le serveur. La non plus ell n'été pas trouvé lol. C'est ça je ne comprend pas. Je n'arrive pas à trouvé cette page
Guido
Guido Oct 20 '15
Ouff trouvé. Il fallait je switch en anglais pour le trouvé lol
Guido
Guido Oct 20 '15
Et le code, je l'ajoute simplement en bas du cs ou dans une section exacte?
Guido
Guido Oct 20 '15
En plus, dans "Edit CSS" je déjà qulque chose:
.ow_page_wrap .ow_sign_in_cont {
    background-size: cover;
}
Est-ce que il faut laisser ça ou l'enléver?
Norias
Norias Oct 20 '15
C'est un code que j'avais ajouté ;)

Ca permet d'ajuster l'image de fond à la taille de la page.


Ajoute le nouveau code à la suite.

Guido
Guido Oct 20 '15
à ok lol. Bon, je vais essyerça
Norias
Norias Oct 20 '15
enleve le "align: center" qui n'est pas du css, et ça devrait aller ;)
Guido
Guido Oct 20 '15
lol.c'est dèja fait. Je vu, ça ne marche pas. J'essaye de mettre le bouton au milieu du champ. L'hover ne marche pas non plus, mais ça c'est ne pas grave.
Je doit ajouter quoi pour le mettre au milieu?
La couleur je vais changer à la fin
Guido
Guido Oct 20 '15
je changé la couleur et le border. Il me reste de décendre le bouton un peu (j'essayé avec margin-top mais ça ne marche pas) et de le mettre en milieu et le tour est joué lol
Norias
Norias Oct 20 '15

pour déplacer le conteneur, et le centrer :


.ow_sign_up p:last-child {

padding-top: 20px;

width: 170px;

margin: 0 auto;

}



Pour le rollover :


.ow_sign_up p:last-child a:hover {background: red;}

Guido
Guido Oct 20 '15
Il's pas centré correctement. J'ajouté un "margin-left" et maintenant tout fonctionne à merveille.
Je te remercie 1000 fois pour ta préciesue aide

Bonne journée
Norias
Norias Oct 20 '15
Il est centré par rapport à son conteneur... 


Bonne continuation

Pages: 1 2 »