Pozitionarea propriului avatar in header

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Pozitionarea propriului avatar in header

Mesaj Scris de Keir la data de Vin 31 Aug - 22:24

Avatar in header


Salutare tuturor Salut! ,

În acest tutorial veți afla cum puteți poziționa toate avatarurile de pe forumul dvs. în header, pentru un aspect mai plăcut. Fericit

Imagine demo:

Cerințe și criterii:


  • Acest tutorial este disponibil doar pentru versiunile de forumuri: Phpbb3, Punbb, Invision.
  • Pentru a funcționa, trebuie ca opțiunea "Activeaza gestiunea codurilor JavaScript" să fie setată pe "Da".(din PA - Module - Javascript și HTML - Gestiunea codurilor Javascript)


Pentru început, trebuie să vă stabiliți numele versiunii de forum pe care o utilizați, iar apoi să alegeți codul specific dintre cele de mai jos. Dacă nu știți versiunea, intrați în PA - Afișare - Alegere temă - Versiune. A face cu ochiul

Pentru phpBB3:
Cod:
    $(document).ready(function(){
    $('.headerbar').append('<div id="avatar_header"></div>');
    $('#avatar_header').load('/profile?mode=editprofile&page_profil=avatars #cp-main .panel  img'); });

Pentru punBB:
Cod:
    

    $(document).ready(function(){
    $('#pun-intro').append('<div id="avatar_header"></div>');
    $('#avatar_header').load('profile?mode=editprofile&page_profil=avatars .frm-set dl img'); });

Pentru Invision:
Cod:
jQuery(document).ready(function() {
$('div#logostrip').append('<div id="avatar_header"></div>');
$('#avatar_header').load('/profile?mode=editprofile&page_profil=avatars .box-content img');
});

Ajustarea pozitionarii si marimii acestuia folosind CSS-ul:

Daca doriti sa micsorati imaginea, adaugati in PA - Afisare - Imagini si culori - Culori - Foaie de stil CSS si modificati urmatorul cod:
Cod:
#avatar_header img{ max-height:xpx;
max-width:xpx;}

Daca doriti sa pozitionati imaginea(sa o mutati), adaugati in PA - Afisare - Imagini si culori - Culori - Foaie de stil CSS si modificati urmatorul cod:
Cod:
#avatar_header{margin-top/bottom:xpx;
margin-right/left:xpx;}

Daca doriti sa utilizati acelasi stil de pozitionare ca si cel din imagine, introduce in Foaia de stil CSS(navigarea catre ea este prezentata mai sus):
Cod:
    #avatar_header{margin-top: -70px;
    margin-left:900px;}

    #avatar_header img{ max-height:100px;
    max-width:100px;}

Atentie! Avatarul utilizat in imagine este cel al lui Ielex. Marimile lui sunt fixe, fapt ce determina o pozitionare exacta. Lucrul important este ca trebuie sa faceti propriile modificari ale pozitionarii avatarurilor, in functie de marimile acestora. A face cu ochiul

Acesta a fost tutorialul! Daca l-ati urmat intocmai, rezultatul va fi evident.  Fericit

Codurile acestui tutorial au fost oferite de .razvan, tutorial scris de Keir.

   Copyright ˆ Forumgratuit.ro Nicio parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Keir
Membru onorific
Membru onorific

masculin

Mesaje : 6771
Varsta : 18
Localizare : Buzau
Data de inscriere : 28/12/2011
Multumiri : 68
Niciun avertisment

http://neotalk.wikiforum.ro/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum