¡Hola, hola! Me paso por aquí para hacer una pregunta.

Pasa que a mí se me da bien hacer códigos html/css. Digamos que domino decentemente la situación, quisiera empezar a realizar skins. Pero no me gustaría agarrar uno de hitskin y modificarlo, sino literalmente hacerlo desde 0, con el template por defecto de phbb3. ¿Quisiera saber es cómo empezar o por dónde? He visto los tutos de aquí, pero sinceramente no sé como iniciar, ni sé para qué sirve el template de view topic body y qué hace y si que tengo conocimiento nulo en el Javascript, y me gustaría como empaparme un poquito del tema y no sé  cómo, les juro que he buscado en foroactivo y todo, pero incluso si he empezado tiro la toalla porque no me hallo al no saber lo básico. Y realmente, realmente me gustaría poder hacer mi propio skin para un foro de rol que estoy planeando.

¡Gracias por leer!

¡Hola! Te daré un consejo y te explico un poco.

Antes que nada te quiero avisar que yo también se lo básico de códigos y no soy profesional. Mi conocimiento en Java Script es igual que el tuyo así que ahí no te puedo ayudar, te recomendaría tutoriales de YT para principiantes en eso y pues, aprendas la teoría como todo.

Yo igual comencé a hacer los skins con el tema azul clásico de FA, por que creo que es mejor, ya que si usas uno hecho, al momento de personalizarlo te vas a topar con que los colores ya están modificados y realmente es un poco molesto tener que quitar color por color o tratar de combinarlos cuando aún no sabes lo que quieres. En ocasiones me ha pasado que tardo mucho en arreglar algo del skin y no se modifica, solo para después de quince minutos darme cuenta que hay otro código que lo esta modificando por que venía en el skin, es mejor evitarse esas molestias. (?)  

¿Cómo empezar?

Spoiler:

Consejos en general:

Spoiler:

En cuanto al template, no sé si es este de manera especifica el que no entiendes o si son todos en general. Te explico para que sirve el que mencionaste nada más. En la parte de consejos hay como tres temas que te hablan de varios templates, igual, en caso de que necesites ayuda con otro pues solo pregunta.

Template

Spoiler:

Sobre los Java Script. Usualmente no necesitas muchos para editar el diseño de un foro, si quieres que se salga de lo convencional como que haya diferente diseño de subforo en cada subforo, tener un avatar en la barra de navegación o moverla de manera lateral, etc, entonces si los necesitaras. Usualmente yo uso tres, para el perfil simple, para las estadísticas, y para el perfil en los post. Los puedes encontrar por tumblr o por FA.

Creo que como último consejo es que no te rindas. Cuando empecé me rendí muchas veces por que no entendía por que no me salían ciertas cosas o por que simplemente no me gustaban mis diseños y muchas veces la flojera me ganaba x1000, pero después de muchos intentos, de deshacer skins y en ocasiones simplemente reiniciar todo, le vas agarrando la maña a esto (?)

En fin, este es mi consejo como alguien que apenas acaba de hacer un skin para otro foro, lo cual no pensé que iba a hacer en mi vida. Es un hobby muy bonito y si en algún momento necesitas dinero también puedes vender skin. Espero te haya sido de ayuda.

¡Muchísimas gracias, Nina! No sabes lo maravilloso que fue encontrar tu mensaje y el tiempo que tomaste para explicar tu experiencia, así como instruirme. Has sido un ángel por completo. Voy a empezar a mirar lo que dices, de veras, te estoy enteramente agradecida. Una cosita más, ¿cómo es eso de que mejor hacerlo en codepen? Es decir, tipo un hoja de html y el css ¿? La verdad no he usado sino una vez la plataforma y no sé bien cómo sería en ese caso, pero mil gracias por todos tus consejos, me sirven un buen, era esto lo que estaba ansiando alguien que me explicara para que servían las cositas. tysm

¡Hola Lalisa!  

Quizás para empezar a montar un skin te sirvan algunos de estos temas de conocimiento general sobre HTML y sobre Foroactivo. Si llegas a tener alguna duda hazmelo saber y con gusto te ayudaré en lo que te atores.

1. Terminología HTML (1)
2. Terminología HTML (2)
3. Introducción a Tablas (HTML)
4. Terminología de Foroactivo
5. Templates Foroactivo (1)
6. Templates Foroactivo (2)
7. Hacer un Skin en Foroactivo (Video)

