#phpbb3

[xariacodes]

Long time, no see! Here’s a dark, 70s inspired skin I coded for a personal, private project.

[necromancercoding]

A petición de un anon, traigo un código que puede ayudaros a poner los avatares de los conectados en las últimas 24 horas. Esta versión sólo funciona en el índice. Encontrarás todas las instrucciones y los códigos bajo el cut.

Lo primero que debes hacer es establecer las cajas de donde copiaremos y donde pegaremos las cosas. Los templates a editar son index_body y profile_view_body. Este código está hecho para funcionar con perfiles sencillos; si tienes un perfil avanzado, el método sería distinto. Revisa el asterisco al final. Si quieres usar este código para los usuarios online ahora, revisa el segundo asterisco.

1.- Primero editaremos el index_body. Dirígete a la línea 68 (template original) donde tienes la variable {L_CONNECTED_MEMBERS}. Sustituye esa línea por lo siguiente:

<div class="st24texto">{L_CONNECTED_MEMBERS}</div> <div class="st24icons"></div>

2.- Dirígete a profile_view_body y busca la línea 13. Encontrarás un elemento: <dd>{AVATAR_IMG}</dd>. Sustitúyelo por <dd class="psavatar">{AVATAR_IMG}</dd>.

3.- Instala el siguiente javascript marcando su posición únicamente en el índice:

$(document).ready(function(){  $('.st24texto a').each(function() {    var lastlink = $(this).attr('href');    var lastnombre = $(this).text();    $.get(lastlink, function( data ) {      var lasticon = $(data).find('.psavatar').html();      var laststring = '<a href="' + lastlink + '" title="' + lastnombre + '">' + lasticon + '</a>';      $('.st24icons').append(laststring);      $('.st24icons img').removeAttr('title');    });  }); });

¡Y ya está! Ahora solo tienes que agregar el CSS para que queden como una lista de iconos y ya tienes tu caja de avatares. Si sólo quieres que salga la caja de avatares y no el texto, simplemente incluye en tu css .st24texto { display:none; }

* Para el perfil avanzado, haz solo el primer paso y usa este javascript en lugar del que he dado en el paso 3.

$(document).ready(function(){  $('.st24texto a').each(function() {    var lastlink = $(this).attr('href');    var lastnombre = $(this).text();    $.get(lastlink, function( data ) {      var lasticon = $(data).find('#profile-advanced-right .module:first-of-type img').attr('src');      var laststring = '<a href="' + lastlink + '" title="' + lastnombre + '"><img src="' + lasticon + '"/></a>';      $('.st24icons').append(laststring);      $('.st24icons img').removeAttr('title');    });  }); });

** Para usar esto para los conectados ahora y no los conectados en las 24 horas, no seguiremos el primer paso que he dado sino estos pasos alternativos:

1.- En index_body, busca la línea 65, que contiene la variable {LOGGED_IN_USER_LIST} y sustitúyela por esto:

<div class="stahoratexto">{LOGGED_IN_USER_LIST}</div> <div class="stahoraicons"></div>

2.- Mismo paso que anteriormente.

3.- Usa este javascript, también marcado como sólo en índice:

$(document).ready(function(){  $('.stahoratexto a').each(function() {    var lastlink = $(this).attr('href');    var lastnombre = $(this).text();    $.get(lastlink, function( data ) {      var lasticon = $(data).find('.psavatar').html();      var laststring = '<a href="' + lastlink + '" title="' + lastnombre + '">' + lasticon + '</a>';      $('.stahoraicons').append(laststring);      $('.stahoraicons img').removeAttr('title');    });  }); });

Esas son las alternativas que se me ocurren para este código, pero si tienes alguna duda o quieres usarlo para algo que no está aclarado aquí, ¡dímelo! Así podré añadirlo a este tutorial y que pueda servir para más gente.

Si te ha servido este tutorial, los likes se agradecen; los reblogs sirven para que mi contenido pueda llegar a más gente, así que si te has tomado la molestia de darle rb, ¡mil abrazos virtuales para ti!

[anita-codes]

