AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


3 résultats trouvés pour auteur_Manumanu

Manumanu

Restriction d'adresses emails à l'inscription - Mer 24 Sep 2014 - 3:09


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Si vous avez l'envie étrange de restreindre des adresses email par domaines à l'inscription de vos membres (par exemple, interdire les adresses en @gmail.com), alors ce plugin est fait pour vous.

Comment l'installer
  1. Il suffit d'aller dans votre espace d'administration, Modules → HTML & Javascript → Gestion des codes Javascript.
  2. Assurez-vous que "Activer la gestion des codes Javascript" est bien actif, puis cliquez sur "Créer un nouveau javascript".
  3. Dans la nouvelle fenêtre, copiez-collez simplement ce code, tel quel :

    Code:
    var emailrestrict=function(e,t){"use strict";var n=function(e,t){var n=e.split("@");for(var r in t){if(n[1]===t[r]){alert('Les adresses de type "'+t[r]+'" ne sont pas autorisées.');return true}}return false};var r=function(t){var r=e("#form_register"),i=r.find("#email");r.on("submit",function(e){if(n(i.val(),t)){e.preventDefault()}})};return{init:r}}(jQuery);

    $(document).ready(function() {
        emailrestrict.init([
            // La liste
            'gmail.com',
            'mail.com',
            'voila.fr',
            'yahoo.com'
        ]);
    });



Attention : C'est à vous de remplacer / ajouter / supprimer des domaines dans la liste prévue à cet effet ; mettez chaque domaine entre guillemets et en séparant chaque domaine par une virgule.

Pensez bien à cocher "Toutes les pages", validez, et c'est tout !

Désormais, les utilisateurs qui tenteront d'utiliser un domaine mail restreint verront un message d'erreur au moment de l'inscription :

Tag auteur_manumanu sur Never Utopia - graphisme, codage et game design Mails-49a2855


Une note sur la fiabilité
Le javascript peut être désactivé par un utilisateur, et donc rendre cette vérification totalement inopérante. Il s'agit plus d'une indication restrictive que d'une véritable interdiction.

Une note sur la compatibilité
Ce script ne fonctionne pour l'instant que sur un forum phpBB2.

Évolutions
Si vous avez d'autres fonctionnalités en tête, faites-le moi savoir.

Si vous êtes développeur JS et que vous souhaitez voir le code pour l'adapter à vos besoin ou travailler dessus et proposer des ajouts ou autres améliorations, vous pouvez forker.

Enjoy !

Pour les devs, vous pouvez voir le script sur GitHub : https://github.com/RhooManu/forumactif-emailrestrict

Manumanu

Gérer son header, son fond, et son logo - Dim 24 Aoû 2014 - 1:00



Présentation du tutoriel


Sur beaucoup de forum, je rencontre des problèmes d'intégration du fond, du logo, du header ou des trois. Souvent, les trois sont même totalement confondus. Voici une mise au point et quelques conseils.

Explications


Séparez votre fond et votre logo !



Tag auteur_manumanu sur Never Utopia - graphisme, codage et game design Head-3c90a70
Un bon exemple à suivre

C'est bête à dire, mais peu de gens le font, et mettent ensuite une image vide par-dessus le fond pour avoir un lien cliquable... Faite votre fond et votre logo séparé, et mettez le logo sur un png transparent, c'est autrement plus simple et pratique ! De plus, vous pourrez changer de fond sans changer de logo, et inversement ! Ça vous donne aussi la possibilité d'avoir un fond répété sans vous casser la tête.

Alors si vous avez lu ceci, vous n'avez plus aucune excuse pour perpétuer cette sale manie !


Choisir un fond...


Toutes les images ne peuvent pas servir de fond. Enfin si, mais toutes ne le devraient pas. Par "fond", j'entend "tout" le fond du forum, et non simplement l'entête (header).

Oubliez le wallpaper magnifique que vous avez trouvé sur Google Image, avec tous ces elfes/ces arbres/ces maisons/autres trucs magnifiques. Un fond doit être SIMPLE, sans quoi il prend plus d'importance visuelle que le contenu du site, et en perturbe la lecture. De plus, une image de ce genre ne peut pas être répétée gracieusement, et donc il se produira un effet mosaïque d'autant plus perturbant :

Tag auteur_manumanu sur Never Utopia - graphisme, codage et game design Fondrepeat-3c9912d
Un fond répété... Pas terrible.

Vous pensez peut-être qu'il suffit d'afficher l'image en plein écran ? Encore une mauvaise idée : Une image n'est pas faite pour être étirée. Si le résultat est bon sur votre écran, pensez à ceux qui en ont un plus grand : Il verront une bouillie infame de pixels, et probablement mal proportionnée :


Tag auteur_manumanu sur Never Utopia - graphisme, codage et game design Fondetire-3c99242
Un fond étiré... Pas mieux.