¡Muchas gracias, Roshio! Ya estoy mirando pasito a pasito todo. Tengo una duda que no sé si dejar aquí o enviarla por MP, me gustaría reemplazar el texto del navbar por iconos, pero no sé cómo reemplazarlo. Sé como darle estilos, pero no el cambio. TT

¡Hi, Lisa! Me alegra que te haya servido mi explicación. La verdad es que entiendo lo que es estar perdida en el mundo del diseño y querer aprender de alguna manera, sobretodo por que FA no es tan fácil de manejar.

Con "hacer todo en codepen" me refiero a que realices el diseño de tu foro en dicha plataforma. Literalmente, haz tus subforos ahí mismo, tus estadísticas, tu perfil de post, como ya sabes, en una parte el html y en otra el css, después de todo lo puedes, literalmente, copiar y pegar en la hoja de estilos y en los templates sin problema alguno. Roshio te paso unos temas que son importantes para que comprendas la lógica de los códigos, sobretodo el como funcionan en FA.

Hacerlo en codepen te sirve para practicar y dejes volar tu imaginación. FA tiene un modelo de subforos muy estándar y básico, y muchos se guían por ese orden para hacer sus subforos y a mi parecer, resulta un poco aburrido a la larga.

Codepen ayuda mucho ya que ahí puedes hacer y deshacer sin temor a que se rompa nada en el foro. Te voy a ilustrar (?) con un ejemplito.

Esto son subforos que hice por completo en codepen:

https://images2.imgbox.com/1d/aa/DgQeNmCn_o.png

Y esto son los mismos subforos ya en la plataforma de foroactivo, adaptados a los templates correspondientes:

https://images2.imgbox.com/2f/26/yOiiRnDk_o.png

Codepen es una alternativa, aunque puedes usar otro programa si quieres. Te lo recomiendo que empieces haciendo todo ahí aunque se te haga díficil o cuando pases las cosas tengas que volver a borrar el template varias veces, con el tiempo, te va resultar más fácil hacer el diseño de un foro en general, y cuando lo pases al foro no tendrás que editar casi nada.

En cuanto a tu duda, creo que este tutorial te puede servir:

https://dixinmortal.catsboard.com/t7749-js-y-los-elementos-parte-i

Lalisa Barnes escribió:¡Muchas gracias, Roshio! Ya estoy mirando pasito a pasito todo. Tengo una duda que no sé si dejar aquí o enviarla por MP, me gustaría reemplazar el texto del navbar por iconos, pero no sé cómo reemplazarlo. Sé como darle estilos, pero no el cambio. TT

Exactamente como dijo Nina anteriormente, codepen es una gran herramienta para apoyarte y practicar mucho antes de meterle mano a tu foro tal cual, puedes ahi ver como va armandose tu codigo y después solo ir mudandolo y adaptandolo en foroactivo, todo es cosa de practica y prueba y error. ¡No te asustes y ánimo!

Sí quieres dejar tu duda aquí con gusto te ayudaré.

PD. Recomiendo x2 el tema que dejo LadySoup para el navbar.

Código:

http://dixinmortal.catsboard.com/t7749-js-y-los-elementos-parte-i#111076

GongNina escribió:Esto son subforos que hice por completo en codepen:

https://images2.imgbox.com/1d/aa/DgQeNmCn_o.png

Y esto son los mismos subforos ya en la plataforma de foroactivo, adaptados a los templates correspondientes:

https://images2.imgbox.com/2f/26/yOiiRnDk_o.png

¡Por cierto que belleza de subforos! No podia irme sin comentarlo

Para verlo, necesitaré más mensajes, ¡pero mil gracias! Por ahora, les explico que estoy haciendo, inicié a hacer el mío pero me dio cosi todavía me da mucha cosa intentarlo (no es mentirita, de veras). Así que he obtenido un skin gratis que me pareció muy chulo, TT lo sé, no me odien (?) El punto es que he estado editándolo, viendo poquito a poquito como todo funciona y he pasado por duras y maduras, porque me pasó justo lo que Mina dijo, se borró todo o.O cuando había hecho un avance y me tomó de nuevo el template por defecto. Sé que igual no es un gran paso para lo que me dijeron por aquí, que lo intentara por mí misma, pero ahí voy haciéndolo >-<' Igual me gusta como ha quedado con el coso base, no son grandes los cambios que he llegado a hacerle al skin base, pero se ve bonito. Adjunto en hide para que chequen si pueden y ojalá no solo yo pueda verlo O.O Eso por ahora, en lo que me empapo más del tema, quizá en un futurito cercano con más entendimiento de los templates y todo, vaya creando una remodelación para el forillo.

