Web con la apariencia de la plantilla de mi foro

chimitox · #1

Quisiera cambiar mi web, y darle la misma apariencia que tengo en mi foro. Uso la plantilla AEROBLUE.
¿Hay algun amanera de hacerlo? ¿Algun programa o algo?

Muchas gracias!

angelismo · #2

Te puede servir el phpbbweb de leviatan o este guia
http://www.phpbb-es.com/foro/guias-phpb ... 27515.html

leviatan21 · #3

angelismo escribió:Te puede servir el phpbbweb de leviatan o este guia
http://www.phpbb-es.com/foro/guias-phpb ... 27515.html

No le servirá porque phpBB Web no tiene compatibilidad con esa plantilla

chimitox · #4

Si no me equivoco, la guia que me pones, es para integrar el foro en la web, pero yo lo que quiero es tener una web que sea fisicamente ygual que el foro, donde yo ponga mis textos y demas, y luego aparte el foro, tal como lo tengo ahora.

Leviatan21, si no me sirve eso pro que no es compatible, ¿Como lo podria hacer? Estoy intentando hacerlo a mano, con el dreamweaver, pero hay cosas que no me salen bien, como las tablas o mil cosas. Quisiera que en el logo de l foro, done estan los botones de buscar, logearte y demas, sea igual en la web pero los botones fueran los de inicio, contacto, patrocinadores.... No se si me explico.

chimitox · #5

¿Alguien mas sabe algo que me pueda ayudar?

javiexin · #6

Quizá este mod te ayude: http://www.phpbb-es.com/foro/mods-desar ... 28463.html
Saludos,
-javiexin

leviatan21 · #7

javiexin escribió:Quizá este mod te ayude: http://www.phpbb-es.com/foro/mods-desar ... 28463.html
Saludos,
-javiexin

Otra vez aclaro :

No le servirá porque phpBB Web no tiene compatibilidad con esa plantilla

Elpingo · #8

Me parece que lo que tu quieres es lo que yo hice en mi sitio, ingresa a www.crakinet.com y verás el portal o index del sitio luego ingresa al foro en Crakinet! Forum desde el menú, si es esto lo que quieres te puedo decir como hacerlo.
Tambien quisiera saber si tienes algun conocimiento en HTML, CSS, etc. por que me simplificaria la explicación.

chimitox · #9

Exacto!! eso es lo que quiero.
De momento me la estoy fabricando con photoshop y luego me la llevo a dreamweaver y me queda algo asi:
Imagen

Lo malo que me vuelvo loco con los sectores en dreamweaver por que aveces se me descuadran y no se por que unos si y otros no.

Conocimientos de HTML, CSS, etc. nada, bueno lo que he ido aprendiendo yo solo con el foro y los mods, pero nada o casi nada.

Elpingo · #10

Bueno Ckimitox empezemos!

Segun me comentas tienes un conocimiento muy básico sobre HTML, entonces te explico lo siguiente que supongo lo sabrás, el estilo del foro está programado en CSS, los archivos están en: foro/styles/tu_estilo/theme/archivos.css, en el caso de tu plantilla resulta facil todo esto por que tienes un solo archivo css (stylesheet.css) estos archivos se los llama entre las etiquetas <head></head> de la siguiente manera: <link rel="stylesheet" href="ruta_al_archivo/stylesheet.css" type="text/css" /> en el caso de phpBB las etiquetas <head> están el overall_header.html.

Entonces si queremos un portal con el mismo estilo del foro hacemos lo siguiente:
1- Copias el directorio theme de tu estilo y lo pegas en la raiz de tu sitio, en la mayoria de los casos es: public_html/

2- Creamos un archivo llamado index.php y entre las etiquetas <head> llamamos al archivo css, quedaria asi: <link rel="stylesheet" href="theme/stylesheet.css" type="text/css" /> (Nota: Para hacerlo más fácil abres la página principal del foro y con el clic derecho ves el código fuente, otra vez clic derecho seleccionas todo y copiar, luego pegas todo el código en el archivo index.php)
Si te fijas en el código fuente de tu foro el archivo stylesheet.css está llamado asi: <link rel="stylesheet" href="./style.php?id=3&lang=en&sid=758f5c091adc2b539a8f09b1335bc8a1" type="text/css" /> modifica la ruta como explique anteriormente.

3- Ahora necesitamos cambiar las rutas de llamadas a los archivos por que phpBB utiliza la función include y el manejo de URL en PHP.
Abres el archivo stylesheet.css en Dreamweaver y modificas las URL de las imágenes. Si te fijas verás que las imágenes están llamadas asi: ./images/bg.gif hay que quitarles el ./ (punto y la barra).
Para hacerlo rápido en Dreamweaver seleccionas el punto y la barra lo copias y estando abierto el archivo presionas Ctrl + F y pegas en Buscar el ./ donde dice 'Reemplazar' lo dejas en blanco y pulsas en "Reemplazar todo".

4- Ahora hay que hacer lo mismo en el archivo index.php, si pegaste todo el código fuente del foro en el index.php, verás que las imágenes están llamadas con la siguiente ruta: ./styles/Aeroblue/theme/images/tm.png, hay que quitarles ./styles/AeroBlue/ por que ya copiamos el directorio theme a la raiz del sitio entonces llamamos a la imagen theme/images/tm.png

5- Hasta aqui estaria lo básico y ya deberias ver el estilo de tu foro en el index.php - Ahora lo que te queda saber es el código que determina los bloques o secciones del diseño de tu plantilla, en tu caso la plantilla AeroBlue está basada en Subsilver por lo que resulta más fácil por que está diseñada en tablas <table>,
me refiero a bloque o sección a esto:

Imagen

El código HTML que muestra esta sección o bloque es: (A este código ya le elimine las celdas que consideraba están de más y tambien tiene corregido las rutas URL de las imágenes, puedes utilizarlo para probar)

Código: Seleccionar todo

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="18" class="tl"></td>
    <td height="18" style="background:url('theme/images/tm.png');"></td>
    <td width="18" class="tr"></td>

  </tr>
  <tr>
    <td width="18" class="ml"></td>
    <td>


    	<table width="100%" cellspacing="0">
		<tr>
			<td class="cat" align="left" height="24"><h4>Bloque 1</h4></td>

            <td class="cat" width="14" height="24"><a onclick="$('#expand1').slideToggle('fast')"><img src="theme/images/expand.gif" width="17" height="16" alt="" /></a></td>
		</tr>
		</table>
        <div id="expand1">
		<table class="forums" cellspacing="0" width="100%">
		<tr>
			<td class="row3h" colspan="2" width="70%">&nbsp;Subtitulo</td>
			<td class="row3h" align="center" width="20%">&nbsp;&nbsp;</td>

			<td class="row3h" align="center" width="20%">&nbsp;&nbsp;</td>
			<td class="row3h" align="center" width="20%">&nbsp;&nbsp;</td>
		</tr>
	
		<tr>
		  <td colspan="5"  class="forumrow"><p class="forumrow">Texto <p class="forumrow"> para texto mas pequeño y los enlaces tienes mas abajo los ejemplos</p><br />
          <p class="gensmall">Texto pequeño (class="gensmall")</p>
          <a class="forumlink" href="#">Texto enlace (Links) (class="forumlink")</a>
		  </tr>
		
		</table>
        </div>

</td>
    <td width="18" class="mr"></td>
  </tr>

  <tr>
    <td width="18" height="18" class="bl"></td>
    <td height="18" style="background:url('theme/images/bm.png');"></td>
    <td width="18" height="18" class="br"></td>
  </tr>
</table>

6- Ahora bien, en el archivo index.php eliminas todas las tablas y creas una nueva tabla con las columnas y filas que necesites, dentro de las celdas pegas el código que muestra la sección. Listo! todo lo que queda es tu imáginación para añadir funciones, links, etc...

¿Por que copiar el directorio theme?

En primer lugar por lo que explico más arriba con respecto al uso de las URL en phpBB y en segundo lugar por que podemos modificar algunos estilos y agregar otros nuevos sin modificar el foro.
Nota: Dentro del directorio theme tienes la carpeta imageset, la carpeta template y el archivo style.cfg esto lo puedes eliminar en el directorio theme que copiaste a la raiz de tu sitio.

Realize las pruebas y en la forma que te explico queda así:

Imagen

Doy todas las explicaciones para otros usuarios que puedan tener la misma duda y también por que no todos tienen la misma plantilla,

pero ya que resultó bastante sencilla la plantilla AeroBlue te paso los archivos para que los subas directamente.

Index.rar: Archivos para crear el index con el mismo estilo AeroBlue; (353.54 KiB) Descargado 161 veces

Espero haberme explicado y perdón si se hizo muy largo.

Saludos!!!

chimitox · #11

MUCHISIMAS GRACIAS!!!! Elpingo

Me lo he leido, y entiendo lo que quieres decir.
He probado el .rar que me dejas aki y es exactamente lo que quiero tio, de verdad, mil mil gracias eres un crack.

Cuando tenga tiempo, miro de hacerlo yo mismo y trastear, que es como mas me gusta aprender, toqueteando y toqueteando.

Una vez mas MIL GRACIAS!!

chimitox · #12

Bueno pues ya tengo la web hecha.
Si queréis verla ya sabéis:

www.mundopiranha.com

Muchas gracias otra vez elpingo

Elpingo · #13

chimitox escribió:Bueno pues ya tengo la web hecha.
Si queréis verla ya sabéis:

http://www.mundopiranha.com

Muchas gracias otra vez elpingo

De nada Chimitox, de eso se trata esta comunidad, en lo posible darnos una mano entre todos!!!

Por cierto quedo muy bien tu web, ordenada y bien presentada! Felicitaciones y que tengas éxitos en tus emprendimientos!

Saludos!

phpBB España Oficial