Manual / Perfil en Celdas SMF.RC4

DANIEL! · January 25, 2011, 08:39:00 PM

FUENTE / POST ORIGINAL: http://www.latinozlife.com/index.php?topic=11923

Que tal amigos de Simplemachines despues de mucho tiempo de mucho tiempo sin hacer un post, comparto con ustedes este manual que cree para tener los perfiles en Celdas para SMF.RC4 , veo que es muy pedido[/b], el resultado:

Bien, primero agregaremos los estilos.

Abrimos nuestro index.css que se encuentra en (tutheme/css/index.css).

Buscamos:

Code Select

.poster
{
	background: #ECEBE6;
	border-right: 1px solid #C4C0B5;
	float: left;
	width: 16em;
}

Remplazamos:

Code Select

.poster
{
	background: #FBFBFB;
	border-right: 1px solid #E6E6E6;
	float: left;
	width: 16em;
}

Agregamos o buscamos: (si no encuentran ese estilo lo agregan, si lo tienen simplemente remplazan)

Code Select

div.poster ul li
{
   background: #FFF;
   border: 1px solid #C4C0B5;
   margin-bottom: 1px;
   padding: 3px 0 3px 15px;
   color: #837E6E;
   font-size: 11px;
}

( Los valores y estilos varian de acuerdo a su tema)

Remplazan o agregan:

Code Select

div.poster ul li
{
   background : #fcfcfc url(../images/theme/celdas.png) repeat-x;
border : 1px solid #8AC78F;
margin-bottom : 2px;
padding : 4px;
text-align : center;
color : #000000;
width : 100%;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
box-shadow:  1px 2px 2px #E1E1E1;
		  -webkit-box-shadow:  1px 2px 2px #DFDFDF;
		  -moz-box-shadow:  1px 2px 2px #DFDFDF;
}

Agregan al ultimo:

Code Select

/* Custom profile */
div.poster ul.reset > li, .inner_poster
{
   background: #F8FAFE;
   color: #666;
   margin: 0 auto;
   font-size: 12px;
   padding: 3px 0;
   text-align: center;
   border: 1px solid #B3C7DF;
   -moz-border-radius: 6px 6px 0px 0px;
   -webkit-border-radius: 6px 6px 0px 0px;
   border-radius: 6px 6px 0px 0px;
   -moz-box-shadow: 0px 0px 4px #B3C7DF;
   box-shadow: 0px 0px 4px #B3C7DF;
   -webkit-box-shadow: 0px 0px 4px #B3C7DF;
}
.inner_poster
{
background: #EDF2FA;
   width: 92%;
   padding: 10px 0;
}
div.poster ul.reset > li.memberlink
{
   border: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   font-size: 16px;   
   background:#EDF2FA;
}

div.poster ul.reset > li.stars
{
   border: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   padding-top:5px;
   padding-bottom:5px;  
   background:#EDF2FA;
}

Ahora Modificaremos el Display.template.php

Antes de empezar con las modificaciones, les dire como poner el avatar debajo del titulo personalizado, ya que por defecto viene debajo del rango.

Buscamos y Copiamos:

Code Select

// Show avatars, images, etc.?
			if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
				echo '
								<li class="avatar">
									<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
										', $message['member']['avatar']['image'], '
									</a>
								</li>';

Pegamos despues de :

Code Select

// Show the member's custom title, if they have one.
		if (!empty($message['member']['title']))
			echo '
								<li><span style="color:',$message['member']['group_color'],'">', $message['member']['title'], '</span></li>';

NO olviden borrar el codigo de avatar anterior ..

Buscamos:

Code Select

<div class="poster">

Remplazamos:

Code Select

<div class="poster"><span class="space"></span>
<div class="inner_poster">
<ul class="reset"><li class="memberlink">

Revisen si su tema trae ese codigo, en ese caso no hagan este paso.

Buscar:

Code Select

', $message['member']['link'], '
                     </h4>

Remplazamos:

Code Select

  ', $message['member']['link'], '
                     </h4></li></ul>

Revisen si su tema trae ese codigo, en ese caso no hagan este paso.

Buscamos:

Code Select

// Done with the information about the poster... on to the post itself.
		echo '
							</ul>
						</div>

Remplazamos:

Code Select

// Done with the information about the poster... on to the post itself.
		echo '
							</ul></div><span class="space"></span>
						</div>

