Mettre "en ligne" dans le cadre du mini profil du message

+2
Scipion
Kallindra
6 participants

Page 2 sur 3 Précédent  1, 2, 3  Suivant

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

Résolu Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Dim 17 Mar 2013 - 6:51

Rappel du premier message :

Bonjour,

j'aimerais insérer l'icone "en ligne" dans le coin en haut à droite du cadre du mini profil dans les messages (comme sur ce forum: cf en dessous)

Mettre "en ligne" dans le cadre du mini profil du message - Page 2 Sans_t11

quelqu'un peut il m'aider ?
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Dim 17 Mar 2013 - 15:26

mes recherches n'ont données aucun résultats et les seules infos que j'ai trouvé portent sur le version phpbb2.

cc, bonne soirée
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Lun 18 Mar 2013 - 4:49

Bonjour

Pouvez-vous me donner le contenu complet de votre feuille de style CSS finale, c'est à dire celle que vous avez actuellement dans le PA ?

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Lun 18 Mar 2013 - 11:24

Voici mon CSS

Code:

.mini_ava {
  float: left;
}
.mini_ava img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
  height: 80px;
}
a.mainmenu img {
display:none;
}

a.mainmenu{
    text-decoration:none;
        padding: 4px 4px;
        margin: 6px;
        background: #9CBBF0;
        color: #3D434D;
        border: 1px solid #7B9DB8;
  -moz-border-radius: 10px 1;
        -webkit-border-radius: 10px 0;
        khtml-border-radius: 10px 1;
        border-radius: 10px 0;
}
a:hover.mainmenu{
    text-decoration:none;
        padding: 10px 10px;
        margin: 8px;
        background: #050505;
        color: #FFFFFF;
        border: 1px solid #050505;
  -moz-border-radius: 10px 0;
        -webkit-border-radius: 10px 1;
        khtml-border-radius: 10px 0;
        border-radius: 10px 1;
}
#page-body {
margin-top:10px;
}
.navbar{
background-color: #FFFFFF;
}
ul.navlinks { border: none; }
#search-box{
height:1px;
visibility:hidden;
}
.mainmenu {
font-family: Arial;
font-size: 13px;
}
$(function() {
  $.getScript('http://js01.fra.co/21268.js');
});
/*SUPPRESSION ÉDITION*/
-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }
span.forumlink {
background-image: url(http://i70.servimg.com/u/f70/17/79/11/65/sans_t10.png);
width: 100%;
}
.topiclist.forums li.row {height:100px;}
.postprofile {
background-color:#CEE2F0;
-webkit-border-radius:50px;
-moz-border-radius:40px;
border-radius:15px;}
.postprofile {
-moz-box-shadow:8px 8px 8px #FFFFFF;
-webkit-box-shadow:8px 8px 8px #FFFFFF;
box-shadow:8px 8px 8px #FFFFFF;}
.page-title {
  text-shadow: 0px 0px 11px #368AD2;
  color: #000000;
}
td.cat, td.catBottom, td.catHead {
border-width: 0;
height: 29px;
text-align: center;
}
/*-- retrait du bouton de vote négatif dans les messages --*/
.vote .vote-button, .vote-no-bar {
  display:none;
}
.vote .vote-button:first-child {
    display:block;
}
@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 16px;   
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }
#wrap {
box-shadow: #000 0px 12px 20px;
}
.online {
    background-position: 0px 0px;
}

cc
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Lun 18 Mar 2013 - 11:30

Merci bien. Comment se présente la situation ou qu'est-ce qui reste à faire ? Ceci pour que nous soyons sur la même longueur d'onde.

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Lun 18 Mar 2013 - 11:42

juste, avant de continuer, pouvez vous me dire pourquoi à cet instant (par exemple), mon CSS est inactif alors que e n'ai rien modifié

CAD, les modifs du CSS ne sont pas affichées
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Lun 18 Mar 2013 - 11:51

Personnellement et sur mon forum test je rencontre très souvent ce problème. Pour résoudre, il ne faut pas hésiter à vider le cache internet ou faire la manip Ctrl+F5 plusieurs fois de suite.

Il me semble que cette situation se produit lorsqu'on modifie souvent la feuille CSS, mais rassurez-vous rien de grave.

Vider le cache Internet

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Lun 18 Mar 2013 - 11:56

d'accord, merci

il reste donc à mettre l'icone "en ligne" au premier plan
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Lun 18 Mar 2013 - 11:58

est ce qu'on ne pourrait pas modifier ce code:
Code:

.online {
    background-position: 0px 0px;
}

par
Code:

.online {
    foreground-position: 0px 0px;
}

je ne peux pas vérifié puisque mon CSS est HS pour le moment
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Lun 18 Mar 2013 - 12:25

Alors voilà les premiers résultats :

1. test : j'ai intégré le CSS en faisant toutes les manipulations possibles mais l'image en ligne tergiverse et reste toujours à l'extrémité droite.

2. test : j'ai retiré le code Accordéon et l'image s'est déplacée vers l'extrémité gauche.

3. test : j'ai modifié les valeurs (0px 0px) à (165px 0px) et l'image en ligne a pris la position que vous lui avez assignée.

Voici le code pour que vous fassiez un test :

Code:
/*** Bouton En ligne ***/
.online {
    background-position: 165px 0px;
}
.icon_online {
  position:absolute;
  margin-top: 0px;
  margin-left:102px;
}
.mini_ava {
  float: left;
}
.mini_ava img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
  height: 80px;
}
a.mainmenu img {
display:none;
}

a.mainmenu{
    text-decoration:none;
        padding: 4px 4px;
        margin: 6px;
        background: #9CBBF0;
        color: #3D434D;
        border: 1px solid #7B9DB8;
  -moz-border-radius: 10px 1;
        -webkit-border-radius: 10px 0;
        khtml-border-radius: 10px 1;
        border-radius: 10px 0;
}
a:hover.mainmenu{
    text-decoration:none;
        padding: 10px 10px;
        margin: 8px;
        background: #050505;
        color: #FFFFFF;
        border: 1px solid #050505;
  -moz-border-radius: 10px 0;
        -webkit-border-radius: 10px 1;
        khtml-border-radius: 10px 0;
        border-radius: 10px 1;
}
#page-body {
margin-top:10px;
}
.navbar{
background-color: #FFFFFF;
}
ul.navlinks { border: none; }
#search-box{
height:1px;
visibility:hidden;
}
.mainmenu {
font-family: Arial;
font-size: 13px;
}
$(function() {
  $.getScript('http://js01.fra.co/21268.js');
});
/*SUPPRESSION ÉDITION*/
-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }
span.forumlink {
background-image: url(http://i70.servimg.com/u/f70/17/79/11/65/sans_t10.png);
width: 100%;
}
.topiclist.forums li.row {height:100px;}
.postprofile {
background-color:#CEE2F0;
-webkit-border-radius:50px;
-moz-border-radius:40px;
border-radius:15px;}
.postprofile {
-moz-box-shadow:8px 8px 8px #FFFFFF;
-webkit-box-shadow:8px 8px 8px #FFFFFF;
box-shadow:8px 8px 8px #FFFFFF;}
.page-title {
  text-shadow: 0px 0px 11px #368AD2;
  color: #000000;
}
td.cat, td.catBottom, td.catHead {
border-width: 0;
height: 29px;
text-align: center;
}
/*-- retrait du bouton de vote négatif dans les messages --*/
.vote .vote-button, .vote-no-bar {
  display:none;
}
.vote .vote-button:first-child {
    display:block;
}
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Lun 18 Mar 2013 - 12:30

merci je vais tester des que le CSS fonctionnera et vous tiendrai au courant
cc
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Lun 18 Mar 2013 - 12:33

Très bien, j'attends votre retour d'information.

Bonne soirée
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Mar 19 Mar 2013 - 13:31

mon CSS n'est toujours pas revenu

cc
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Mar 19 Mar 2013 - 13:35

Bonsoir

C'est bien dommage pour votre forum.

Bonne soirée

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Mer 20 Mar 2013 - 13:37

bonjour,

mon CSS fonctionne de nouveau, j'ai testé le code, mais il ne fonctionne pas:
l'image est toujours en arrière plan

cc
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Mer 20 Mar 2013 - 14:01

Bonsoir

Mettez à disposition tout le contenu de votre CSS afin que je puisse faire un nouveau test, merci.

Bonne soirée
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Mer 20 Mar 2013 - 14:58

d'accord, voilà le CSS:
Code:

.icon_online {
  position:absolute;
  margin-top: 0px;
  margin-left:102px;
}
#wrap {
box-shadow: #000 0px 12px 20px;
}
.mini_ava {
  float: left;
}
.mini_ava img {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
  height: 80px;
}
a.mainmenu img {
display:none;
}
a.mainmenu{
    text-decoration:none;
        padding: 4px 4px;
        margin: 6px;
        background: #9CBBF0;
        color: #3D434D;
        border: 1px solid #7B9DB8;
  -moz-border-radius: 10px 1;
        -webkit-border-radius: 10px 0;
        khtml-border-radius: 10px 1;
        border-radius: 10px 0;
}
a:hover.mainmenu{
    text-decoration:none;
        padding: 10px 10px;
        margin: 8px;
        background: #050505;
        color: #FFFFFF;
        border: 1px solid #050505;
  -moz-border-radius: 10px 0;
        -webkit-border-radius: 10px 1;
        khtml-border-radius: 10px 0;
        border-radius: 10px 1;
}
#page-body {
margin-top:10px;
}
.navbar{
background-color: #FFFFFF;
}
ul.navlinks { border: none; }
#search-box{
height:1px;
visibility:hidden;
}
.mainmenu {
font-family: Arial;
font-size: 13px;
}
/*SUPPRESSION ÉDITION*/
-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }
span.forumlink {
background-image: url(http://i70.servimg.com/u/f70/17/79/11/65/sans_t10.png);
width: 100%;
}
.topiclist.forums li.row {height:100px;}
.postprofile {
background-color:#CEE2F0;
  margin: 8px;
-webkit-border-radius:50px;
-moz-border-radius:40px;
  khtml-border-radius: 15px;
border-radius:15px;
}
.postprofile {
-moz-box-shadow:8px 8px 8px #FFFFFF;
-webkit-box-shadow:8px 8px 8px #FFFFFF;
box-shadow:8px 8px 8px #FFFFFF;}
.page-title {
  text-shadow: 0px 0px 11px #368AD2;
  color: #000000;
}
td.cat, td.catBottom, td.catHead {
border-width: 0;
height: 29px;
text-align: center;
}
/*-- retrait du bouton de vote négatif dans les messages --*/
.vote .vote-button, .vote-no-bar {
  display:none;
}
.vote .vote-button:first-child {
    display:block;
}
.author {
background-color:#FFFFFF;
  width: 500;
  margin: 8px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
  khtml-border-radius: 20px;
border-radius:15px;}
@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 16px;   
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }

cc
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Mer 20 Mar 2013 - 17:32

Le code qui faisait passer l'image en arrière plan est le suivant :

Code:
.postprofile {
background-color:#CEE2F0;
  margin: 8px;
-webkit-border-radius:50px;
-moz-border-radius:40px;
  khtml-border-radius: 15px;
border-radius:15px;
}
Le nouveau code CSS à installer :

Code:
.online {
    background-position: 165px 0px;
}
#wrap {
box-shadow: #000 0px 12px 20px;
}
.mini_ava {
  float: left;
}
.mini_ava img {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
  height: 80px;
}
a.mainmenu img {
display:none;
}
a.mainmenu{
    text-decoration:none;
        padding: 4px 4px;
        margin: 6px;
        background: #9CBBF0;
        color: #3D434D;
        border: 1px solid #7B9DB8;
  -moz-border-radius: 10px 1;
        -webkit-border-radius: 10px 0;
        khtml-border-radius: 10px 1;
        border-radius: 10px 0;
}
a:hover.mainmenu{
    text-decoration:none;
        padding: 10px 10px;
        margin: 8px;
        background: #050505;
        color: #FFFFFF;
        border: 1px solid #050505;
  -moz-border-radius: 10px 0;
        -webkit-border-radius: 10px 1;
        khtml-border-radius: 10px 0;
        border-radius: 10px 1;
}
#page-body {
margin-top:10px;
}
.navbar{
background-color: #FFFFFF;
}
ul.navlinks { border: none; }
#search-box{
height:1px;
visibility:hidden;
}
.mainmenu {
font-family: Arial;
font-size: 13px;
}
/*SUPPRESSION ÉDITION*/
-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }
span.forumlink {
background-image: url(http://i70.servimg.com/u/f70/17/79/11/65/sans_t10.png);
width: 100%;
}
.topiclist.forums li.row {height:100px;}

.postprofile {
-moz-box-shadow:8px 8px 8px #FFFFFF;
-webkit-box-shadow:8px 8px 8px #FFFFFF;
box-shadow:8px 8px 8px #FFFFFF;}
.page-title {
  text-shadow: 0px 0px 11px #368AD2;
  color: #000000;
}
td.cat, td.catBottom, td.catHead {
border-width: 0;
height: 29px;
text-align: center;
}
/*-- retrait du bouton de vote négatif dans les messages --*/
.vote .vote-button, .vote-no-bar {
  display:none;
}
.vote .vote-button:first-child {
    display:block;
}
.author {
background-color:#FFFFFF;
  width: 500;
  margin: 8px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
  khtml-border-radius: 20px;
border-radius:15px;}
@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 16px;   
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Jeu 21 Mar 2013 - 10:30

Bonjour, et merci de votre réponse

Ce code
.postprofile {
background-color:#CEE2F0;
margin: 8px;
-webkit-border-radius:50px;
-moz-border-radius:40px;
khtml-border-radius: 15px;
border-radius:15px;
}

me permet de créer un cadre autour du profil, dans les messages, et je souhaiterais le garder.

en effet la couleur en arrière plan de ce cadre rend invisible l'icone

mais sur ce forum, l'image est sur le cadre (elle n'est pas cachée); et c'est cet effet que je voudrais

c
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Scipion Jeu 21 Mar 2013 - 10:47

Essayez avec ce code CSS en le rajoutant à votre feuille de style :

Code:
.postprofile-head.post-header {
background-color:#CEE2F0;
  margin: 8px;
-webkit-border-radius:50px;
-moz-border-radius:40px;
  khtml-border-radius: 15px;
border-radius:15px;
}
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Jeu 21 Mar 2013 - 11:55

Ce code :
.postprofile-head.post-header {
background-color:#CEE2F0;
margin: 8px;
-webkit-border-radius:50px;
-moz-border-radius:40px;
khtml-border-radius: 15px;
border-radius:15px;
}

ne permet pas de créer un cadre autour du profil (il n'a aucun effet)

cc
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Ven 22 Mar 2013 - 12:55

up
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Dim 24 Mar 2013 - 6:12

up
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Dim 24 Mar 2013 - 6:44

a noter que dernièrement, j'ai installé un dégradé dans les messages

cc
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Mar 26 Mar 2013 - 11:42

up Very Happy
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Mer 27 Mar 2013 - 16:55

up
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Ven 29 Mar 2013 - 13:07

up
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Dim 31 Mar 2013 - 4:32

up
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Mar 2 Avr 2013 - 15:21

up
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Anzu Dim 7 Avr 2013 - 18:14

Mettre "en ligne" dans le cadre du mini profil du message - Page 2 Imager11Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir délester votre sujet, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, dans ce cas, :editer: votre premier message et cochez l'icône résolu

A bientôt sur ForumActif Smile
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre "en ligne" dans le cadre du mini profil du message

Message par Matthieu A. Lun 8 Avr 2013 - 11:56

Bonjour,

J'ai une nouvelle idée: je peux peut etre mettre cela dans le profil en ajoutant par exemple: "Statut de l"utilisateur" et faire afficher une image "en ligne" "hors ligne"

comment pourrait on faire ceci ?? Des idées pour les images ??

cc
Matthieu A.

Matthieu A.
****

Masculin
Messages : 258
Inscrit(e) le : 11/03/2013

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

Page 2 sur 3 Précédent  1, 2, 3  Suivant

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

- Sujets similaires

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