(phpBB3)Sistem nou de afişare al profilului

In jos

(phpBB3)Sistem nou de afişare al profilului

Mesaj Scris de Keir la data de Joi Iun 28, 2012 12:37 am

Salutare,

În acest tutorial puteţi afla cum puteţi realiza un nou sistem de afişare al profilului în mesaje pentru versiunea phpBB3.

Demonstraţie: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

1. Mergem in:

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]Panou de administrare ~>[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] Afisare ~>[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] Imagini si Culori ~> [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] Culori~> [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] Foaia de stil CSS

Şi în Foaia de stil CSS adăugăm:
Cod:

/*------------ BEGIN --- New sistem for profile on phpBB3------------ BEGIN --- */
.user-name {
background-color: #EEE;
border: 1px solid #DDD;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #DDD;
border-right-color: #DDD;
border-bottom-color: #DDD;
border-left-color: #DDD;
border-radius: 4px;
display: block;
font-family: Arvo;
font-size: 1.5em;
font-weight: 400!important;
margin-bottom: 5px;
margin-top: 10px;
padding: 8px!important;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
position: relative;
text-align: center;
text-decoration: none;}

.user-basic-info {
background: white;
background-image: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial;
background-origin: initial;
background-clip: initial;
background-color: white;
border: 1px solid #DDD;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #DDD;
border-right-color: #DDD;
border-bottom-color: #DDD;
border-left-color: #DDD;
border-radius: 5px;
color: white;
font-size: 1.5em;
font-weight: 700;
line-height: 1.8em;
margin: 5px auto;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
padding: 15px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
text-align: center;
text-shadow: 0 1px 0 #CCC,0 2px 0 #C9C9C9,0 3px 0 #BBB,0 4px 0 #B9B9B9,0 5px 0 #AAA,0 6px 1px rgba(0, 0, 0, .1),0 0 5px rgba(0, 0, 0, .1),0 1px 3px rgba(0, 0, 0, .3),0 3px 5px rgba(0, 0, 0, .2),0 5px 10px rgba(0, 0, 0, .25),0 10px 10px rgba(0, 0, 0, .2),0 20px 20px rgba(0, 0, 0, .15);}

.user-info {
background: white;
background-image: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial;
background-origin: initial;
background-clip: initial;
background-color: white;
border: 1px solid #DDD;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #DDD;
border-right-color: #DDD;
border-bottom-color: #DDD;
border-left-color: #DDD;
border-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
color: #666;
line-height: 1.8em;
margin: 5px auto;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;}

.user-contact {
background: white;
background-image: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial;
background-origin: initial;
background-clip: initial;
background-color: white;
border: 1px solid #DDD;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #DDD;
border-right-color: #DDD;
border-bottom-color: #DDD;
border-left-color: #DDD;
border-radius: 5px;
color: #666;
margin: 5px auto;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;}
/*------------ END --- New sistem for profile on phpBB3------------ END --- */

2. Mergem în:

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]Panou de administrare ~>[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] Module ~>[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] HTML & JAVASCRIPT ~>[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] Gestiunea codurilor JavaScript ~>[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine] Coduri JavaScript

3.Creem un nou cod javascript :

Titlu * : Class
Amplasare : Toate paginile
Cod JavaScript * :
Cod:
$(function(){
    $('.postprofile dl dd:has("span[style]")').addClass('user-info');
    $('.postprofile dl dd:has("a.profile-icon")').addClass('user-contact');
    $('.postprofile dl dt:has("a img")').addClass('user-basic-info');
    $('.postprofile dl dd:has(".specialpost img, .specialpost")').addClass('user-basic-info');
    });

Al doilea cod javascript:

Titlu * : User-Avatar
Amplasare : Toate paginile
Cod JavaScript * :
Cod:
$(function() {
    if ($('.post')[0]) {
        $('.post dt a img').addClass('user-avatar');
    }
});

Ultimul cod javascript:

Titlu * : User-Name
Amplasare : Toate paginile
Cod JavaScript * :
Cod:
$(function() {
    if ($('.post')[0]) {
        $('.post dt a').addClass('user-name');
    }
});


