Tuto crear foro basico de 0

Sin mas dilación el tuto.

Cositas previas

Antes que nada es importante tener clara la idea de que va a ir el foro y mas o menos sus secciones. A mi me va muy bien hacerme listas de lo que quiero y espero. Otra cosa que va genial es hacer un esquema, ya sea con algún programa rollo Photoshop o a boli o lapiz. Además en caso de necesitar ayuda siempre puedes enseñar que es lo que quieres. Es altamente recomendable sinó corres el riesgo de ir cambiando de idea conforme te vayan gustando cosas que veas por ahí y hay cosillas que es mejor tener claras (por ejemplo, encuentro esencial que decidas desde el principio si usarás o no widgets porque el foro por tema de medidas variará y podria descuadrarse si lo creas sin widgets y luego te da por ponerlos).

Para ello puedes echar un vistazo a foros de internet. Así vas viendo que estilo de cada cosa te agrada mas y como puedes implementarlo. Ojo, no plagies! Solo se trata de tomar ideas y luego adaptarlas a tu foro creandolas tu. Es importante que tengas claro el esquema principal. Los detalles como colores, imagenes y eso pueden cambairse luego pero es mejor tener idea de por ejemplo la distribución.

Una vez eso lo tengamos claro vamos a crear el foro en https://www.foroactivo.com/ .

Ya con el foro creado comenzamos el trasteo.

Trasteo básico del PA antes de comenzar a editar código

*PA es el Panel de Administración. El enlace suele estar abajo del todo del foro creado.

Yo lo primero que hago es ir al PA -Visualización-Temas-Eleguir un tema. Ahí en la pestaña que pone versión le doy a phpBB3. Es donde mejor me manejo. Me fijo que esté marcada la casilla de "Estilo por defecto de la versión".

Luego en PA-Visualicación-Gestión de las imagenes-Avanzado voy a borrar muchas de las imagenes para que no me molesten a la hora de trastear. En mi caso borro todas las de General/Navegación.

Iconos del foro. Estas las borro solo si en el foro no planeo usar de entrada los tipicos iconitos que cambian si en el foro hay nuevos mensajes o cosas así. Ejemplo:



Imagen sacada dehttp://thestorynevertold.foroactivo.com/ que encontré por internet.

Esas imagenes son las que salen al lado de los foros:



Es importante saber de antemanos si querremos ponerlas o no porque en caso de quererlas deberemos dejar un espacio cuando creemos el estilo de los foros. Para que no los hagamos muy largos y luego se deformen al añadirlas.

Las de tema podemos borrarlas también. Lo que es la disposición de los temas se verá mas adelante.

Los Mini iconos yo los borro también.

Los Botones yo recomiendo no borrarlos de entrada. A veces necesitamos crear un tema para probar algo y es mejor tener los botones. Luego ya pondremos botones al gusto.

Luego en PA-Visualicación-Colores yo suelo borrar todos los de "Colores de fondo", "Contornos" y "Colores de la barra desenfilada". Los otros los necesitamos para ver las letras. Aunque sean feos de momento nos sirven tal cual. Ya luego veremos cuales tocar y cuales no.

En caso de querer widgets recomiendo activarlos ya en PA-Modulos-Gestión de los Widgets del foro. Ahí los activamos para ya ir acomodando el foro con el espacio que ocuparán. En mi caso usaré tablón así que nada.

Luego en PA-General-Foro-Configuración tenemos algunas cosillas que trastear. El nombre y la descripción son obligatorias pero luego haremos que no salgan ni molesten a través de CSS.

El favicon es la imagen super pequeñita que sale en la pestaña del navegador, donde el titulo de nuestro foro. Podeis ponerlo ahora, mas tarde o no poner ninguno. Yo voy a coger este icon que hice de Last of US:



Y lo convertiré en formato .ico Podemos usar algún sitio como este: https://imagen.online-convert.com/es/convertir-a-ico O usar algún editor de imagenes. Recordad ponerlo a 16x16 y guardarlo en formato.ico.