POR CIERTO, MINA QUE BELLEZA DE SUBFOROOOOOS. ME ENCANTAN.       ¡¡¡¡Puro arteeeeee!!!!

Adjunto el link del forito. He usado recursos de varios sitios para ir estructurándolo, aunque me siento proud porque las leyendas de grupo son mías hfjdkd xDDDD no viene al caso, pero gracias por pasarse por aquí, darme ánimos y sobre todo brindar sus conocimientos.



¡Ay, unas cosillas más! Perdón si se encuentra ya en los tutos, voy a mirar luego de haber dejado este mensaje, hay un tuto de como hacer los perfiles simples (creo que se llaman así los que al darle click al nombre del personaje te lleva a su "carta de presentación)?
Lo segundito, estaba intentado modificar lo de citar y todo eso por iconos y con html, pero no sé qué pasaba que no me dejaba y al final lo he cambiado por texto que si me lo leía y ya han quedado, pero me gustaría hacer lo mismo con el de new post y respuesta y no sé si se pueda también reemplazar esas dos imágenes por texto con un javascript, pasa que no sé cuál es el nombre que indica que reemplace esa imagen, como sucede como el de quote y eso, no sé cuál es

Ay, siento seguir andando con tantas molestias «/3 besitos miles a ambas y gracias por la paciencia.  

Jaja, no te preocupes. La verdad que hacer un skin de cero es bastante trabajo y si tu conocimiento todavía es limitado, puedes atrasar muchísimo tu idea para el foro de rol. Así que no te odiamos, seguramente (?) Ya igual podrás en otro foro practicar sin comprometer tu foro de rol, que una vez tuve que pasar por segunda vez toda mi información (ambientación, grupos, etc) a otro foro después de que en el primero hice algo y literalmente rompí el sistema lol.

Yep, FA siempre hace lo que quiere, igual con el tiempo entre más diseñes más te acostumbrarás a hacer documentos para guardar, o hasta en codepen puedes guardar el template completo ahí, no le pasa nada y al final lo puedes sacar cuentas veces quieras.  

Y muchas gracias a las dos por lo de los subforos, usualmente nunca abro los foros que diseño y me hace sentir happy que quienes vean mis diseños se les parezca bonito.  

¡Y con algo se empieza! No te preocupes por ello, que hayas hecho algo tuyo es importante, así como dices, tal vez en un futuro el skin que veas ahí será de tu propiedad.

Para hacer un perfil simple esta este tutorial, pero es avanzado:

https://dixinmortal.catsboard.com/t8839-tutorial-modificar-la-pagina-del-perfil#120003

Y en las dudas, esta algo referente a lo que puedes realizar en el perfil:

https://dixinmortal.catsboard.com/t9060-duda-resuelto-mover-campos-de-perfil-en-el-perfil-personalizado

Por último, los iconos de quote, edición, eliminar e IP no sé como cambiarlos por iconos en html, solo se moverlos de lugar y que tengan imágenes. Tampoco he visto un tutorial así que creo que eso te lo puede responder otra persona.

Lo de editar los botones de nueva respuesta y nuevo tema, etc, lo hago con css, pero tendrías que tomar en cuenta lo siguiente en el modo en que yo lo hago:

+ En este template, hay aproximadamente cuatro botones. Dos arriba, dos abajo. Desde mi punto de vista, no creo que haga falta que se repitan. Aquí también esta el botón de cerrado, pero ese usualmente yo no lo pongo por que no veo utilidad si el tema en si no te deja responder de igual forma.

En el template viewtopic_body, te encontrarás con la siguiente línea:

Código:

<div class="buttons">

 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>
 <!-- END switch_user_authpost -->

 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>

Estos son los dos botones de manera exacta. El primero es para nuevo tema y el segundo para nueva respuesta. Yo lo que hago, es que quito la imagen (img) y pongo una clase al enlace (a href="") y pongo el texto en el enlace, de esta manera.

Código:

<!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="boton-tema">Respuesta</a>
 <!-- END switch_user_authpost -->

A la clase de .boton-tema, pues como todo, solo pongo las propiedades que quiero, el color, la font, etc. Así es como lo suelo hacer y este es uno de mis resultados:

https://images2.imgbox.com/d7/44/je9h4iqo_o.png

En viewforum_body también están dos botones así que igual tendrías que editar ese template. Puedes poner diferentes clases a cada botón para que tengan diferentes colores o adornos. Todo se puede hacer con Java Script, así que tal vez te den la versión más pro (?) para que también pueda cambiar a cerrado o más fácil, cosas así. Y siempre es una alegría atender a quien necesite ayuda, aquí todos siempre aprendemos algo nuevo.

¡Gracias, Nina! Aunque he encontrado un javascript para hacer el reemplazo que salió más rápido y gracias por el tuto del perfil, <3 paso por aquí con un nuevo dolor de cabeza (?)

Bueno estoy en eso de modificar la skin base y uhm >---<' en los mensajes privados el avatar sale cortado a la mitad, no pretendo que quede en la caja de perfil, pero que no se vea así y el cosito de arriba todo descolocado y no sé en qué template o de qué forma arreglarlo, adicionalmente, no se ven los iconos de bandeja de entrada, elementos guardados etc, a pesar de que no eliminé esas imágenes de la gestión de iconos, pero no se ven y no sé si sea que el css los atrofie o algo, como no puedo ingresar al skin de prueba para verificar si ya viene así pues :c ando medio desesperada uwu

EDITO: Para decir que, descubrí el problema en el css por defecto del skin, tenía un display: none. But aún me falta lo de la barrita superior fea, y lo del avi :corazon:

EDITO 2: Descubrí que la clase usada es h3 dentro del postbody, la cosa es que trato de modificarla en el css y no me da, probé de todas maneras ver si estaba en lo correcto cambiándola con el inspector para previsualizar y en efecto se cambiaba allí con styles, pero a la hora de hacerlo en el css no puedo hacer el cambio del título y tampoco sé mover el avatar  



EDITO 3: Ya logré básicamente todo excepto el maldito avi. y cuando intento acomodarlo con el class de post profile, automáticamente todo lo demás se destruye de nuevo.

Por ahora ha quedado así:

Nueva capturita:

Quiero acomodar ese avi más abajito y hacia la izquierda pero nada me da.

GRACIAS IGUAL, LAS LOVEO.

Lalisa Barnes escribió:EDITO: Para decir que, descubrí el problema en el css por defecto del skin, tenía un display: none. But aún me falta lo de la barrita superior fea, y lo del avi :corazon:

EDITO 2: Descubrí que la clase usada es h3 dentro del postbody, la cosa es que trato de modificarla en el css y no me da, probé de todas maneras ver si estaba en lo correcto cambiándola con el inspector para previsualizar y en efecto se cambiaba allí con styles, pero a la hora de hacerlo en el css no puedo hacer el cambio del título y tampoco sé mover el avatar  



EDITO 3: Ya logré básicamente todo excepto el maldito avi.  y cuando intento acomodarlo con el class de post profile, automáticamente todo lo demás se destruye de nuevo.

Por ahora ha quedado así:

Nueva capturita:

Quiero acomodar ese avi más abajito y hacia la izquierda pero nada me da.

GRACIAS IGUAL, LAS LOVEO.

¡Hola, Lalisa!

Estoy en proceso de hacer un tutorial sobre como reemplazar botones de imagen por texto.
En cuanto tenga un momento libre del trabajo, entonces me pondré manos a la obra!!

En cuanto a la segunda parte lo de editar la página de los mensajes privados, todo eso lo tienes que editar desde el template.

Plantillas > Escribir un mensaje & Mensajes Privados

Según la parte que quieras editar es el template que tienes que abrir:
posting_body - Página de envíos de mensajes (cuando escribes un mensaje ya sea post o MP)
privmsgs_body - Lista de mensajes privados (el listado que te aparece al entrar a la bandeja de MP)
privmsgs_read_body - Anuncio de un mensaje privado (vista de la pagina al abrir un MP)

Igual anotaré todas estas duditas para próximos tutoriales

¡Muchísimas gracias, Roshio por todo! Ya voy a mirar los templates para acomodar el avi, que es lo único que me raya de la página.

Besitos miles.

Edito: No sé qué hacer. Muevo cositas pero no funciona, la verdad ni siquiera quiero que quede la caja de perfil de los posts, sino que lo único que quiero es que el avi no se vea cortado y no lo consigo.  Lloro.

Edito 2: Lo logré, no se ve el nombre en la caja, pero al menos el avatar no queda cortado, así que no voy a pelear más con los templates.

Capturita final:

Esto si que es hard work.