— Soy Millie y me dedico a codear, llorar y a rolear. Me gustan los doramas, el anime y el purpura. Cree este blog con el motivo de compartir mis creaciones con el público y recibir cariño de su parte. Puedo ser un fantasma y una planta. No siempre me ves pero me marchitare si no me das amor. Perdón. Aquí no hay tintes grises. ¿?

Estoy desde el 2011 desperdiciando mi tiempo en este subnivel del internet, y creo que codificando por el mismo tiempo pero no fue sino hasta el 2013 que lo tome en serio.

No fue planeado pero olvide el correo de mi primera cuenta en tumblr. Trate de recuperar la cuenta pero me fue imposible, ops.

[apolocodes]

Tutorial 1: Skin básica.

Buenas querido usuario, este es un tutorial para todo aquel que no conoce absolutamente nada y recién esta iniciando en la edición de skins. Por ello es que les traigo esta semana algo sumamente sencillo. Algo que me sucedió al iniciar mi primer skin, fue preguntarme al ver la parte del css en blanco, ¿Y ahora qué?. Ooooh... ¿Cómo inicio?. Aquí lo que te daré es eso... el inicio: En mi caso, suelo primero pensar en la idea de qué quiero hacer (escuchar música, ver una película, leer un libro, cualquier cosa que te inspire sirve), para ello debo ponerme una base sobre la que trabajar, lo que leerán es como hacer una base para esa hoja en blanco.

Como algunos sabrán y otros quizás ahorita les dió curiosidad por hacer su propio skin la base se llama #wrap, (les recuerdo siempre luego de cada sección abrir una llave y al finalizar con su contenido total cerrarla { }):

 /***Foro básico también llamado wrap***/ 

#wrap { 

} 

 /***¿Qué propiedades van dentro de esto?.***/ 

* Width: xxxpx; 

Es el ancho del foro: ¿De cuánto lo queremos?. ¿Quieres que sea angosto o más ancho?. 

 Aquí pondremos primero un número que les recomiendo este entre 900px a 1000px; un poco más o un poco menos esto depende de gustos. También existe la propiedad max-width y min-width que sirven para determinar el mínimo y máximo para pantallas con distinta resolución por ejemplo. 

* Height: xxxxpx;

Largo del foro: Esto en general no lo agrego pero a veces puede resultar útil depende el diseño que tengas planeado. 

* Background: #xxxxxx; 

Color de base o imagen: Aquí podrás agregar una imagen o un color sobre el que irá el foro (no es lo mismo que la imagen de fondo). Esto determinará sí tu foro es claro u oscuro por ejemplo, una manera sencillo de hacerlo es colocarle un color hexadecimal, los invitó a probar con distintos tonos partiendo como base que: #000 es negro,  #fff es blanco, y a jugar.

* Border: xxpx solid #xxxxxx;

 Bordes: ¿Quieres que el foro tenga bordes a los costados o totalmente o nada?. Esto es totalmente opcional. Recuerda que para usarlo debes poner el tamaño del borde, el tipo y luego el color. Además puedes hacer que solamente esté en un sitio o dos agregando la palabra de ubicación usando en vez de border, border-left (para izquierda), border-right (para derecha), border-top (para arriba) y border-bottom (para abajo).

* Margin: xxpx;

 Margen: ¿Deseas dejar un espacio para colocar widgets o una imagen de fondo?, Incluso porque quieres que la barra de navegación se vea arriba.

Entonces un ejemplo de base sería así:

/*Cuerpo del Foro*/ #wrap { width: 1000px; margin-top: 10px; background: #151515; border: 30px solid #000; }

Espero no haberlos mareado mucho y que se entendiera, hay más opciones de cosas que se pueden poner aquí, pero no los quería cansar con un tutorial interminable. ¡Tengan bonito día y ojala les salga!. 

[millie-codes]

¡Me presento, Millie-desu!

No quería parecer tan otaca pero tal parece que me es imposible negar esa pequeña gran parte de mi, lo siento.

¡Es un placer conocerlos! Soy Millie. Tengo 19 años y mi pasatiempo es enamorarme de niños y diseñar [códigos]. Una locura, ¿no? podría estar recorriendo el mundo con un vaso de ron en mis manos pero he pensado que permanecer en pijamas sin bañarme y fritar mis neuronas en el codeo era un mejor destino, si señor.

