Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par @To le Ven 26 Juin 2015 - 12:54

Détails techniques


Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:
[img][/img]

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.diamant-mandarin-evo.com/

Description du problème

Hello à tous Very Happy

J'aimerais revoir mon pop up de connexion.

Sur PunBB, quel est le code CSS pour ajouter une ombre, modifier la taille, arrondir les bords, modifier la couleur de fond, modifier l'entête du pop up, un peu comme le pop up de connexion du forum des forums qui me plaît Cool .

Merci de votre aide.


Dernière édition par tony26 le Ven 26 Juin 2015 - 20:04, édité 1 fois

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par MlleAlys le Ven 26 Juin 2015 - 14:31

Bonjour,

En punbb la popup est un bloc d'identifiant #login_popup
Vous pouvez donc modifier l'ensemble du bloc par exemple ainsi :
Code:
#login_popup {
  border-radius: 20px; /*arrondi des coins*/
  box-shadow: 1px 1px 15px black;  /*effet d'ombre*/
  background-color: yellow;  /*couleur de fond*/
  width: 500px !important;  /*largeur*/
  height: 200px !important;  /*hauteur*/
}

Si vous modifiez la taille par contre, il y a un risque que la popup ne soit plus correctement centrée.

Le bloc contenant le titre est quant à lui d'identifiant #login_popup_title , et le titre lui même de classe .h3 , ce qui peut donner une mise en forme du type :
Code:
#login_popup_title {
  background: none; /*fond du titre*/
}
#login_popup_title .h3 {
  color: red;  /*couleur du titre*/
  font-variant: small-caps;  /*petites majuscules*/
  font-size: 18px;  /*taille du titre*/
  border-bottom: 2px dashed blue;  /*bordure du bas*/
  text-align: center;  /*titre centré*/
}

Le message lui même est dans un bloc de class .main-content et peut donc être mis en forme à partir du code suivant :
Code:
#login_popup .main-content {
  /*la mise en forme ici*/
}

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par @To le Ven 26 Juin 2015 - 14:44

Bonjour,

Génial! Very Happy Merci pour votre aide, je vais testé tout cela.

Bonne après midi ensoleillée sunny

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par @To le Ven 26 Juin 2015 - 15:11

J'obtiens des pointillés en dessous du titre, comment puis-je modifier cet aspect svp?

Est-il possible de modifier le titre du popup de connexion et modifier les touches "connexion" etc en leur mettant un couleur de fond par exemple?

J'en demande beaucoup.. désolé, mais sympa le rendu! Very Happy

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par MlleAlys le Ven 26 Juin 2015 - 15:49

..Je vous rappelle qu'il est autorisé un seul double post par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné. Pour ajouter ou modifier des informations si ce délai n'est pas passé, merci d'éditer votre message précédent plutôt que de poster à nouveau directement à sa suite.

Je vous invite à lire :

A bientôt sur ForumActif Smile


Pour retirer les pointillés, retirez la ligne
border-bottom: 2px dashed blue; /*bordure du bas*/

Pour ajouter un fond au titre, modifiez cette ligne :
background: none; /*fond du titre*/
en remplaçant "none" par le code de la couleur de votre choix.

Pour modifier les boutons, utilisez le code suivant :
Code:
#login_popup_buttons input {
  background: blue;  /*fond des boutons*/
  color: white;  /*couleur de texte des boutons*/
}

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par @To le Ven 26 Juin 2015 - 19:24

Merci encore pour les précisions Very Happy

J'aurais 2 dernières demandes si possible..:

Comment faire pour ne coloriser q'un des boutons "S'enregistrer" et/ou "Ne plus afficher".

ET enlever le bouton connexion svp.

Bonne soirée

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par MlleAlys le Ven 26 Juin 2015 - 19:31

retirer le bouton connexion :
Code:
#login_popup_buttons input[value="Connexion"] {
  display: none;
}

coloriser s'enregistrer :
Code:
#login_popup_buttons input[value="S'enregistrer"] {
  background: blue;
}

coloriser ne plus afficher :
Code:
#login_popup_close {
  background: green;
}

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par @To le Ven 26 Juin 2015 - 19:45

Magnifique!

Par contre le bouton "Ne plus afficher" ne se colorise scratch

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par MlleAlys le Ven 26 Juin 2015 - 19:54

Le code fonctionne bien chez moi, vérifiez qu'il est bien installé, qu'il n'y a pas d'erreur dans les précédents.
Je ne vois pas trace des codes sur le forum, les avez-vous retirés ? Si oui, pourriez vous les réinstaller pour que je puisse chercher pourquoi le code ne fonctionne pas ?

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par @To le Ven 26 Juin 2015 - 19:56

Je test sur mon forum d'essai avant de mettre en place sur mon forum Very Happy

Voici le lien du forum d'essai: http://forumessai.superforum.fr/

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par MlleAlys le Ven 26 Juin 2015 - 20:02

Ah oui, c'est parce que vous avez laissé le premier code, qui écrase celui là du coup, modifiez
Code:
#login_popup_buttons input {
  background: blue;  /*fond des boutons*/
  color: white;  /*couleur de texte des boutons*/
}
en
Code:
#login_popup_buttons input {
  color: white;  /*couleur de texte des boutons*/
}

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Sur PunBB, quel est le code CSS pour modifier le po up de connexion?

Message par @To le Ven 26 Juin 2015 - 20:04

En effet! oups.. c'est réglé Very Happy

Merci MlleAlys pour votre aide précieuse. Je vous souhaite une bonne soirée.

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum