28 résultats trouvés pour auteur_Onyx

Salut !

MAJ Onyx 04/04/2017 : Le tutoriel a été modifié et bonifié grâce au tutoriel de alsacréations que vous pouvez également lire si vous le souhaitez ^^

Vous vous demandez sûrement à quoi peuvent servir les media queries ? C'est simple, comme écrit dans le titre au-dessus, ils permettent d'adapter la mise en page (css) selon le type d'écran, l'appareil utilisé, le type d'impression et autre.

Grâce à eux, on pourra avoir le même rendu d'une page web, d'un site ou d'un forum sur une tablette, un netbook (un mini ordinateur, donc un écran plus petit) et un ordinateur normal. En gros, les media queries règlent les problèmes d'affichages par rapport au types d'écrans qu'on utilise, ce qui est nettement plus agréable quand on est sur un forum par exemple.

Premièrement, regardons certains types de media queries possibles :
screen = Écran
handheld = Appareils mobiles ou de petite taille
print = Impression (parce que je suis une troll qui aime faire disparaître des choses quand les gens impriment, bwahahaha *Onyx se fait kicker*)
aural (CSS 2.0) / speech (CSS 2.1) = Synthèses vocales (pour les personnes aveugles ou ayant un handicap visuel plus de détails ici)
braille = Plages braille (pour les personnes aveugles ou ayant un handicap visuel plus de détails ici)
embossed = Imprimantes braille (pour les personnes aveugles ou ayant un handicap visuel)
projection = Projecteurs
tv = Télévision (Pour ceux qui aiment les gros écrans et branchent leur ordinateur à une télévision par exemple)

Comme vous le constatez, les media queries nous permettent de voir quel média est utilisé pour regarder/utiliser votre site/forum.

Les media queries fonctionnent un peu comme si cela envoyait un message à votre appareil qui dit "est-tu un screen?" ou "es-tu une télévision?" et votre appareil répond par "oui" ou "non".

Vous pouvez même vous amuser à plus d'information dans les questions de media, comme "es-tu un screen ET as-tu une largeur d'écran de moins de 1024px?". Comment? On va le voir, ne vous inquiétez pas ^^

À noter que la plupart des mobiles sont frustrants et se considèrent comme "screen" à la place de "handheld", malheureusement.

---

Passons à la pratique, donc comment utiliser les médias.

Commençons en passant par notre CSS :

Code:

/*CSS normal qui s'applique à n'importe quoi*/
.nomdeclass {
  propriété: valeur;
}

/*CSS pour les écrans qui ne dépassent pas 1024px*/
@media screen and (max-width: 1024px) {
  .nomdeclass {
    propriété: valeur;
  }
}

Le "screen" and (max-width: 1024px)" veut dire quel code sera appliqué quand si le visiteur utilise un screen (écran) dont la largeur ne dépasse pas 1024px.

---

On peut aussi adapter la mise en page à des écrans compris par exemple entre 1024px et 1280px.

Dans ce cas, notre code sera comme ceci :

Code:

/*CSS normal qui s'applique à n'importe quoi*/
.nomdeclass {
  propriété: valeur;
}

/*CSS pour les écrans qui dépassent 1024px et ne dépassent pas 1280px*/
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .nomdeclass {
    propriété: valeur;
  }
}

Grâce à ça, les problèmes d'affichage de la page en fonction du type d'écran utilisé peut être réglé pour que cela soit plus agréable à regarder ^^

---

Histoire de ne pas surcharger notre page de CSS, il est également possible d'utiliser une feuille de CSS externe.

Pour ce faire, vous ajoutez ce bout de code dans la balise "head" de votre template Overhall_header :

Code:

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="URL DE LA FEUILLE DE CSS" type="text/css" />

Comme vu plus haut, vous modifiez l'attribut "media" par ce que vous voulez affecter comme "screen and (max-width: 1024px)" ou "screen and (min-width: 1024px) and (max-width: 1280px)".
Vous mettez ensuite le lien de votre feuille CSS à la place de URL DE LA FEUILLE DE CSS.

Pour ce qui est de comment héberger une feuille de CSS, je vous réfère à ce tutoriel.

---

Quand on ajoute du CSS média à notre CSS de base, il ne faut pas oublier que c'est un ajout. Du coup, tout ce qu'il y a dans le CSS de base s'applique en premier et le CSS média va venir s'appliquer après le CSS de base.