Revisen si su tema trae ese codigo, en ese caso no hagan este paso.

Eso es todo, cualquier duda dejen un comentario y con gusto les respondere.

Hasta la Proxima..

PD: Devo aclarar que en IE no se veran los redondeos por ser solo CSS.

zutzu · January 25, 2011, 08:57:41 PM

Gracias por compartir

Te aconsejo que primero hagas las pruebas o te bases la modificacion en el tema default de smf, y veas como queda.

PD.- Para renderizar css3 en IE, se puede usar un archivo .htc, como PIE.htc u otros que hay por ahí.

MrKuchiki · February 11, 2011, 02:41:11 PM

De maravillas, genial. Muchísimas gracias.

^HeRaCLeS^ · February 11, 2011, 02:54:35 PM

Esta bueno el tutorial, pero estaria mejor que digas en que theme esta basado, ya que el default de smf no es asi, y no van a encontrar todo eso que vos decis ahi.

MrKuchiki · February 11, 2011, 03:17:12 PM

Disculpa, me funcionó pero tengo un problemilla. Ayúdenme, por favor.

La parte de arriba de los comentarios no sale bien y las firmas está desparramadas. Espero que puedas ayudarme. Adjunto mi .css y display template. Gracias de antemano.

Adjunto mi css: http://www.megaupload.com/?d=PNEN2XVV

Y display template: http://www.megaupload.com/?d=48MNDM9H

^HeRaCLeS^ · February 11, 2011, 03:52:06 PM

Respondiendo a tu pedido por Mp.

Mira, no es porque no quiera ayudarte ni nada por el estilo, pero es poco etico que yo me meta en este tema a modificarte algo cuando el tutorial tiene un autor.
Por lo menos a mi me molestaria hacer un tutorial y que despues se metan todos a querer hacer modificaciones sobre el.

Por respeto al usuario que hizo el tutorial no voy a hacer los cambios.

Esperemos a que el responda al tema y te diga que hiciste mal.

Si veo que en un tiempo considerable el usuario no aporto, bueno ahi seria otro tema y te ayudaria.

Esto es mi punto de vista, y no quiere decir que otro usuario no lo haga.

MrKuchiki · February 11, 2011, 03:59:16 PM

Ok, comprendo. Muchísimas gracias. Estaré pendiente de las respuesta.

DANIEL! · February 12, 2011, 12:19:16 PM

Gracias por los comentarios, y bueno creo que si devi hacerlo en base al tema default, pero de tods formas si se logra adaptar.

mm Mira veo que tu thema la estructura del post esta diferente a los temas comunes, edite un poco el css, pruebalo.. has un respaldo antes:

aqui esta los archivos adjuntos:
http://www.latinozlife.com/index.php?topic=11923.msg27812#msg27812

^HeRaCLeS^ · February 12, 2011, 02:01:24 PM

QuoteGracias por los comentarios, y bueno creo que si devi hacerlo en base al tema default, pero de tods formas si se logra adaptar.

Sisi, obviamente que se logra adaptar.
La "critica" fue por el tema de que generalmente los que siguen los manuales los siguen al pie de la letra, y si les cambias un . ya no saben que hacer.

Como dije antes, el tutorial esta bueno y a muchos les sirve, pero a muchos otros se les va a complicar.

Solamente por eso fue lo dicho del theme, por lo demas esta perfecto.

Saludos

MrKuchiki · February 12, 2011, 05:36:38 PM

Genial!! Está perfecto. Muchísimas Gracias.

ReyFranciToO · April 05, 2011, 02:24:16 PM

Olaz amigos wenoO quiero que me ayuden a resolver mi duda se que es un poco complikado con mi persona por que soy un NovatoO ... Por esoO quiero que me ayuden...

Problemas....

1.- CuandoO hago los pasos para las celdas No me sale como la imagen mostrada

2.- CuandoO creo que lo logre revisoO mi foro y Bunnnn resulta que sale demacidoO espacio para abajo y la imgen no sale......

Mi foro ......

1.- Mi foro es 2.0 r5
2.- Mi tema es Soft Cartoon

Adjunto mi Css, y mi Index.template ya lo ise tal y son los pasos pero no me sale `
para mayor rapides y que no se demoren boy a adjuntar mis dos documentos...sin haver echo nada ....

Aqui los Archivos Mi Index.Css y Mi Display.Template
hxxp:www.megaupload.com/?d=J90MOH20 [nonactive]

charlys79 · May 27, 2011, 07:34:40 PM

Excelente voy a probar haber que tal gracias por compartir este tipo de cosas aveces quedan bastentes bonitos en un foro saludos!!!grax

DoctorMalboro · May 29, 2011, 01:50:46 PM

Esto es algo incomprensible:

Code Select

	padding-bottom:30000px;
	margin-bottom:-30000px;

No podes poner eso y esperar que funcione bien...

zutzu · May 29, 2011, 08:10:48 PM

Quote from: DoctorMalboro on May 29, 2011, 01:50:46 PM
Esto es algo incomprensible:

Code Select Expand
padding-bottom:30000px; margin-bottom:-30000px;

No podes poner eso y esperar que funcione bien...

Es un "hack" , por asi decirlo, de css.
yo lo use, mas bien, este css fue sacado de los themes que hacia.

el contenedor debe tener un overflow: hidden;

--

saludos.

DoctorMalboro · May 29, 2011, 08:43:34 PM

Me parece algo que no va a funcionar "bien" en todos los navegadores y resoluciones, además, es más fácil usar float y overflow...

zutzu · May 29, 2011, 08:47:39 PM

el float no tiene nada que ver aqui, ni serviria.

el css que marque, es para que el area del poster, cubra el 100% de alto de su seccion, con un borde en la parte derecha.
y asi evitar editar el template, para poder lograr lo mismo.

@Newbie.- adjunta tus archivos al tema, y no a un hosting.

DoctorMalboro · May 29, 2011, 08:50:50 PM

Quote from: zutzu on May 29, 2011, 08:47:39 PM
el float no tiene nada que ver aqui, ni serviria.

el css que marque, es para que el area del poster, cubra el 100% de alto de su seccion, con un borde en la parte derecha.
y asi evitar editar el template, para poder lograr lo mismo.

@Newbie.- adjunta tus archivos al tema, y no a un hosting.

Ah, tenes razón... Igual algo que aprendí es que usar margin y padding en el mismo bloque sólo causa problemas...

PolacoJNM · June 30, 2011, 10:50:29 AM

Hola. Muy buen tuto.. tengo el mismo problema que varios, al ponerlo me sale una linea blanca hasta el final de la web. Estoy utilizando en theme bad company 2. Aca te dejo los 2 archivos por si me podes ayudar

hxxp:www.megaupload.com/?d=WWSFSONU [nonactive]

h3r0 · August 17, 2011, 07:42:26 PM

Hola he intentado hacer esto pero no resulta.
mi foro es SMF 2.0
y uso el tema Submission by, Crip
link de mi foro: aportesmaniacos.com

adjunto los archivos index.css y Display.template.php
por si alguien me quiere ayudar.
http://www.mediafire.com/?sw6j06ae3blaxw9

o diganme si no se puede usar con mi version del foro.
ayuda por favor

Mototaxi Peru · October 05, 2012, 09:01:32 PM

Quote from: ^HeRaCLeS^ on February 11, 2011, 03:52:06 PM
Respondiendo a tu pedido por Mp.

Mira, no es porque no quiera ayudarte ni nada por el estilo, pero es poco etico que yo me meta en este tema a modificarte algo cuando el tutorial tiene un autor.
Por lo menos a mi me molestaria hacer un tutorial y que despues se metan todos a querer hacer modificaciones sobre el.

Por respeto al usuario que hizo el tutorial no voy a hacer los cambios.

Esperemos a que el responda al tema y te diga que hiciste mal.

Si veo que en un tiempo considerable el usuario no aporto, bueno ahi seria otro tema y te ayudaria.

Esto es mi punto de vista, y no quiere decir que otro usuario no lo haga.

Que pensamiento tan tonto :S si todos van a pensar como tu para que se creo este foro? con tu comentario se podria entender que los creadores de SMF se molestan si alguien agregao o corrije algun bug de script :S

Te recomiendo que cambies de manera de pensar y si tienes el agrado de apoya runa modificacion e incluso mejorarla adelante . Piensa que mas faltas el respeto a la comunidad sabiando corregir algo y no lo haces . La idea de un foro es compartir mejorar y colabora runos a otros .

News:

Manual / Perfil en Celdas SMF.RC4