[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]ATENTIE:
Nu uitati sa apasati butonul Inregistare pentru a valida codurile
Codul jQuery de la class a fost realizat de L!
Scris de Keir.
Tutorial realizat de InFeRn0 (ionuz)
avatar
Keir
Administrator
Administrator

Mesaje Mesaje : 194
Puncte Puncte : 5353
Versiune Versiune :

Vezi profilul utilizatorului

Sus In jos

Re: (phpBB3)Sistem nou de afişare al profilului

Mesaj Scris de L! la data de Joi Iun 28, 2012 2:51 am

Ce combinaţie bună: L!, Keir, ionuz. Un tutorial destul de reuşit! Very Happy

Apropo, era mai bine dacă erau doar 2 coduri Javascript, ultimile 2 sunt cam.. similare şi se pot pune în acelaşi document.
avatar
L!
Membru experimentat

Mesaje Mesaje : 109
Puncte Puncte : 4851
Versiune Versiune :
Varsta Varsta : 25
Localizare Localizare : Localizare

Vezi profilul utilizatorului http://lforum.forumotion.com/

Sus In jos

Re: (phpBB3)Sistem nou de afişare al profilului

Mesaj Scris de ionuz la data de Joi Iun 28, 2012 3:31 am

Lucian eu nu pre le am cu jQuery si de asta sunt 3 coduri jQuery sper sa ma intelegi sunt la inceput Embarassed
avatar
ionuz
Membru de onoare

Mesaje Mesaje : 117
Puncte Puncte : 5189
Versiune Versiune :
Varsta Varsta : 24
Localizare Localizare : Podu-Turcului

Vezi profilul utilizatorului http://www.cd-forum.net

Sus In jos

Re: (phpBB3)Sistem nou de afişare al profilului

Mesaj Scris de razvan la data de Joi Iun 28, 2012 11:21 am

Ca o specificatie ar trebui sa fie amplasate doar in topicuri , deoarece doar acolo ai nevoie de ele , daca le pui in toate paginile o sa se "incarce mai greu forumu"

razvan
Membru nou

Mesaje Mesaje : 3
Puncte Puncte : 4725
Versiune Versiune :

Vezi profilul utilizatorului

Sus In jos

Re: (phpBB3)Sistem nou de afişare al profilului

Mesaj Scris de L! la data de Joi Iun 28, 2012 11:48 am

razvan a scris:Ca o specificatie ar trebui sa fie amplasate doar in topicuri , deoarece doar acolo ai nevoie de ele , daca le pui in toate paginile o sa se "incarce mai greu forumu"
Ah, este chiar bine de ştiut! Wink
avatar
L!
Membru experimentat

Mesaje Mesaje : 109
Puncte Puncte : 4851
Versiune Versiune :
Varsta Varsta : 25
Localizare Localizare : Localizare

Vezi profilul utilizatorului http://lforum.forumotion.com/

Sus In jos

Re: (phpBB3)Sistem nou de afişare al profilului

Mesaj Scris de fraNNNta la data de Dum Iul 01, 2012 2:06 am

numai ca tutorialul a fost tradus in limba romana,de ionuz trebuia specificat asta Smile

fraNNNta
Membru nou

Mesaje Mesaje : 6
Puncte Puncte : 4730
Versiune Versiune :

Vezi profilul utilizatorului

Sus In jos

Re: (phpBB3)Sistem nou de afişare al profilului

Mesaj Scris de Răzvan. la data de Dum Iul 01, 2012 3:32 am

Sincer,arata mai bine default decat cu atata border,oricum fiecare cu gusturile lui.
avatar
Răzvan.
Contribuitor
Contribuitor

Mesaje Mesaje : 57
Puncte Puncte : 5159
Versiune Versiune :
Varsta Varsta : 23
Localizare Localizare : Romania.

Vezi profilul utilizatorului

Sus In jos

Re: (phpBB3)Sistem nou de afişare al profilului

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum