Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Afisare membru

Forum gratuit: forum de suport al utilizatorilor ::  Forum de suport :: Administreaza prezentarea forumului :: Arhiva probleme privind designul forumurilor

Pagina 1 din 2 • 1, 2  Urmatorul

Vezi subiectul anterior Vezi subiectul urmator In jos

Rezolvat Afisare membru

Mesaj Scris de Dani David Mar Iul 04, 2017 12:51 pm

Buna ziua ,imi cer scuze daca nu am postat in locul cuvenit !
Intrebarea mea este daca se poate ca atunci cand pui mousul pe un membru sa apara un tablou cu detalii genul cum este in imaginea de mai jos.
MultumescAfisare membru Print10


Ultima editare efectuata de catre Dani David in Vin Iul 07, 2017 12:12 pm, editata de 1 ori
Dani David

Dani David
Membru activ

Mesaje : 551
Varsta : 57
Localizare : Bucuresti
Data înscrierii : 04/06/2017
Mulțumiri : 9
Google Chrome ModernBB

Dani David a fost mulțumit de autorul acestui subiect.
  • 0

Rezolvat Re: Afisare membru

Mesaj Scris de Petronel Mier Iul 05, 2017 11:47 am

Buna ziua urmati pasii de mai jos :


1ş - Javascript

Amplasare - Toate Paginile

Cod:
jQuery(document).ready(function() {
        $('.tcr a[href*="/u"]').mouseover(function() {
            $(this).parents('strong').css('position', 'relative');
            $('.cp_geral').remove();
            $(this).parents('.tcr').css('overflow', 'visible');
            $(this).before('<a href="' + $(this).attr('href') + '"><div class="cp_geral" style="position:absolute;"><div class="cp_box"> <div class="cp_capa"> <div class="cp_capa-avatar"><img src="http://i.imgur.com/1rHWZUQ.gif" /></div> <div class="cp_capa-nick"> <strong>' + $(this).html() + '</strong> <span class="span_capa-nick"></span> </div> </div> <div class="cp_info"> <div class="cp_info-botoes"> <div class="cp_info-botoes-post"><strong></strong><span>posts</span></div> <div class="cp_info-botoes-rep"><strong></strong><span>reputation</span></div> <div class="cp_info-botoes-data"><strong></strong><span>join date</span></div> </div> </div> <div class="cp_icones"> <div class="cp_mp"><a href="/privmsg?mode=post&u=' + $(this).attr('href').replace('/u', '') + '">PM</a></div> <div class="cp_perfil"><a href="' + $(this).attr('href') + '">PROFILE</a></div> </div></div> </div></a>');
            $.get($(this).attr('href'), function(cps) {
                $('.span_capa-nick').html($('#profile-advanced-right .main-content.clearfix.center:eq(0)', cps).html());
                $('.cp_capa-avatar').html($('#profile-advanced-right .main-content.clearfix.center:eq(0)', cps).html());
                $('.cp_info-botoes-data strong').html($('#field_id-4 dd div', cps).html());
                $('.cp_info-botoes-post strong').html($('#field_id-6 dd div', cps).html());
                $('.cp_info-botoes-rep strong').html($('#field_id-14 dd div', cps).html());
            });
            $('.cp_geral').mouseleave(function() {
                $(this).remove();
            });
        });
    });

2ş - CSS

Cod:
.cp_geral { width:340px; padding-top:50px; transition:all 150ms linear; } .cp_box { width:340px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); -moz-box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); left:-120px; top:-13px; background:#fff; z-index:999; position:absolute; transition:all 150ms linear; margin:50px; } .cp_capa { background:#263340 url(http://i.imgur.com/6AnKAdN.png) right no-repeat; height:105px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius:10px; border-top-right-radius:10px; padding:5px 5px 0; } .cp_capa:before { content:""; display:inline-block; vertical-align:middle; margin-left:74px; width:0; height:0; position:absolute; top:-15px; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #263340; } .cp_capa-avatar { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; border:1px solid #d8d8d8; height:75px; width:75px; text-align:center; float:left; font-size:0; padding:7px; } .cp_capa-avatar img { -moz-border-radius:100%; -webkit-border-radius:100%; border:0 solid #d8d8d8; border-radius:100%; height:75px; width:75px; } .cp_capa-nick { width:215px; height:75px; float:left; padding:25px 0 0 15px; } .cp_capa-nick strong { color:#fff!important; font-size:25px; font-weight:400!important; display:block; } .cp_info { text-align:center; padding:10px; } .cp_info-botoes { height:60px; width:320px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; text-decoration:none; } .cp_info-botoes a { text-decoration:none; } .cp_info-botoes-post { background:#ecf0f1; width:85px; height:53px; -webkit-border-top-left-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-bottomleft:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; text-transform:uppercase; border-bottom:7px solid #bec3c7; float:left; } .cp_info-botoes-rep { background:#6bbd21; width:110px; height:53px; text-transform:uppercase; border-bottom:7px solid #68a72f; float:left; } .cp_info-botoes-rep strong { padding-top:8px; color:#fff; display:block; font-size:20px; } .cp_info-botoes-rep span { color:#fff; font-size:12px; } .cp_info-botoes-data strong { padding-top:8px; color:#666; display:block; font-size:15px; } .cp_info-botoes-data { background:#ecf0f1; width:125px; height:53px; -webkit-border-top-right-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomright:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; text-transform:uppercase; border-bottom:7px solid #bec3c7; float:left; } .cp_info-botoes-post,.cp_info-botoes-rep,.cp_info-botoes-data { transition:all 150ms linear; } .cp_info-botoes-post:hover,.cp_info-botoes-rep:hover,.cp_info-botoes-data:hover { opacity:0.65; -moz-opacity:0.65; filter:alpha(opacity=65); } .cp_icones { background:#ecf0f1; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; color:#bec3c7; height:20px; padding:5px; } .cp_icones a { font-size:12px; text-decoration:none; color:#666; } .cp_mp,.cp_perfil { float:left; padding-left:10px; transition:all 150ms linear; } .cp_mp:hover { float:left; padding-left:10px; color:#c1392b; } .cp_mp:before { content:"\f003"; font-family:FontAwesome; padding:0 4px; } .cp_perfil:before { content:"\f007"; font-family:FontAwesome; padding:0 4px; } .cp_perfil:hover { padding-left:10px; color:#6bbd21; } .cp_mais { width:100%; } .cp_capa-avatar br,.span_capa-nick img,.span_capa-nick br { display:none; } .cp_capa-nick span,.span_capa-nick { color:#fff!important; font-size:12px; line-height:22px; font-weight:400!important; float:none!important} .cp_info-botoes-post strong { padding-top:8px; color:#666; display:block; font-size:20px; } .cp_info-botoes-post span,.cp_info-botoes-data span { color:#868585; font-size:11px; }



Rezultat :

Afisare membru 6jp3jjF
Petronel

Petronel
Membru onorific
Membru onorific

Mesaje : 1046
Varsta : 22
Localizare : Constanţa & Calarasi
Data înscrierii : 21/05/2016
Mulțumiri : 113
Google Chrome AwesomeBB

https://www.fgdesign.biz/
Petronel a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Dani David Mier Iul 05, 2017 2:52 pm

Multumesc pentru coduri dar nici o schimbare am urmat intocmai pasii!!!
Dani David

Dani David
Membru activ

Mesaje : 551
Varsta : 57
Localizare : Bucuresti
Data înscrierii : 04/06/2017
Mulțumiri : 9
Google Chrome ModernBB

Dani David a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Ionut_FG Joi Iul 06, 2017 2:55 pm

Versiunea pe care o folosiți ?
avatar

Ionut_FG
Membru activ

Mesaje : 777
Varsta : 26
Data înscrierii : 01/11/2015
Mulțumiri : 123
Google Chrome Invision

http://invisionpower.rpgwars.net/
Ionut_FG a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Dani David Joi Iul 06, 2017 6:43 pm

phpBB3
Dani David

Dani David
Membru activ

Mesaje : 551
Varsta : 57
Localizare : Bucuresti
Data înscrierii : 04/06/2017
Mulțumiri : 9
Google Chrome ModernBB

Dani David a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Ionut_FG Joi Iul 06, 2017 9:15 pm

Dacă vreți varianta de mai sus poftim codul refăcut

Cod javascript

