[Question] Mettre des widgets sur le côté de son forum

[Heung-Min Hidem]

Bonsoir,

J'ouvre ce sujet parce que je souhaite mettre des widgets sur mon forum sauf qu'ils se placent pas à l'endroit que j'aimerais!

Voici le forum sans ceci et où je souhaiterais qu'ils soient (encadré rouge).



Et voici comment ils se placent quand je l'active:



Concernant le forum où je souhaiterai mettre en place ceci, c'est un forum en phpBB2, les templates ainsi que le CSS ont été modifiés. Et je suis le fondateur du forum.

Au passage, modifié la largeur dans la page de gestion des widgets ne fait rien, du moins pas ce que je souhaite car je les voudrais dans la zone de mon encadré rouge.

Je vous remercie de votre attention,
Cordialement Cedino.

[Neptunia]

Bonjour ^^


PA > Général > Forum > Configuration
-> Largeur du forum (nombre ou %) :

Ce nombre correspond à votre première capture, il comprend la largeur totale de votre forum widgets inclus.

Sans widgets, l'index occupera toute cette largeur. Avec widgets c'est l'index qui sera rétréci donc votre seconde capture est tout à fait normale.

Pourrions nous avoir l'adresse de votre forum (celui de votre profil ne semble pas être le bon) ainsi que le contenu de votre feuille CSS ?

[Heung-Min Hidem]

Bonjour Neptune-,

Tout d'abord, je vous remercie pour votre réponse. Toutefois, ceci ne va pas régler mon problème je pense. C'est de ma faute, mon premier message ne devait pas être assez clair je pense, désolé. J'aimerais toujours garder ces marges autours du forum (bandes grises) et y mettre justement les widgets ici, vous voyez ce que je veux dire? Un peu comme mes petites images coulissantes sur la droite.

D'ailleurs, merci de m'avoir prévenu pour le lien de mon forum. En effet, mon profil n'était plus à jour, je vais modifier ça tout de suite.

Voici le lien de mon forum: http://www.kpopfans-france.com/forum

Mon CSS:

Code:

/********** MENU**********************************************************************************/

/* LISTE */
ul#conteneur {
position: fixed;
margin: 0;
padding: 0;
top: 50px;
right: 0px;
list-style: none;
z-index: 999;
}
/* ÉLÉMENT DE LA LISTE */
ul#conteneur li {
width: 98px;
margin: 6px 0;
      padding: 0;
}


/* LISTE2 */
ul#conteneur2 {
position: fixed;
margin: 0;
padding: 0;
top: 50px;
left: 0px;
list-style: none;
z-index: 999;
}
/* ÉLÉMENT DE LA LISTE */
ul#conteneur2 li {
width: 198px;
margin: 6px 0;
      padding: 0;
}

/* BLOC DE CHAQUE MENU */
.block_tfa {
background: #333;
      display: block;
width: 98px;
border: 1px solid #000;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
      padding: 5px;
}
/* SPAN CONTENANT LE LIEN DU BAS */
.lien_bas {
      display: block;
padding: 2px;
background: #555555;
border: 1px solid #000;
font: 10px Arial;
font-style: italic;
}
/* LIEN DU BAS */
.lien_bas a {
text-decoration: none;
color: #fff !important;
outline: none;
}
/* LIEN DU BAS AU SURVOL */
.lien_bas a:hover {
color: #76c0ff !important;
}

/********** SOULIGNEMENT PSEUDOS *********************************************************************************/
a { text-decoration: none; }


/********** PA *************************************************************************************************/

/******************************************************************************/

/* PAGE ACCUEIL */

/* Fond */
.fondsgénéraux {
  background-color: #FFFFFF;
  width: 600px;
  height: 500px;
  padding: 15px;
  color: #767676;
}

.blocpa {
  width: 220px;
  padding: 15px;
  background-color: #E2E2E2;
}

.blocpa:hover {
  width: 220px;
  background-color: #E2E2E2;
}

/* Titres */
.titrePA1 {
  font-family: Calibri;
  font-size: 35px;
  color: #000000;
  z-index: 1px;
  position: relative;
}

.titrePA2 {
  font-family: parisienne;
  font-size: 25px;
  color: #000000;
  position: relative;
}

.titrePA2:hover {
  font-family: parisienne;
  font-size: 25px;
  color: #000000;
  position: relative;
}

.titrePA3 {
  font-family: parisienne;
  font-size: 25px;
  color: #000000;
  position: relative;
}

.titrePA3:hover {
  font-family: parisienne;
  font-size: 25px;
  color: #000000;
  position: relative;
}

/* Système onglets */
.paonglet {
  display: inline-block;
  cursor: pointer;
}

.contenu_paonglet {
  display: none;
  width: 250px;
  height: 350px;
  background-color: #E2E2E2;
}

.contenu_paonglet:hover {
  display: none;
  width: 250px;
  background-color: #E2E2E2;
}

/* Info-bulles staff */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}