C'est pour toutes ces excellentes raisons que votre image de fond devrait être un pattern prévu pour être répétable, ou bien une couleur unie !

BONUS-TIME
Une idée chouette pour vos sites : Le pattern de fond transparent sur une couleur unie. Par exemple, cette image :
Tag auteur_manumanu sur Never Utopia - graphisme, codage et game design Noize-338456b
Elle donne à n'importe quel fond un effet "bruit" un peu granuleux. Vous pouvez donc l'appliquer en backgroud, en plus d'une couleur, sur n'importe quel élément (fond de page ou pas) :

Code:
element {
   background: #6aa690 url("http://img82.xooimage.com/files/f/c/6/noize-338456b.png");
}


Choisir un header


Le choix d'un header est différent, et peut-être tout à fait complémentaire avec un fond (même un fond en image). Tout d'abord, il faut savoir que grâce au CSS3, vous pouvez appliquer plusieurs images de fond à un élément :
Code:
element {
   background: url("image1.png") no-repeat, url("image2.png") repeat-x;
}


Spécifications de la propriété background (eng)

Ainsi, il faudra ajouter ces images non pas dans l'interface d'image "fond" de ForumActif que nous avons vu plus haut dans l'image de présentation, mais directement dans le CSS, sur la balise body. Pour ça, rendez-vous dans votre panneau d'administration → Affichage → Couleurs → Feuille de Style CSS.
Votre code serait alors celui-ci :

Code:
body {
   background: url("imageHeader.png") no-repeat center top,
          url("imageDeFond.jpg") repeat 0 0;
}


Mais venons-en au choix (ou la création) de l'image "header" en elle-même. Là encore, le redimensionnement n'est pas foncièrement une bonne idée, pour les mêmes raisons que plus haut... L'utilisation d'un fond prévu pour être répété est grandement conseillée. En revanche, il est possible de faire une image suffisament large pour la grande majorité des écrans (2600px de large), pourvu que sa taille reste légère à charger (chercher le meilleur compromis).

Le meilleur choix à mon sens reste de faire un header qui s'incruste parfaitement sur n'importe quel fond, c'est à dire sans "cassure" par rapport aux bords de l'image. Quelques exemples :


Tag auteur_manumanu sur Never Utopia - graphisme, codage et game design Ltm-3ca12be
Sur cette image, le logo est le texte "Litanies des Terres Mortes", le fond est la couleur gris foncé unie, et le header est l'image d'arbre, dont les bords ont été gommés avec une brosse douce (Photoshop, ou n'importe quel logiciel d'image) afin que la rupture ne soit pas "brutale".