Jajaja broma, ¡sigamos con mi carta de presentación!

Este año he logrado estar mas activa en los foros y el diseño en general. De hecho, he codeado tres skins en lo que va de año y me hace muy feliz ❤ pronto lo verán por mi tumblr.

¿Saben? Hace mucho quería abrir mi propio tumblr donde pudiera compartir mis cosos pero como no entiendo una mierda en esta plataforma no me anime hasta que vi un tutorial de cómo instalar themes. Bendito sea los extraños algoritmos de yutú, jeje.

¿Qué? ¿Desde hace cuando estoy desperdiciando mi vida en esto del diseño y el bajo mundo del internet? dese el 2011 estoy roleando y ese mismo año descargué photoshop para hacer mis propios avatares en altos niveles de saturación que pudieran hacer sangrar a un ciego porque era la moda. Y hmm, creo que en códigos no fue sino hasta el 2013 y desde entonces he estado en la jugada.

En fin, ¿qué más les cuento? ¡ah si! a lo que me dedicaré con este tumblr que creo que esta mas que obvio pero para los que todavía no entendieron...

Tengo un buen tiempo roleando en foros y he diseñado tantas tablillas como skins para personajes/páginas que no pudieron ser/no lo dejaron ser, y conociéndome pues dudo mucho que tenga planes para usarlos porque siempre me gusta hacer las cosas desde 0 XD y es pooooor eso que voy a ofrecerlos gratuitamente. Pronto serán publicados.

—  ¿Gratuito? ¿todo? —  ¡si y no! 

1. Si: Hay tablillas como skins muy viejitos con las tendencias del pasado que me da muchísima pereza actualizarlas con la onda de ahora. Mi plan es solo mejorar su estructuración que ya sé como va todo el meollo en el asunto jejej (antes por cada atributo que quería poner, les abría un div a cada uno... bien bobis). Suena interesante para ser un proyecto a largo plazo... como sea, ¡gratis! lo único que pediría es que mantengas los créditos que me ayudarías muuuuucho haciéndolo.

¡Otra cosa! Con esas tablillas y skins específicas les daré pie a que lo utilicen como base para sus diseños porque de todas formas no son muy elaboradas. Estaré ansiosa de ver sus resultados. ^^

2. No: Llevan trabajo y días de paciencia como todo en esta vida. No soy una super pro y mi carrera tampoco se relaciona a esto. Yo ser una terrícola con mucho tiempo libre que pensó: “¿y por qué no hago dinero haciendo lo que más me gusta ya que mis padres no me permitieron estudiar lo que yo quería?” y solo me deje llevar por la codicia, ahre.

Broma, no se lo tomen a mal pero si es un trabajón, al menos para mí pero es una sensación bonita que la gente te pague por algo que tú haces.

...

¡Oh mierda! Me extendí demasiado pero gracias por leer hasta acá. Será un placer compartir todo mi trabajo y que a usted le guste, cuenta conmigo para adornar sus post o página de la manera mas bonitica.

¡Ten un buen viaje, extraño!

[pyritewolf]

¡hola! muchas gracias por contestar. no sé bien cómo explicar el tutorial, lol. pero era sobre skins, y creo que eran un montón de spoilers dentro de spoilers, o había mucha barrita en el tema. porque ibas colocando cómo se llaman las partes del foro en css y así uno sabía qué etiqueta tenía que editar para hacer equis o ye cosa. era como wrap, logo-desc, logo-desc img, y por ahí seguían hasta llegar al pie del foro. espero que eso ayude, disculpa molestias. feliz de escuchar que estás bien <3

Genial! Con eso ya lo pude encontrar... creo. Si no es este, avisame y buscamos el que corresponda :) Gracias por refrescarme la memoria - no tenía el más mínimo registro de haber hecho esto jajaja

Perdón que lo dejo en screenshots, pero se me iría la vida pasando esto a formato tumblr (todavía no puedo creer que lo haya hecho originalmente jaja). Espero que ayude! Suerte con tus proyectos, anon!

[xariacodes]

New forum row for my site that changes with membergroup of last poster. Used a challenge on Coding Camp as an excuse to make it. ^.^

[xariacodes]

Started coding a totally new skin. This will more than likely be for a multi-sale once done.