d.info:hover {
  z-index: 25;
}
 
d.info span {
  display: none;
}
 
d.info:hover span {
  display: block;
  position: absolute;
  top: -2em;
 left: -2em;
  width: 120px;
  height: 50px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Info-bulles prédef */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}
 
c.info:hover {
  z-index: 25;
}
 
c.info span {
  display: none;
}
 
c.info:hover span {
  display: block;
  position: absolute;
  top: -4.0em;
 left: -0.2em;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Images Prédef */
.imgPA {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

/* Images Staff */
.imgwidget {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgwidget:hover {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* Top Sites */
.tops {
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  width: 40px;
}

.tops:hover {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  width: 40px;
}
/********** CHATBOX *********************************************************************************/

body.chatbox{
 background-image:url(URL);
}
 
.chatbox_row_1,.chatbox_row_2,.chatbox_row_3 {
background: none;
}


/********** PROFIL *********************************************************************************/

 .avatar_mess
{
  display: block;
  width: 200px;
  height: 320px;
  margin-left: -10px;
  margin-right: 10px;
  overflow: hidden;
  background: #272726;
  border: 5px solid #3e1d19;
  transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -htm-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  box-shadow: 0px 0px 6px #000000;
  -moz-box-shadow: 0px 0px 6px #000000;
  -o-box-shadow: 0px 0px 6px #000000;
  -htm-box-shadow: 0px 0px 6px #000000;
  -webkit-box-shadow: 0px 0px 6px #000000;
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.avatar_mess:hover
{
  margin-left: 5px;
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess
{
  position: absolute;
  display: block;
  width: 190px;
  height: 310px;
  margin: auto;
  padding: 5px;
  overflow: auto;
  background: #6b664e;
  color: #c5bea0;
  font-size: 11px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.pseudo_mess
{
  display: block;
  position: relative;
  z-index: 2;
  width: 190px;
  margin-top: -15px;
  margin-left: 10px;
  text-align: center;
  font-size: 18px;
  font-family: courier;
  font-weight: bold;
  text-shadow: 0px 0px 3px #c5bea0;
  background: #E3CD9A;
  padding-top: 5px;
  border-left: 3px solid #371e1a;
  border-right: 3px solid #371e1a;
  border-top: 1px solid #371e1a;
  border-bottom: 1px solid #371e1a;
  box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  -o-box-shadow: 0px 0px 3px #000000;
  -htm-box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;
}

/* TEST */

#newbottom
{
clear: both;
background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
background-repeat: no-repeat;
background-position: center;
height: 500px;
}

/*******************************************************************************/

/* QEEL */

.trans .row1 {
background-color: #CDCCC8;
}

.titreqeel {
  color: #2E3454;
  font-family: 'Finger Paint', cursive;
  font-size: 45px;
  text-align: center;
}

.cadreqeel {
  background-color: #CDCCC8;
  color: #5C5C5C;
  padding: 15px;
  width: 210px;
  height: 190px;
  text-align: justify;
  font-family: arial;
  font-size: 10px;
  -moz-border-radius: 310px;
  -webkit-border-radius: 310px;
  border-radius: 310px;
}

.cadreqeel1 {
  background-color: #CDCCC8;
  color: #5C5C5C;
  padding: 15px;
  width: 210px;
  height: 190px;
  text-align: justify;
  font-family: arial;
  font-size: 10px;
  -moz-border-radius: 310px;
  -webkit-border-radius: 310px;
  border-radius: 310px;
}

.cadreqeel2 {
  background-color: #CDCCC8;
  color: #5C5C5C;
  padding: 15px;
  width: 500px;
  height: 100px;
  overflow: auto;
  text-align: justify;
  font-family: arial;
  font-size: 10px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.boite10 {
  margin-left: 20px;
  margin-top: 25px;
  width: 180px;
  height: 180px;
  overflow: auto;
}

.groupes {
  font-family: 'Gabriela', serif;
  text-align: center !important;
  font-size: 20px;
}

/***************************************************************************/
td.row1.over:hover .respos {
display: block;
}
 
.respos {
display: none;
position: absolute;
}

body.chatbox {
    background-color: #ffffff;
}
/***************************************************************************/
  /* fiche */
/* DEBUT - CSS FICHE */
.reglement fieldset {
  -webkit-border-radius: 20px;
  -webkit-border-top-right-radius: 50px;
  -webkit-border-bottom-left-radius: 50px;
  -moz-border-radius: 20px;
  -moz-border-radius-topright: 50px;
  -moz-border-radius-bottomleft: 50px;
  border-radius: 20px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  text-align: justify;
  border: 3px solid Crimson;
  padding: 0px;   
}

.reglement fieldset p {
  padding: 10px;
}

.reglement fieldset legend {
  font-size: 25px;
  padding: 10px;
  color : Crimson;
  font-family: Georgia;
  font-style: italic;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px white;
  align: center;
}

.soustitre {
  display: block;
  -webkit-border-radius: 20px;
  -webkit-border-top-right-radius: 50px;
  -webkit-border-bottom-left-radius: 50px;
  -moz-border-radius: 20px;
  -moz-border-radius-topright: 50px;
  -moz-border-radius-bottomleft: 50px;
  border-radius: 20px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  margin-left: -3px;
  background-color: Crimson;
  text-align: center;
  color: white;
}
/* FIN - CSS FICHE */

/* debut fiche de presentation des groupes */
/* cadre exterieur */
 
.bandprez{
  width:500px;
  margin:0 auto;
  background-color: #DEDDDD;
}
 
/* cadre image du groupe */
 
.bandtof{
  width:500px;
  height:200px;
  position:relative;
}
 
/* titre banderolle du groupe */
 
.bandtof div{
  width:500px;
  position:absolute;
  bottom:0;
  background:Black;
  z-index:1;
  opacity:0.8;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  -khtml-opacity:0.8;
  text-align:center;
  font-family:Arial;
  font-size:12px;
  text-transform:uppercase;
  line-height:16px;
  color:White;
}
 
/* style du contenu */
 
.bandcontent{
  padding:30px;
  text-align:justify;
  font-family:Arial;
  font-size:12px;
  line-height:12px;
  color:#1D1D1D;
}
 
/* grands titres */
 
.bandtitle{
  text-align: center;
  font-family: Fjalla One;
  font-size: 24px;
  text-transform: uppercase;
  padding-top: 10px;
}
/* fin fiche de presentation des groupes */

/*****************************************************************************/
   

De plus, comment faire pour modifier l'apparence des widgets? Avec le CSS mais quelles sont les choses à modifier?

Je vous remercie de votre réponse,
Cordialement.

[Neptunia]

Je pense que j'avais bien compris le premier message mais comme je vous l'ai indiqué la largeur que vous assignez à votre forum inclut la largeur des widgets

Si votre forum est défini en px, il vous faudra donc augmenter sa largeur de celle des colonnes de widgets.
Exemples :
- Forum sans widget défini à 800px et vous voulez deux colonnes de widgets de 150px chacune, il vous faudra régler la largeur forum à 1100px (150+800+150)
Avec une largeur définie en pixels, les membres avec un petit écran auront une barre de défilement horizontale en bas de page
- Forum défini à 80%. Si vous souhaitez que les widgets occupent toute la place restante, il vous faudra porter la largeur fofo à 100%

La largeur du forum est un ensemble. Si vous voulez modifier la taille de l'index, il vous faudra agir sur la largeur des widgets et l'index occupera la place laissée vacante par les widgets.

[AenigmA]

Bonsoir Cedino
Regarde le forum de mon profil et dis moi si c'est ce que tu veux
Je te répondrais demain, fatigué ce soir.

[Heung-Min Hidem]

Je pense que j'avais bien compris le premier message mais comme je vous l'ai indiqué la largeur que vous assignez à votre forum inclut la largeur des widgets

Si votre forum est défini en px, il vous faudra donc augmenter sa largeur de celle des colonnes de widgets.
Exemples :
- Forum sans widget défini à 800px et vous voulez deux colonnes de widgets de 150px chacune, il vous faudra régler la largeur forum à 1100px (150+800+150)
Avec une largeur définie en pixels, les membres avec un petit écran auront une barre de défilement horizontale en bas de page
- Forum défini à 80%. Si vous souhaitez que les widgets occupent toute la place restante, il vous faudra porter la largeur fofo à 100%

La largeur du forum est un ensemble. Si vous voulez modifier la taille de l'index, il vous faudra agir sur la largeur des widgets et l'index occupera la place laissée vacante par les widgets.

Je suis navré alors. Je vous remercie pour vos explications complémentaires, je vais plutôt essayer de m'orienter vers une autre approche dans ce cas. Je vais voir pour essayer celle proposer par AenigmA.

Bonsoir Cedino
Regarde le forum de mon profil et dis moi si c'est ce que tu veux
Je te répondrais demain, fatigué ce soir.

Ce n'est pas vraiment ce que j'aurais souhaité avoir au début mais avec le message de Neptune- et mon module à droite de mon forum que je vais surement déplacé/supprimé, votre approche pourrait surement m’intéresser et j'aimerais bien tenter une approche pour voir comment ceci pourrait rendre sur mon forum.

Je vous remercie pour vos réponses,
Cordialement Heung-Min Hidem.

[AenigmA]

Bonjour,
Comme ma version est Invision, j'ai préféré te retrouver le "vieux" tuto d'origine pour la V2, message n°5, rendons à César ce qui est à César.

[Heung-Min Hidem]

Bonjour,
Comme ma version est Invision, j'ai préféré te retrouver le "vieux" tuto d'origine pour la V2, message n°5, rendons à César ce qui est à César.

Bonjour AenigmA,

Je te remercie pour ce tutoriel, je vais tenter des approches avec pour mon forum.

Bonne journée,
Cordialement Heung-Min Hidem.