¡Bienvenido! ¿Aún no estás registrado?, deberás registrarte antes de poder usar el Chat, Comentar y Descargar en el Foro. Usa un email válido para la activación.
Calificación:
  • 1 voto(s) - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5

COMPLEMENTOS Fondo de perfil y cabecera tipo facebook (Act 1.3)
#1

6
Mejor respuesta del mensaje Fondo de perfil y cabecera tipo facebook (Act 1.3)Capturas
[img]Registrate o inicia tu sesión para ver este contenido[/img]
[img]Registrate o inicia tu sesión para ver este contenido[/img]



Ejecutar estas consultas
ALTER TABLE `u_perfilADD `p_fondoVARCHAR120 NOT NULL 
 
ALTER TABLE `u_perfilADD `p_fondoperVARCHAR120 NOT NULL 
 
 
En c.cuenta.php --> inc --> class --> c.cuenta.php

Buscar:
/*
loadHeadInfo($user_id)
*/
function loadHeadInfo($user_id){
global 
$tsUser$tsCore;
// INFORMACION GENERAL
$query db_exec(array(__FILE____LINE__), 'query''SELECT u.user_id, u.user_name, u.user_registro, u.user_lastactive, u.user_activo, u.user_baneado, p.user_sexo, p.user_pais, p.p_nombre, p.p_avatar, p.p_mensaje, p.p_socials, p.p_empresa, p.p_configs FROM u_miembros AS u, u_perfil AS p WHERE u.user_id = \''.(int)$user_id.'\' AND p.user_id = \''.(int)$user_id.'\'');
$data db_exec('fetch_assoc'$query); 
 
 
Reemplazar por:
/*
loadHeadInfo($user_id)
*/
function loadHeadInfo($user_id){
global 
$tsUser$tsCore;
// INFORMACION GENERAL
$query db_exec(array(__FILE____LINE__), 'query''SELECT u.user_id, u.user_name, u.user_registro, u.user_lastactive, u.user_activo, u.user_baneado, p.user_sexo, p.p_fondo, p.user_pais, p.p_nombre, p.p_avatar, p.p_mensaje, p.p_socials, p.p_fondoper, p.p_empresa, p.p_configs FROM u_miembros AS u, u_perfil AS p WHERE u.user_id = \''.(int)$user_id.'\' AND p.user_id = \''.(int)$user_id.'\'');
$data db_exec('fetch_assoc'$query); 


Agregado:
p.p_fondo
 
p.p_fondoper


Buscar:
'sitio' => $tsCore->setSecure($tsCore->parseBadWords($sitio), true), 
 
 
Debajo agregar:
'fondo' => $tsCore->setSecure($_POST['fondo']),
'fondoper' => $tsCore->setSecure($_POST['fondoper']), 
 
 
En t.perfil.tpl --> themes --> default --> templates --> t.perfil.tpl

Buscar:
{include file='sections/main_header.tpl'}
<
script type="text/javascript" src="{$tsConfig.default}/js/perfil.js"></script
 
 
Reemplazar por:
{include file='sections/main_header.tpl'}
<
body style="background-image:url('{$tsInfo.p_fondo}');background-attachment: fixed; background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;">
<
script type="text/javascript" src="{$tsConfig.default}/js/perfil.js"></script
{if $tsInfo.p_fondoper != ''}
<
div class="cover" style="margin-top: 0px;" data-collapse="97" id="u3yiwu_4">
<
div class="coverImage">
<
div id="zoom-fondo" onClick="zoom('ocultar','zoom')"></div>
<
div id="zoom">
<
center><b id='zoom_contenido'></b></center>
</
div>
<
class="coverWrap" style="{if $tsInfo.p_fondoper}position: relative!important;{/if}" rel="theater" id="fbCoverImageContainer">
<
img class="photo img" src="{$tsInfo.p_fondoper}id="{$tsInfo.p_fondoper}text="Foto de {$tsInfo.nick}style="top:-13px;height:300px;width:100%;" data-fbid="2738175107697" onclick="zoom('mostrar','zoom','{$tsInfo.p_fondoper}')">
</
a>
</
div>
</
div>
{/if} 


En m.cuenta_perfil_me.tpl --> themes --> default --> templates --> modules --> m.cuenta_perfil_me.tpl

Buscar:
<div class="field">
<
label for="sitio">Sitio Web</label>
<
input type="text" value="{$tsPerfil.p_sitio}maxlength="60" name="sitio" id="sitio" class="text cuenta-save-2" style="width:230px">
</
div
 
 
Debajo agregar:
<div class="field">
                                        <
label for="sitio">Cabecera de Perfil:<br /><font color="red"><span>url de una imagen mayor a 1000 x 230</span></font></label><br />
                                        <
input type="text" value="{$tsPerfil.p_fondoper}maxlength="120" name="fondoper" id="sitio" class="text cuenta-save-2" style="width:230px">
                                    </
div>
                                    <
div class="field">
                                        <
label for="sitio">Fondo del perfil:<br /><span><font color="red">url de una imagen mayor a 800 x 600</span></font></label><br />
                                        <
input type="text" value="{$tsPerfil.p_fondo}maxlength="120" name="fondo" id="sitio" class="text cuenta-save-2" style="width:230px">
                                    </
div

 
En m.perfil_headinfo.tpl --> themes --> default --> templates --> modules --> m.perfil_headinfo.tpl

Buscar:
<div class="perfil-avatar">
<
a href="{$tsConfig.url}/perfil/{$tsInfo.nick}"><img alt="" src="{$tsConfig.url}/files/avatar/{if $tsInfo.p_avatar}{$tsInfo.uid}_120{else}avatar{/if}.jpg"/></a>
</
div
 
 
Reemplazar por:
{if $tsInfo.p_fondoper != ''}
<
div class="perfil-avatar2">
<
a href="{$tsConfig.url}/perfil/{$tsInfo.nick}"><img alt="" src="{$tsConfig.url}/files/avatar/{if $tsInfo.p_avatar}{$tsInfo.uid}_120{else}avatar{/if}.jpg"/></a>
</
div>
{else}
<
div class="perfil-avatar">
<
a href="{$tsConfig.url}/perfil/{$tsInfo.nick}"><img alt="" src="{$tsConfig.url}/files/avatar/{if $tsInfo.p_avatar}{$tsInfo.uid}_120{else}avatar{/if}.jpg"/></a>
</
div>
{/if} 
 
 
En estilo.css --> themes --> default --> estilo.css

Al final agregar:
.coverWrap{display:block;position:absolute;height:300px;overflow:hidden;margin:0 auto;text-decoration:none;min-height:0;max-height:300px}.perfil-avatar2{float:left;border:6px solid #fff;-webkit-border-radius:2px;margin:-80px 10px 10px 0}.perfil-avatar2 img{background-color:#fff;border:1px solid #ccc;height:120px;width:120px}#zoom-fondo{display:none;position:fixed;cursor:pointer;top:0;left:0;width:100%;height:100%;background:#000;z-index:101;-moz-opacity:.6;-khtml-opacity:.6;opacity:.6}.cerrar-fondo{display:none;position:fixed;cursor:pointer;top:1;left:1;background:#000 url(images/icons/close.png) no-repeat;z-index:101}#zoom{height:auto;margin:0 auto;width:50%;display:none;position:fixed;margin-top:-5%;text-shadow:0 1px 1px rgba(0,0,0,.3);color:#fff;font:14px arial,sans-serif;text-align:left;background:#000;z-index:101;border:5px solid #000;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}.maxin{max-width:620px;max-height:430px}.a{color:#00bfff;padding:3px;margin:2px;background:#78899} 


En acciones.js --> themes --> default --> js --> acciones.js

Al final agregar:
function zoom(estado,elemento,img_id) {
//alert(img_id);
if(estado == "mostrar") {
zoom_estado document.getElementById(elemento);
zoom_fondo document.getElementById('zoom-fondo');
imagen_id document.getElementById(img_id);
ruta imagen_id.getAttribute("src");
document.getElementById('zoom_contenido').innerHTML "<img style='max-width:90%; max-height:450px;' src='"+ruta+"'><br>";
zoom_estado.style.display 'block';
zoom_fondo.style.display 'block';
} else {
zoom_estado document.getElementById(elemento);
zoom_fondo document.getElementById('zoom-fondo');
zoom_estado.style.display 'none';
zoom_fondo.style.display 'none';
}






Creditos: Debes agradecer para ver el contenido...
Responder
#2

0
(10-17-2021, 10:47 AM)Chctrpgo escribió: Debes agradecer para ver el contenido... 

Y para la v5?
Responder
#3

1
(04-04-2024, 11:34 AM)York0x escribió: Debes agradecer para ver el contenido...
(10-17-2021, 10:47 AM)Chctrpgo escribió: Debes agradecer para ver el contenido... 

Y para la v5?

El funcionamiento es igual en cualquier tema, lo que cambia es el diseño, prueba esto

Haz lo que te dice el tutorial menos lo de estos archivos que solo pones lo que te dejo aquí

En t.perfil.tpl
{include file='sections/main_header.tpl'}
<
body style="background-image:url('{$tsInfo.p_fondo}');background-attachment: fixed; background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;">
<
script type="text/javascript" src="{$tsConfig.default}/js/perfil.js"></script>
{if 
$tsInfo.p_fondoper != ''}
<
div class="cover" style="margin-top: 0px;" data-collapse="97" id="u3yiwu_4">
<
div class="coverImage">
<
div id="zoom-fondo" onClick="zoom('ocultar','zoom')"></div>
<
div id="zoom">
<
center><b id='zoom_contenido'></b></center>
</
div>
<
class="coverWrap" style="{if $tsInfo.p_fondoper}position: relative!important;{/if}" rel="theater" id="fbCoverImageContainer">
<
img class="photo img" src="{$tsInfo.p_fondoper}id="{$tsInfo.p_fondoper}text="Foto de {$tsInfo.nick}style="top:-13px;height:300px;width:100%;" data-fbid="2738175107697" onclick="zoom('mostrar','zoom','{$tsInfo.p_fondoper}')">
</
a>
</
div>
</
div>
{/if} 


En m.perfil_headinfo.tpl
{if $tsInfo.p_fondoper != ''}
<
div class="perfil-avatar2">
<
a href="{$tsConfig.url}/perfil/{$tsInfo.nick}">
{*<
img alt="" src="{$tsConfig.url}/files/avatar/{if $tsInfo.p_avatar}{$tsInfo.uid}_120{else}avatar{/if}.jpg?{$smarty.now|date_format:'%Y%m%d%H%M%S'}"/>*}
<
img alt="" src="{$tsConfig.url}/files/avatar/{$tsInfo.uid}_120.jpg?{$smarty.now|date_format:'%Y%m%d%H%M%S'}"/>
</
a>
</
div>
{else}
<
div class="perfil-avatar">
<
a href="{$tsConfig.url}/perfil/{$tsInfo.nick}">
{*<
img alt="" src="{$tsConfig.url}/files/avatar/{if $tsInfo.p_avatar}{$tsInfo.uid}_120{else}avatar{/if}.jpg?{$smarty.now|date_format:'%Y%m%d%H%M%S'}"/>*}
<
img alt="" src="{$tsConfig.url}/files/avatar/{$tsInfo.uid}_120.jpg?{$smarty.now|date_format:'%Y%m%d%H%M%S'}"/>
</
a>
</
div>
{/if} 


En estilo.css
.perfil-avatar2 {
float:left;
margin-right:10px

Responder


Compartir en:

Salto de foro:


Usuarios navegando en este tema: 1 invitado(s)