Tag auteur_manumanu sur Never Utopia - graphisme, codage et game design Carbonsugar
Sur cette image, le logo est "*carbon sugar", le fond est le bois (vous l'avez reconnu !), et le header est le joyeux bazar.


Il n'y a rien de plus ici que cette simple séparation : fond, header, logo. Vous avez maintenant tous les codes nécessaires pour faire de même. Alors à vous de jouer. Wink


Petite note copyright


Le header de carbon sugar et l'image de l'arbre sont la propriété de leur auteur respectif.
Le site "Les Litanies de l'Ombre" m'appartient. Pour le reste, comme d'habitude : C'est gratuit.

Manumanu

Choix de background pour vos utilisateurs - Dim 17 Aoû 2014 - 3:34


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Salut à tous,

Je viens de me fendre d'un petit plugin permettant de proposer à vos membres le choix d'une image de fond, sur l'élément que vous voulez (que ça soit votre en-tête, le fond de votre chatbox, le fond du forum, etc.). Le choix est ensuite sauvegardé, et l'utilisateur retrouvera ce fond à chaque page visitée, y compris après fermeture du navigateur.

Le projet sur GitHub - Exemple en live sur CodePen

1. Préparer le html
La première chose, c'est de créer un sélecteur. Si vous n'êtes pas familier avec les éléments de formulaire en html, vous pouvez vous référer au chapitre "les listes déroulantes" sur OpenClassrooms.

Il va donc falloir ajouter un bout de code dans votre template. À vous de voir où vous souhaitez le mettre. Par défaut, je vous suggère de lui trouver une place dans le template overall_header, après <body>. Pour cela, allez dans votre interface d'administration, puis "Affichage" → "Templates" → "Général". Après toute modification, pensez à appliquer celles-ci (bouton "+" vert une fois que vous aurez sauvegardé, dans la liste des templates).

Voilà un exemple du code à mettre :
Code:
<select id="change-background" class="select">
   <option value="image1" data-image="http://adresseimage1.jpg">Image 1</option>
   <option value="image2" data-image="http://adresseimage1.jpg">Image 2</option>
   <option value="image3" data-image="http://adresseimage1.jpg">Image 3</option>
   <option value="image4" data-image="http://adresseimage1.jpg">Image 4</option>
</select>



  • value="" est un identifiant pour l'élément sélectionné dans la liste. Veillez à ce que chaque valeur soit unique !
  • data-image="" doit contenir l'url (adresse) de votre image. Elle peut être hébergée n'importe où.


Sur la balise <select>, l'ID peut être modifié selon votre envie, mais attention à bien reporter la modification dans le Javascript par la suite. La classe ne sert qu'à styliser votre élément en CSS, vous pouvez choisir ce que vous voulez.


À vous, par la suite, d'appliquer du CSS pour améliorer le rendu du sélecteur, modifier sa position, etc.

2. Préparer le JS
Vient ensuite le moment d'ajouter le plugin à vos scripts. Pour ça, vous avez deux solutions :

La première, c'est d'ajouter un nouveau script directement dans l'administration de votre forum. Pour ça, rendez-vous sur "Modules" → "HTML & Javascript" → "Gestion des codes Javascript". Enfin, cliquez sur "Créer un nouveau Javascript".

Là, vous allez devoir remplir quelques champs. Indiquez un titre, cochez "toutes les pages", et dans le dernier champ, on écrira le code indiqué plus loin.

Tag auteur_manumanu sur Never Utopia - graphisme, codage et game design Capture-d-cran-20...03.12.11-472ae0c

La seconde méthode, c'est d'ajouter le script directement dans votre html ; vous pouvez faire ça dans votre template overall_header, JUSTE AVANT la ligne </head> (et non <head> !), ou bien dans overall_footer_end, JUSTE AVANT la ligne </body>.

Dans un cas comme dans l'autre, voici comment ajouter le code :

Code:
<script type="text/javascript">
   /* ici le contenu du script que l'on verra plus loin */
</script>


Maintenant que tout ceci est prêt, voilà le code en question (en deux parties distinctes). D'abord, le plugin en lui-même (minifié et compressé pour un gain de place / poids) :

Code:
(function(e,t){e.fn.changeBackground=function(t){t=e.extend({target:"body"},t);this.each(function(){function a(e){r.css({"background-image":'url("'+e+'")'})}function f(){n.val(localStorage[s])}var n=e(this),r=e(t.target),i="fondForum:"+window.location.host+"Img",s="fondForum:"+window.location.host+"Select",o,u;if(localStorage[i]){a(localStorage[i]);f()}n.on("change",function(){u=n.find(":selected").data("image");o=n.val();a(u);localStorage.setItem(i,u);localStorage.setItem(s,o)})});return this}})(jQuery);


Vous pouvez le copier-coller directement aux emplacements présentés plus tôt.

Ensuite, il faut instancier le plugin sur le sélecteur html. Pour ça, on ajoute ceci juste après le code qu'on vient de copier :

Code:
$(document).ready(function() {
   $('#change-background').changeBackground();
});


La première ligne sert à attendre que jQuery (et la page en elle-même) ait fini de charger. La seconde, c'est celle qui nous intéresse.

On y appelle le plugin sur notre élément (le sélecteur). Remarquez (si vous n'êtes pas familier avec le jQuery) que la syntaxe est la même que pour le CSS. Ainsi, on avait défini un attribut id="change-background" sur notre élément html, on l'appelle donc avec le croisillon (non, ce n'est pas une dièse). Si vous changez votre ID dans le html, vous devez le changer ici aussi.


Ensuite, enregistrez votre code. Le voici fonctionnel.

3. Les options
En l'état, le plugin fonctionne par défaut sur l'élément body (le fond de la page). Vous pouvez ajuster ce point en modifiant l'instanciation du plugin (voir juste au-dessus).

Code:

$(document).ready(function() {
   $('#change-background').changeBackground({
      target: '.monElement'
   });
});


La syntaxe change légèrement : On passe une option au plugin. Ici, l'élément important est '.monElement'. C'est une syntaxe CSS classique, à vous d'écrire le sélecteur CSS qui convient pour cibler l'élément sur lequel vous souhaitez agir, en lieu et place du body.


4. Multiple
Vous pouvez avoir plusieurs sélecteurs. Il faut que ceux-ci aient un ID différent dans le html. Ensuite, il suffit de les instancier chacun à leur tour :

Code:
$(document).ready(function() {
   $('#change-background').changeBackground();
   $('#autre-element').changeBackground();
});


Conclusion
Je ne cache rien, vous pouvez prendre tout ça en l'état. N'hésitez pas à poser des questions si besoin. Il est possible que le plugin évolue avec le temps et propose de nouvelles options et d'autres fonctionnalités, ou bien qu'il soit simplement amélioré ; auquel cas, ce sera signalé ici. Il vous suffira de copier/coller le nouveau code pour le remplacer.


Revenir en haut

La date/heure actuelle est Ven 29 Mar 2024 - 7:52