mettre un post "en avant"

[@stra]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://quadra-motards.forum-pro.fr/

Description du problème

bonjour

Sur notre forum, les échange de messages sont assez nombreux, et j'ai du mal a mettre en avant ceux qui sont importants.
Serait-t'il possible  d'imaginer un système, dans le plugin des sujet déroulants, qui permette de laisser fixes, au-dessus des sujets qui défilent, ceux que l'on souhaite mettre en avant (ou autre solution )

je vois, ici, à gauche, l'affichage des derniers tutoriel, ça pourrait aussi répondre à mon besoin, mais comment faire ?

merci de votre aide et à bientôt :thanks: :

[stefou]

Bonjour,
Il suffi de les poster ou d'éditer le 1er sujet en "note" ou "annonce" ainsi il reste en tête de liste.

[MlleAlys]

Bonjour,
Pour créer un widget du type celui des tutoriels, vous pouvez créer un widget personnalisé et le remplir vous même en y mettant les liens vers les sujets souhaités.
Code pour un texte avec un lien en html :

Code:

<a href="ADRESSE DU LIEN"> TEXTE </a>

Remplacez ADRESSE DU LIEN par l'adresse de votre sujet, et TEXTE par son titre.
Ce qui peut donner par exemple ici pour un lien vers le tutoriel twitter :

Code:

<a href="http://forum.forumactif.com/t378672-le-bouton-tweet-de-twitter"> Le bouton "Tweet" de Twitter </a>

:tuto Installation, modification de widgets

[@stra]

Bonjour

ça fonctionne trés bien, merci.

L'idéal serait que le systeme permette, lors de la création d'un post, de cocher (par exemple) une case qui permettrait de laisser "en avant" (fixs) le post sélectionné.
Un peu comme sur le forum, mais là, ce serait dans le widget.

en tout cas merci de votre aide

(si j'osais, je vous demanderais comment obtenir une belle présentation comme ici, à gauche, je suppose que c'est du css, et je ne maitrise pas)

bon weekend

[MlleAlys]

Pour l'option, je ne saurais pas vous aider, pour la mise en forme css, c'est assez simple, surtout si vous maitrisez un peu l'anglais !

D'abord, il faut pouvoir appliquer la mise en forme seulement aux liens voulus. Donc on va mettre les liens dans un bloc et attribuer une class à ce bloc :

Code:

<div class="affiche">
    <a href="LIEN1"> NOM LIEN 1 </a>
    <a href="LIEN2"> NOM LIEN 2 </a>
    <a href="LIEN3"> NOM LIEN 3 </a>
</div>

Ici je l'ai appelé "affiche", en rapport avec le titre du widget, mais vous pouvez lui donner un autre nom, tant que ce n'est pas une class qui existe déjà autre part sur le forum ^^

Maintenant on peu appliquer la mise en forme aux liens qui sont dans ce bloc via css, le code css aura donc cette forme :

Code:

div.affiche a { LA MISE EN FORME ICI }

("div.affiche a" peut se traduire par "les balises <a ...> ... </a> qui sont dans une div de class affiche", ce qui correspond bien à nos lien)

En mise en forme pour chaque lien je peux vous proposer un affichage en "bloc" pour lui mettre un fond, des marges pour éviter que les blocs ne sont trop collés et serrés sur e texte, une bordure, et un petit arrondi sur les coins, ce qui donne le code css :

Code:

div.affiche a {
  display: block;
  padding: 5px;
  margin: 5px 0;
  background: rgb(42, 42, 42);
  border: 1px solid rgb(119, 119, 119);
  border-radius: 5px;
}

où
display: block; permet d'afficher les liens dans des blocs
padding: 5px; correspond à la marge intérieure du bloc pour éviter que le texte ne colle à la bordure
margin: 5px 0px; correspond à une marge extérieure pour éviter que les blocs ne soient collés entre eux (5px au dessus et en dessous, 0px à gauche et à droite)
background: rgb(42, 42, 42); correspond à la couleur de fond ici gris foncé (vous pouvez mettre un code en hexadécimal si vous préférez ^^)
border: 1px solid rgb(119, 119, 119); correspond à une bordure de 1px de type "solid" et de couleur grise (vous pouvez aussi mettre un code en hexadécimal si vous préférez)
border-radius: 5px; correspond au rayon de l'arrondi des coins.

Avec le css on peut aussi ajouter un code pour modifier cette mise en forme au passage de la souris sur le lien. Il faut pour cela utiliser la pseudo-class :hover
Par exemple :

Code:

div.affiche a:hover { LA MISE EN FORME ICI }

div.affiche a:hover peut être traduit par "les balises de type <a ...> ... <a> quand elles sont survolées par la souris et qui sont dans une div de class affiche"

Et la mise en forme pourrait être par exemple :

Code:

div.affiche a:hover {
  background: rgb(47, 47, 47);
  box-shadow: 1px 1px 3px black;
}

où
background: rgb(47, 47, 47); correspond à la couleur du fond du lien (au survol donc), ici un gris un peu plus clair
box-shadow: 1px 1px 3px black; correspond à un effet d'ombre.

Il 'y a pas besoin de remettre le reste de ce qu'on avait mis ans le code précédent, car c'est valable tout le temps, même au survol, ici on met juste ce qu'on veut voir changer quand on survole.

[@stra]

Merci

ça me convient trés bien, je testerai d'autres options dans le CSS, mais vous m'avez bien aidé

voici le rendu :

[@stra]

du coup je passe mon post en "résolu"