Exemple :
J'ai une image à laquelle j'ai donné la largeur 500px et un bloc auquel j'ai donné un background bleu dans mon CSS de base.
Je ne mets rien dans le CSS média pour "écran de plus de 1280px".
L'image sera quand même à 500px de largeur et le bloc sera quand même bleu pour un "écran de plus de 1280px" parce que je n'ai pas indiqué le contraire dans mon CSS média.

---

C'est tout ce qui me passe à l'esprit, soyez indulgents envers-moi, c'est ma première fois ^^

Edit Responsable : Puisque le tutoriel utilisait plusieurs notions dépassées et templates qui n'existent plus, il a été remplacé par un bout de CSS tout aussi utile.

Bonjour!

Combien de fois cette question a-t-elle été posée:
"Comment on arrondis la barre de catégorie en haut?"
ou
Comment on arrondit cette barre?


Voici un petit ou gros tutoriel bien pratique qui arrondira tous les hauts de tableau (catégories, qeel, pa, etc.).
Attention, cela fonctionne seulement sur phpBB2.
Aussi, pour éviter que cela soit hyper laid, je vous recommende d'enlever les bordures des tableaux.

Il suffit de mettre ceci dans le CSS :

Code:

.forumline > tbody > tr > th:nth-child(1) {
  border-top-left-radius: 13px;
}
.forumline > tbody > tr > th:nth-last-child(1) {
  border-top-right-radius: 13px;
}
.catHead {
  border-radius: 13px 13px 0px 0px;
}
.catBottom {
  border-radius: 0px 0px 13px 13px;
}

Admirez votre travail. Pas mal, non?

Édit Onyx : Le LS a été refait de A à Z suite aux modifications du widget par Forumactif. Il fonctionne maintenant pour toutes les versions.

Bonjour à tous !

Comme vous le savez sans doute, Forumactif propose un certain nombre de widgets dont le plus connu est l'affichage des derniers sujets auxquels il y a eut une réponse. Ce tableau est bien pratique mais plusieurs d'entre nous aimeraient sans doute pouvoir l'utiliser ailleurs que sur le portail ou dans les widgets latéraux.

Étape 1 - Activer les widgets

Tout d'abord, vous devez activer les widgets.

Pour cela, rendez-vous sur :
> Panneau d'administration
> > Modules
> > > Portail et Widgets
> > > > Gestion des widgets du forum

Puis, vous vous assurez que le widget des derniers sujets est le premier widget en haut à droite (quitte à supprimer tous les autres).
Vous vous assurez que, dans le widget des derniers sujets, le défilement est activé.

---

Étape 2 - Mettre les derniers sujets où on veut

Nous allons maintenant allez où on veut placer les derniers sujets.

Puis, vous mettez le code suivant où vous voulez que les derniers sujets s'affichent :

Code:

<div id="derniers_sujets"></div>

---

Étape 3 - Installer le javascript

Nous allons ensuite mettre un javascript dans :
> Panneau d'administration
> > Modules
> > > HTML & Javascript
> > > > Gestion des codes Javascript

Vous vous assurez que la gestion des codes javascript est activée.

Vous créez un nouveau javascript.
Vous choisissez le placement "sur l'index" si vous voulez que cela s'affiche seulement sur la page d'accueil
Vous choisissez le placement "sur toutes les pages" pour l'afficher partout.

Vous collez ce javascript et vous enregistrez :

Code:

$(function(){
 
  /*Chemin pour phpBB3, Invision et PunBB*/
  var pour_phpbb3_invision_punbb = '#left .module:first .js-marquee:first';
 
  /*Chemin pour phpBB2*/
  var pour_phpbb2 = '#left .forumline:first .js-marquee:first';
 
  /*Aller chercher le contenu des derniers sujets avec les chemins*/
  var widget_derniers_sujets = $(pour_phpbb2 + ',' + pour_phpbb3_invision_punbb).html();
 
  /*On ajoute le contenu der derniers sujets dans le bloc où on veut qu'ils soient*/
  $('#derniers_sujets').html(widget_derniers_sujets);
 
});

---

Étape 4 - Allez mettre un peu de CSS

Enfin, on met ceci dans le CSS :

Code:

/*Fait disparaître la colonne des widgets*/
#left {
  display: none;
}
/*Personnaliser le contenu des derniers sujets*/
#derniers_sujets {
width: ;
}

Voilà, c'est tout ^^

Si jamais vous voulez que les derniers sujets défilent, je vous invite sur ce tutoriel.