Cod:
jQuery(document).ready(function() {
        $('a[href*="/u"]').mouseover(function() {
            $(this).parents('strong').css('position', 'relative');
            $('.cp_geral').remove();
            $(this).parents('.tcr').css('overflow', 'visible');
            $(this).before('<a href="' + $(this).attr('href') + '"><div class="cp_geral" style="position:absolute;"><div class="cp_box"> <div class="cp_capa"> <div class="cp_capa-avatar"><img src="http://i.imgur.com/1rHWZUQ.gif" /></div> <div class="cp_capa-nick"> <strong>' + $(this).html() + '</strong> <span class="span_capa-nick"></span> </div> </div> <div class="cp_info"> <div class="cp_info-botoes"> <div class="cp_info-botoes-post"><strong></strong><span>posts</span></div> <div class="cp_info-botoes-rep"><strong></strong><span>reputation</span></div> <div class="cp_info-botoes-data"><strong></strong><span>join date</span></div> </div> </div> <div class="cp_icones"> <div class="cp_mp"><a href="/privmsg?mode=post&u=' + $(this).attr('href').replace('/u', '') + '">PM</a></div> <div class="cp_perfil"><a href="' + $(this).attr('href') + '">PROFILE</a></div> </div></div> </div></a>');
            $.get($(this).attr('href'), function(cps) {
                $('.span_capa-nick').html($('#profile-advanced-right .main-content.clearfix.center:eq(0)', cps).html());
                $('.cp_capa-avatar').html($('#profile-advanced-right .main-content.clearfix.center:eq(0)', cps).html());
                $('.cp_info-botoes-data strong').html($('#field_id-4 dd div', cps).html());
                $('.cp_info-botoes-post strong').html($('#field_id-6 dd div', cps).html());
                $('.cp_info-botoes-rep strong').html($('#field_id-14 dd div', cps).html());
            });
            $('.cp_geral').mouseleave(function() {
                $(this).remove();
            });
        });
    });

Cod css
Cod:
.cp_geral {
    width:340px;
    padding-top:50px;
    transition:all 150ms linear;
}
.cp_box {
    width:340px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow:1px 1px 12px 0 rgba(50, 50, 50, 0.27);
    -moz-box-shadow:1px 1px 12px 0 rgba(50, 50, 50, 0.27);
    box-shadow:1px 1px 12px 0 rgba(50, 50, 50, 0.27);
    left:-120px;
    top:-13px;
    background:#fff;
    z-index:999;
    position:absolute;
    transition:all 150ms linear;
    margin:50px;
}
.cp_capa {
    background:#263340 url(http://i.imgur.com/6AnKAdN.png) right no-repeat;
    height:105px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    padding:5px 5px 0;
}
.cp_capa:before {
    content:"";
    display:inline-block;
    vertical-align:middle;
    margin-left:74px;
    width:0;
    height:0;
    position:absolute;
    top:-15px;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-bottom:15px solid #263340;
}
.cp_capa-avatar {
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    border:1px solid #d8d8d8;
    height:75px;
    width:75px;
    text-align:center;
    float:left;
    font-size:0;
    padding:7px;
}
.cp_capa-avatar img {
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border:0 solid #d8d8d8;
    border-radius:100%;
    height:75px;
    width:75px;
}
.cp_capa-nick {
    width:215px;
    height:75px;
    float:left;
    padding:25px 0 0 15px;
}
.cp_capa-nick strong {
    color:#fff!important;
    font-size:25px;
    font-weight:400!important;
    display:block;
}
.cp_info {
    text-align:center;
    padding:10px;
}
.cp_info-botoes {
    height:60px;
    width:320px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    text-decoration:none;
}
.cp_info-botoes a {
    text-decoration:none;
}
.cp_info-botoes-post {
    background:#ecf0f1;
    width:85px;
    height:53px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-bottomleft:10px;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    text-transform:uppercase;
    border-bottom:7px solid #bec3c7;
    float:left;
}
.cp_info-botoes-rep {
    background:#6bbd21;
    width:110px;
    height:53px;
    text-transform:uppercase;
    border-bottom:7px solid #68a72f;
    float:left;
}
.cp_info-botoes-rep strong {
    padding-top:8px;
    color:#fff;
    display:block;
    font-size:20px;
}
.cp_info-botoes-rep span {
    color:#fff;
    font-size:12px;
}
.cp_info-botoes-data strong {
    padding-top:8px;
    color:#666;
    display:block;
    font-size:15px;
}
.cp_info-botoes-data {
    background:#ecf0f1;
    width:125px;
    height:53px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    text-transform:uppercase;
    border-bottom:7px solid #bec3c7;
    float:left;
}
.cp_info-botoes-post, .cp_info-botoes-rep, .cp_info-botoes-data {
    transition:all 150ms linear;
}
.cp_info-botoes-post:hover, .cp_info-botoes-rep:hover, .cp_info-botoes-data:hover {
    opacity:0.65;
    -moz-opacity:0.65;
    filter:alpha(opacity=65);
}
.cp_icones {
    background:#ecf0f1;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-bottomleft:10px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    color:#bec3c7;
    height:20px;
    padding:5px;
}
.cp_icones a {
    font-size:12px;
    text-decoration:none;
    color:#666;
}
.cp_mp, .cp_perfil {
    float:left;
    padding-left:10px;
    transition:all 150ms linear;
}
.cp_mp:hover {
    float:left;
    padding-left:10px;
    color:#c1392b;
}
.cp_mp:before {
    content:"\f003";
    font-family:FontAwesome;
    padding:0 4px;
}
.cp_perfil:before {
    content:"\f007";
    font-family:FontAwesome;
    padding:0 4px;
}
.cp_perfil:hover {
    padding-left:10px;
    color:#6bbd21;
}
.cp_mais {
    width:100%;
}
.cp_capa-avatar br, .span_capa-nick img, .span_capa-nick br {
    display:none;
}
.cp_capa-nick span, .span_capa-nick {
    color:#fff!important;
    font-size:12px;
    line-height:22px;
    font-weight:400!important;
    float:none!important
}
.cp_info-botoes-post strong {
    padding-top:8px;
    color:#666;
    display:block;
    font-size:20px;
}
.cp_info-botoes-post span, .cp_info-botoes-data span {
    color:#868585;
    font-size:11px;
}