Para subirlo hay sitios que no te dejan. Por ejemplo el hosting por defecto de Foroactivo no deja. Imgur tampoco. Yo he usado este: http://www.iconj.com/favicon_hosting.php y ahí subes el ico creado antes y en Host it te sale el enlace. Lo copias (si no lo ves bien como a mi que se me cortaba la barra, lo seleccionas y lo copias en el bloc de notas y ya cojes el enlace) y lo pegas en el PA-General-Foro-Configuración-Favicon del foro. Bajas abajo hasta que veas el botoncito verde de Registrar (abajo de las opciones) y ya está.

Siguiendo con las opciones puedes cambiar el idioma por defecto, el formato de fecha, la zona Horaria (en mi caso me salia en no-se-donde y tuve que poner Madrid).

Disminuir el numero de anuncios publicitarios con imagenes: Francamente no he visto cambio. A veces le pongo si y a veces no.

Activar las publicidades: Mi consejo es poner Todos. Así cuando diseñas el foro ya lo haces viendo la susodicha (a menos que no tengas algun bloqueador) y no pones por ejemplo el Header debajo del espacio que foroactivo deja por defecto para la publicidad.

En fin...yo de aquí destacaria el Foro en construcción. Esto lo marcas si no quieres que nadie entre. Recuerda que para pedir ayuda igual necesitan verlo, eso si. De entrada yo lo tengo en No.

Algo mas abajo destacaria la sección Estructura de las paginas. Ahí puedes cambiar cositas de las medidas del foro. Yo por ejemplo en el que estoy haciendo lo tengo así:



Realmente luego todo se configura bien por el CSS pero si no queremos o preferimos minimizarlo podemos hacerlo por aquí. La posición del perfil es importante. Es en que lado saldrá la cajetilla donde sale el avatar y eso.

Aconsejo muchisimo poner las maximas Categorias y Foros ya de entrada. Así mientras vayas diseñando vas viendo como se ve en conjunto.

Ahora bajamos un poco a PA-Visualicación-Mensajes y Emails. Ahí en Configuración yo destaco:

-Mensajes por pagina: Esto generalmente lo trasteo mas adelante cuando ya estoy trasteando como se ven los posts.

-Siempre anunciar el 1er mensaje del tema en todas sus paginas: A mi personalmente no me gusta. Mas especialmente en los foros de rol que ha veces lia (en cambio es util para los foros de recursos, diseño y cosas así). Es lo que pone no hay mas misterio.

-Permitir. Yo tengo en Si el HTML y el BBCode. Los emojis y el bosquejo yo los tengo desactivados pero eso ya va al gusto.

Hasta llegar a Separación mensaje/firma va al gusto. Yo lo tengo todo en NO. Ahí (donde hay por defecto una linea) podeis poner un texto, linea, imagen (con sus etiquetas img) o nada de nada. Es lo que divide los mensajes de las firmas al postear.

Hasta llegar a Separar los anuncios y las notas de los mensajes yo o lo dejo para mas adelante o no toco nada de momento. En este apartado yo personalmente pongo Por una tabla. Cuando haya anuncios de esos que salen en todos los foros no se mezclarán con los temas si no que estarán separaditos.

-Activar el método WYSIWIG por defecto en los mensajes : A mi esto me gusta dejarlo en NO. Si lo activas cuando por ejemplo pongas una imagen o un enlace en vez de las etiquetas te saldrá ya directamente la imagen funcionando y el enlace. A mi me gusta montar sin verlo y ya luego previsualizar así que no lo activo.

Tipo de paleta de colores: A mi me gusta la sencilla.

  :nyann:  

Luego mostrar boton de citar, respuesta-rapida y eso ya es a gusto personal. Lo suelo tener en SI. En redimensionar imagenes yo prefiero no poner nada y ya redimensionar lo que necesite por codigos. Lo de las menciones yo personalmente lo tengo en No, el hastag igual. Eso lo veo para foros mas sociales que de rol.

Y lo de la previsualización lo tengo en si pero francamente de momento no se que es XD

En la sección Temas ya va al gusto. Yo por ejemplo de entrada tengo los colores de los titulos y las descripciones en el tema desactivadas. Lo de la modificación del argumento en No también. Solo tengo activado lo de ocultar mensajes del usuario banneado.

Ahora nos vamos a PA-Visualización- Indice-General

Ahí podemos poner si queremos activar lo de que se muestren los usuarios conectados en X horas.

En  PA-Visualización- Indice-Estructura y jerarquia escogemos la visualización que mas nos acomode. Yo personalmente siempre uso la del medio de abajo. (Separa las categorias en el indice-Medio)

Además podemos trastear algunas opciones como por ejemplo que salga el titulo del Ultimo tema en el foro (yo lo activo), mostrar los avatares de quien a escrito pequeñitos ahí donde el foro (no lo activo. Lo veo mas para foros offrol), la longitud del tema (si cuando trasteemos el estilo de foro queremos que se alargue o acorte el titulo del tema) si queremos los enlaces a los subforos (yo suelo tenerlo en si pero luego se trasteará con codigos) si quieres mostrar los moderadores (suelo tenerlo en No), las estadisticas (yo las pongo solo en el Indice) y si quieres que te indique que motores de busqueda están por aquí. A veces pongo no y a veces si.

En cabeceras y navegación suelo poner esto:



Pero generalmente esto se trastea con codigos.

Y en principio yo no trasteo ninguna opción mas así de entrada. Ya luego conforme voy necesitando.

Espero que a pesar de lo básico os parezca interesante. Ahora seguiré especificando como ando yo modificando mi foro sobre la marcha.

Después del primer tuto donde explico básicamente como trastear el PA antes de empezar a tocar el código (si te interesa pasa por aquí) ahora empezamos a trastear el forito.

Lo primero es ir a PA-Visualización-Colores-CSS Stylesheet y ya podremos empezar. Os recomiendo muy mucho tener alguna paleta de colores mas o menos ideada. Pero luego obviamente se pueden cambiar al gusto pero tardaremos menos si tenemos una idea aunque sea de los colores base.

Empezamos.

Aclaro sobretodo que soy novata y este es mi metodo que puede ser mejor o peor que muchos otros. Estoy abierta a sugerencias

Lo primero que hago es trastear el ancho del foro. Lo que es el foro en general, con su fondo y eso. En mi caso de momento tengo este codigo:

Código:

body {
        font-family: sans-serif;
 font-size: 11px;
 color: #B8B8B8;
        background-image:url('http://bp0.blogger.com/_zbAmJmYuiwE/RxkMd8VGwyI/AAAAAAAACcQ/UWFMuZTM_Hg/s1600/layer_blood1_white.jpg');
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
  }


Ahí pondremos varias cosillas. En mi caso tengo puestas las letras que saldrán (estas son provisionales, mas adelante cuando ya esté mas montado buscaré una fuente que me guste). Eso es el font-family.
El font-size es el tamaño que cuando cambie de fuente ya adptaré.
color: El color de las letras (de nuevo ya lo adaptaré mas adelante)
background-image: Aquí ponemos el enlace a la imagen que queremos de fondo. Si lo que queremos es un color, en vez de background-image se pone Background-color.
background-attachment:fixed Esto hace que cuando bajas la pagina el fondo se queda tal cual.
background-position: No tiene mucho misterio. Yo lo tengo centrado pero hay quien prefiera ponerlo a un lado o otro.
background-repeat:Yo como tengo el fondo fijo lo tengo en no-repeat. Es pues eso, para que el fondo se repita o no.

Por lo pronto no tengo nada mas.

Luego tengo este codigo para que las esquinitas blancas que a veces salen al cambiar los colores y eso de una skin, no salgan:

Código:

  span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span {
    display: none;
    }

Ahora nos vamos a la estructura en si:

Código:

#wrap {
max-width: 930px;
min-width: 930px;
padding-left: 8px;
padding-right: 8px;
margin-bottom: -25px;
}

Aquí es donde ponermos el ancho del foro (yo tengo el mismo ancho minimo y maximo. En teoria se verá así aunque las pantallas sean mas pequeñas o grandes. Lo tengo como me va bien en mi pantalla así evito que se descuadre en otras). Como veis juego con los padding y margin para ver como me gusta mas. Os recomiendo que esto lo trasteeis al gusto y vayais viendo sobre la marcha como os queda mejor.

El header es hoy en dia, una de las cosas mas visibles e visualmente importantes de un foro ya que suele ser lo primero que vemos al entrar en el. Este es mi codigo:

Código:


#logo-desc {
    background-image: url('http://via.placeholder.com/930x350');
    height: 350px;
    margin-top:45px;
}

En el tengo la imagen puesta (de momento una imagen generica) y la altura que tendrá. La altura la pongo porque si no no me sale la imagen. El margin-top lo tengo porque mi navbar personalizada es gruesa. Basicamente con eso mueves mas abajo o mas aarriba el header (el logo).

Si te sale desconfigurado porque sale el titulo del foro y la descripción se arregla así:

Titulo

PA-Visualización-Cabezeras y navegación-Anunciar el titulo del foro-No

Descripción del foro

Este se arregla con este codigo:

Código:

   #logo-desc p {
    color: transparent;
    }

Para la navbar yo segí [url=dixinmortal.vampire-legend.net/t7816-tutorial-personalizar-barra-de-navegacion-skin]ESTE[/url] magnifico tutorial. Recuerda que el punto de seguir un tutorial no es que todo salga suer igual si no aprender con la práctica y adaptarlo a lo que tu quieres. En mi caso prácticamente ese era el efecto pero no descargo mas adelante ponerle una imagen de fondo o variar las letras (cuando ya el foro esté mas completo a nivel estetico y así poder ver bien los detalles en conjunto).

El caso es que no reproduciré aquí el tutorial porque no seria legitimo así que esta parte la salto

El caso es que mi Navbar es así:



Lo que si contaré un par de cosillas acerca de los enlaces de la navbar. Para modificarlos es con este código:

Código:

a.mainmenu {

    CODE 1
    }

    a.mainmenu:hover{
    Code 2
    }

En el primero ponermos como se verá. El tipo de letra, color, tamaño, etc. Yo tengo además un padding de 13 y un margin-top de -50 para que se vean bien en la linea, además tengo el texto alineado a la izquierda. pero vamos eso ya e a gusto vuestro.

En el segundo ponemos lo que cambia al pasar el ratón. Yo por ejemplo solo tengo puesto que cambie el color pero podemos hacer que las letras se espacien, que cambie el tamaño o decoración...ya lo que queramos.

Lo siguiente que quiero poner es como quitar enlaces que nos sobren de la navbar (por ejemplo FAQ, Buscar, etc).

Código:


a.mainmenu[href="/faq"], a.mainmenu[href="/calendar"], a.mainmenu[href="/search"], a.mainmenu[href="/memberlist"], a.mainmenu[href="/groups"], a.mainmenu[href="/espacio"]{
display: none;
}

Aquí ponemos o quitamos lo que queremos que aparezca pero ojo, eso los hace invisibles pero no los quita. Recordar mover los que vayas a dejar sin que se vean al final de la lista en PA-Visualización-Cabezeras y navegación. De lo contrario os pasará como a mi que me volví loca pensando porque porras no se me quitaban los espacios aunque yo ponia otros valores en el code XD

Y para quitar esa cajetilla de Busqueda que suele salir en los foros por defecto:

Código:

#search-box {
    display: none!important;
}

El próximo apartado tardará mas porque este aun lo tengo que aprender mas y es el de personalizar los foros.

Espero que os haya sido util también ^^

http://sourcecode.foroactivo.com/t13624-como-hacer-este-tipo-de-subforos#276446


Bien para el tema de foros y categorias y eso si que aconsejo mucho tener un boceto sobre el que trabajar. Yo tengo un esquema que me he echo en PS y a partir de el trabajaré (sobre la marcha puede variar alguna cosa pero la idea mas o menos ya la tengo y así me es mas facil mirar de preguntar lo que no entiendo y demás).

El estilo que quiero lograr será este:



Primero vamos a trastera el recuadro del foro en si. Ahora sin colores de fondo ni nada no se veria bien. Yo le he puesto un fondo blanco y además para que cada categoria esté un poco separada de la anterior (como foros flotantes) le he añadido un margin. También le he puesto un borde para resaltarlos mejor. Este es mi codigo:

Código:

.forabg {
  
  margin: 30px;
  border: 4px solid #39343F;
  background-color:#ffffff;
  }

Ahora vamos con la barra donde sale el titulo de las categorias.

Primero le pongo una altura (quiero que sea anchota verticalmente hablando) y un color de fondo. Nunca lo heprobado pero imagino que si en vez de un color de fondo preferis una imagen solo hay que cambiar en el código el background-color por un background con imagen.

Código:

.forabg li.header {
    background-color: #000000;
    background-image: url('IMAGEN DEL FONDO'); [Poner o color o imagen, no los dos]
    height: 100px;
}

Este es el codigo que uso yo para mover el titulo dentro de las barras de categorias (yo lo puse hacia la derecha):

Código:

.forabg .header .dterm {
    margin-left: 400px;
    margin-top: 40px;
}

Ahora el codigo que uso para cambiar el estilo de las letras de la categoria:

Código:

.table-title, .table-title h2 {
    color: #ffffff;
    font-size: 20px;
    font-family: 'Rammetto One';
    text-align: right;
    }

Ahí pongo el color, la fuente, el tamaño, etc

Ahora para hacer que en la barra de categoria no salga esto:



Ponemos este codigo:

Código:

ul.topiclist li.header dd.topics, ul.topiclist li.header dd.posts, ul.topiclist li.header dd.lastpost {
    display: none;
}

Ahora es cuando empieza el trasteo. Yo me ceñiré en todo momento a mi etilo de foro. Para otro o tendreis que adaptar o preguntar XD Pero bueno una vez sabiendo lo basico (y especialmente que tocar y como) ya tendreis mucho ganado.

Primero para poder mover las cosas a nuestro antojo (mas o menos) y que se tome como referencia la zona del foro y no toda la pagina en si, hay que ponerle un position relative. Yo tengo este codigo. Me enseñaron que es mejor trabajar poniendo una altura minima y ya si luego queremos la quitamos.

Código:

ul.forums li.row {
position:relative;
min-height:150px;
}

Ahora vamos a trastear el codigo del titulo para dar formato al titulo de los foros. Se hace trasteando este codigo:

Código:

   a.forumtitle {
AQUI LE DAS FORMATO
    }

Por ejemplo pones el estilo de letras, el tamaño, color y eso de la fuente. El color de fondo (en mi caso de momento será negro con letras blancas)

-------------------¿Explicar border box quiza?---------------------

Ahora tenemos que cuadrar la descripción de los foros (donde mas adelante daremos forma) porque ahora en mi caso se me ha metido por debajo del titulo:



Para eso se hace con este codigo donde yo he trasteado para que se vea bien.

Código:

ul.forums li.row dd.dterm {
    padding-top: 45px;
}

Ahora para los cuadraditos donde salen los temas y mensajes si van a ser de distintos tamaños o colores o lo que sea se trastean por separado. En mi caso como son casi iguales les doy las propiedades como color, tamaño de fuente y demás en un codigo juntos y ya luego si he de mover alguno lo hago a parte.

Código:

ul.forums li.row dd.topics, ul.forums li.row dd.posts {
 AQUI LAS PROPIEDADES BASICAS DE LO DOS INCLUIDA LA UBICACIÓN
}
ul.forums li.row dd.posts {
AQUI ESECIFICO LA UBICACIÓN DEL CUADRADITO DE MENSAJES PARA QUE NO SE SUPERPONGA CON EL DE TEMAS (dd.topics). En el caso del otro en el codigo general de ambos hay un right de 200
}

Y lo mismo para el cuadrado donde va el titulo y autor del ultimo tema y eso.

Código:

   ul.topiclist.forums dd.lastpost {
FONDO, COLOR LETRAS, POSICIÓN, TAMAÑO, etc
    }

-------------------CENTRAR AUTOR-----------------------

Ahora vamos a darle las propiedades a los subforos. Lo ideal es tener ya especificado como queremos esquematizarlos. Por ejemplo yo tengo un foro donde irá una imagen grande. otro en el que irá un texto y links (por lo que digamos hay dos partes la de texto y la de enlaces) ¿Y porque os digo lo de esquematizar?

Porque el esqueleto sin propiedades va en PA-General-Categorias y foros

Ahí clicamos sobre el foro en el que haremos la prueba y ahí en Modificar bajamos un poquito hasta el gran recuadro de Descripción y montamos el esquema poniendo los nombres que le daremos luego en el css a las cosas.