- Punteggio reazioni
- 84
- Punti
- 55
Nome MOD:
Edit-Avatar FB Style
Tipologia Codice:
JavaScript+HTML
Descrizione:
MOD per aggiungere la possibilità di modificare immediatamente l'immagina dell'Avatar come utilizzato su FaceBook
Salve mi sono dilettato nel modificare alcune parti del codice sorgente per creare l'effetto sopra descritto . Per il momento il codice che vi fornisco l'ho testato solo in locale e solo con la Skin "Baisik" , ma vi invito a riportarmi qui di seguito le vostre impressioni e suggerimenti. Grazie.
Procedura:
ACP-->Aspetto-->Template-->sidebar_visitor_panel
In sidebar_visitor_panel dopo:
Inserisci il presente codice:
In sidebar_visitor_panel sostituisci:
con il presente codice:
Il codice è molto semplice , ma spero risulti utile a chi come me ne aveva bisogno.
Screen:
Funzionamento:
Quando il mouse passa sull'Avatar esce la scritta "Modifica immagine del profilo" , quando ne esce scompare , invece se si clicca viene aperto il sistema di Editing dell'Avatar. Cliccando sul pulsante Chiudi si ritorna alla pagina presente.
Edit-Avatar FB Style
Tipologia Codice:
JavaScript+HTML
Descrizione:
MOD per aggiungere la possibilità di modificare immediatamente l'immagina dell'Avatar come utilizzato su FaceBook
Salve mi sono dilettato nel modificare alcune parti del codice sorgente per creare l'effetto sopra descritto . Per il momento il codice che vi fornisco l'ho testato solo in locale e solo con la Skin "Baisik" , ma vi invito a riportarmi qui di seguito le vostre impressioni e suggerimenti. Grazie.
Procedura:
ACP-->Aspetto-->Template-->sidebar_visitor_panel
In sidebar_visitor_panel dopo:
Codice:
<xen:if is="{$visitor.user_id}">
Inserisci il presente codice:
Codice:
<!-- EDUARDESIGNER MOD-->
<script >
function mostra() {
document.getElementById("xxx").style.display="block";
}
function nascondi() {
document.getElementById("xxx").style.display="none";
}
function apri() {
document.getElementById("xxy").style.display="block";
}
function chiudi() {
document.getElementById("xxy").style.display="none";
}
</script>
<!-- EDUARDESIGNER MOD-->
In sidebar_visitor_panel sostituisci:
Codice:
<xen:avatar user="$visitor" size="m" img="true" />
con il presente codice:
Codice:
<xen:avatar user="$visitor" size="m" img="true" onmouseover="JavaScript:mostra()" onmouseout="JavaScript:nascondi()" />
<!-- EDUARDESIGNER MOD-->
<div id="xxx" onclickt="JavaScript:apri()" style="background-color:#fff;border:1px solid #111;height:20px;width:155px;color:#111;margin-left:-125px; position:fixed; display:none ; margin-top:20px" onmouseover="JavaScript:mostra()" onmouseout="JavaScript:nascondi()">
<input type="button" value="Modifica immagine del profilo." style="background-color:#fff;border:1px solid transparent;height:20px;width:155px;color:#111;" onclick="JavaScript:apri()" >
</div>
<div id="xxy" class="xenOverlay avatarEditor" style="z-index: 9999; top: 88.5px; left: 462.5px; position: fixed; display: none; ">
<xen:title>{xen:phrase avatar_editor}</xen:title>
<xen:navigation>
<xen:breadcrumb href="{xen:link 'full:account/personal-details'}">{xen:phrase personal_details}</xen:breadcrumb>
</xen:navigation>
<xen:require css="account_avatar_overlay.css" />
<xen:require JavaScript="JavaScript/xenforo/avatar_editor.JavaScript" />
<form action="{xen:link account/avatar-upload}" method="post" enctype="multipart/form-data"
class="AvatarEditor AutoInlineUploader formOverlay"
data-overlayClass="avatarEditor"
data-maxWidth="{$maxWidth}">
<div class="currentAvatar">
<label for="ctrl_avatar" class="avatar NoOverlay Av{$visitor.user_id}l"><img src="{xen:helper avatar, $visitor, l}" alt="{xen:phrase current_avatar}" /></label>
</div>
<ul class="modifyControls">
<li class="avatarOption">
<div class="avatarCropper avatarLabel" style="width: {$maxWidth}px; height: {$maxWidth}px">
<label for="ctrl_useGravatar_0" class="AvatarCropControl avatar NoOverlay Av{$visitor.user_id}l" style="width: {$maxWidth}px; height: {$maxWidth}px">
<img src="{xen:helper avatar, $visitor, l, custom}" style="{$maxDimension}: {$maxWidth}px" alt="{xen:phrase avatar}" />
</label>
</div>
<input type="radio" name="use_gravatar" value="0" class="Disabler radioOption" id="ctrl_useGravatar_0"{xen:checked '!{$visitor.gravatar}'} />
<div class="labelText" id="ctrl_useGravatar_0_Disabler">
<label for="ctrl_useGravatar_0" id="ExistingCustom">
{xen:phrase use_custom_avatar}
<span class="explain faint">
{xen:phrase drag_image_to_crop_then_click_okay_or_upload_new_avatar}
</span>
</label>
<label for="ctrl_avatar" class="ClickProxy" rel="#ctrl_useGravatar_0" data-allowDefault="1">{xen:phrase upload_new_custom_avatar}:</label>
<input type="file" name="avatar" class="textCtrl" onchange="this.blur()" id="ctrl_avatar" title="{xen:phrase supported_formats_jpeg_png_gif}" />
<div class="explain faint">{xen:phrase it_is_recommended_that_you_use_image_that_is_at_least_200x200_pixels}</div>
</div>
</li>
<xen:if is="{$xenOptions.gravatarEnable}">
<li class="avatarOption">
<label for="ctrl_useGravatar_1" class="avatarLabel avatar">
<img src="{$gravatarUrl}" class="Gravatar" alt="{xen:phrase gravatar}" width="{$maxWidth}" height="{$maxWidth}" id="GravatarImg" />
</label>
<input type="radio" name="use_gravatar" value="1" class="Disabler radioOption" id="ctrl_useGravatar_1"{xen:checked '{$visitor.gravatar}'} />
<div class="labelText" id="ctrl_useGravatar_1_Disabler">
<label for="ctrl_useGravatar_1">{xen:phrase use_gravatar}</label>
<input type="email" name="gravatar" value="{$gravatarEmail}" class="textCtrl" id="GravatarEmail" placeholder="{xen:phrase gravatar_email_address}" />
<input type="button" class="button" id="Gravatar{xen:phrase test}" value="{xen:phrase test}"
data-testUrl="{xen:link account/gravatar-test}"
data-testSrc="#GravatarEmail"
data-testImg="#GravatarImg"
data-testErr="#GravatarError" />
<p class="explain faint">
<label for="ctrl_useGravatar_1"><span id="GravatarError"></span> {xen:phrase enter_email_address_of_gravatar_you_want_to_use}</label>
<a class="hint" href="http://gravatar.com" rel="nofollow" target="_blank">{xen:phrase whats_gravatar}</a>
</p>
</div>
</li>
</xen:if>
<li class="submitUnit saveDeleteControls">
<label for="DeleteAvatar" class="deleteCtrl"><input type="checkbox" name="delete" value="1" id="DeleteAvatar" /> {xen:phrase delete_current_avatar_question}</label>
<span class="buttons">
<input type="submit" value="{xen:phrase okay}" class="button primary" accesskey="s" id="ctrl_save" />
<input type="reset" value="{xen:phrase close}" class="button OverlayCloser overlayOnly" accesskey="d" onclick="JavaScript:chiudi()" />
</span>
</li>
</ul>
<input type="hidden" name="avatar_date" value="{$visitor.avatar_date}" />
<input type="hidden" name="avatar_crop_x" value="{$cropX}" />
<input type="hidden" name="avatar_crop_y" value="{$cropY}" />
<input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
</form>
</div>
<!-- EDUARDESIGNER MOD-->
Il codice è molto semplice , ma spero risulti utile a chi come me ne aveva bisogno.
Screen:
Funzionamento:
Quando il mouse passa sull'Avatar esce la scritta "Modifica immagine del profilo" , quando ne esce scompare , invece se si clicca viene aperto il sistema di Editing dell'Avatar. Cliccando sul pulsante Chiudi si ritorna alla pagina presente.