COMPLEMENTOS Fondo de perfil y cabecera tipo facebook (Act 1.3) - Versión para impresión
+- Phpost (https://phpost.es)
+-- Foro: Risus 1.3 (https://phpost.es/forum-6.html)
+--- Foro: Complementos (https://phpost.es/forum-7.html)
+---- Foro: Complementos Terminados (https://phpost.es/forum-8.html)
+---- Tema: COMPLEMENTOS Fondo de perfil y cabecera tipo facebook (Act 1.3) (/thread-238.html)
+- Phpost (https://phpost.es)
+-- Foro: Risus 1.3 (https://phpost.es/forum-6.html)
+--- Foro: Complementos (https://phpost.es/forum-7.html)
+---- Foro: Complementos Terminados (https://phpost.es/forum-8.html)
+---- Tema: COMPLEMENTOS Fondo de perfil y cabecera tipo facebook (Act 1.3) (/thread-238.html)
Fondo de perfil y cabecera tipo facebook (Act 1.3) - Chctrpgo - 10-17-2021
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
Código PHP:
ALTER TABLE `u_perfil` ADD `p_fondo` VARCHAR( 120 ) NOT NULL
Código PHP:
ALTER TABLE `u_perfil` ADD `p_fondoper` VARCHAR( 120 ) NOT NULL
En c.cuenta.php --> inc --> class --> c.cuenta.php
Buscar:
Código PHP:
/*
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:
Código PHP:
/*
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:
Código PHP:
p.p_fondo,
Código PHP:
p.p_fondoper,
Buscar:
Código PHP:
'sitio' => $tsCore->setSecure($tsCore->parseBadWords($sitio), true),
Debajo agregar:
Código PHP:
'fondo' => $tsCore->setSecure($_POST['fondo']),
'fondoper' => $tsCore->setSecure($_POST['fondoper']),
En t.perfil.tpl --> themes --> default --> templates --> t.perfil.tpl
Buscar:
Código PHP:
{include file='sections/main_header.tpl'}
<script type="text/javascript" src="{$tsConfig.default}/js/perfil.js"></script>
Reemplazar por:
Código PHP:
{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>
<a 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:
Código PHP:
<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:
Código PHP:
<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:
Código PHP:
<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:
Código PHP:
{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:
Código PHP:
.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:
Código PHP:
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: tutan-kabron
RE: Fondo de perfil y cabecera tipo facebook (Act 1.3) - York0x - 04-04-2024
(10-17-2021, 10:47 AM)Chctrpgo escribió:
Y para la v5?
RE: Fondo de perfil y cabecera tipo facebook (Act 1.3) - Chctrpgo - 04-04-2024
(04-04-2024, 11:34 AM)York0x escribió:(10-17-2021, 10:47 AM)Chctrpgo escribió:
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
Código PHP:
{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>
<a 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
Código PHP:
{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
Código PHP:
.perfil-avatar2 {
float:left;
margin-right:10px
}