Dacă vreți varianta dvs. sar putea să dureze puțin timp

avatar

Ionut_FG
Membru activ

Mesaje : 777
Varsta : 26
Data înscrierii : 01/11/2015
Mulțumiri : 123
Google Chrome Invision

http://invisionpower.rpgwars.net/
Ionut_FG a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Dani David Joi Iul 06, 2017 9:39 pm

Am aplicat si varianta noua uite cum se vede can pun mousul pe membru apare un patrat mic cu niste linii care se rotesc probabil cauta si apoi apare ca in imagine,am incercuit cu rosu .Eu iti multumesc mult pentru munca depusa si sper sa reusestiAfisare membru Captur15
Dani David

Dani David
Membru activ

Mesaje : 551
Varsta : 57
Localizare : Bucuresti
Data înscrierii : 04/06/2017
Mulțumiri : 9
Google Chrome ModernBB

Dani David a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Ionut_FG Joi Iul 06, 2017 9:41 pm

Nu ai adăugat codurile css
avatar

Ionut_FG
Membru activ

Mesaje : 777
Varsta : 26
Data înscrierii : 01/11/2015
Mulțumiri : 123
Google Chrome Invision

http://invisionpower.rpgwars.net/
Ionut_FG a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Dani David Joi Iul 06, 2017 9:53 pm

am aplicat tot ce mi-ai dat,am sters primele si am adaugat cele noi si in javascript si in css
Dani David

Dani David
Membru activ

Mesaje : 551
Varsta : 57
Localizare : Bucuresti
Data înscrierii : 04/06/2017
Mulțumiri : 9
Google Chrome ModernBB

Dani David a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Ionut_FG Joi Iul 06, 2017 10:07 pm

Nu, codurile css lipsesc
avatar

Ionut_FG
Membru activ

Mesaje : 777
Varsta : 26
Data înscrierii : 01/11/2015
Mulțumiri : 123
Google Chrome Invision

http://invisionpower.rpgwars.net/
Ionut_FG a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Dani David Joi Iul 06, 2017 10:26 pm

ok am inteles acum ca nu sunt gata ,vazusem ca ai postat si cod css am zis ca e gata.ok astept nici o problema
Dani David

Dani David
Membru activ

Mesaje : 551
Varsta : 57
Localizare : Bucuresti
Data înscrierii : 04/06/2017
Mulțumiri : 9
Google Chrome ModernBB

Dani David a fost mulțumit de autorul acestui subiect.

Rezolvat Re: Afisare membru

Mesaj Scris de Ionut_FG Joi Iul 06, 2017 10:32 pm

@Dani David, adăugați codurile css în foaia de stil css!

Panoul de Administrare - Afișare - Imagini și culori - Culori - Foaie de stil CSS. Adăugați codurile următoare de sus. Nu înțeleg ce ați făcut dvs.

avatar

Ionut_FG
Membru activ

Mesaje : 777
Varsta : 26
Data înscrierii : 01/11/2015
Mulțumiri : 123
Google Chrome Invision

http://invisionpower.rpgwars.net/
Ionut_FG a fost mulțumit de autorul acestui subiect.

Pagina 1 din 2 • 1, 2  Urmatorul

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Forum gratuit: forum de suport al utilizatorilor ::  Forum de suport :: Administreaza prezentarea forumului :: Arhiva probleme privind designul forumurilor

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum