Otro post para integrar un foro en un site

[xoom]

El problema de las imágenes es la ruta. Debes acostumbrarte cuando trabajes con includes a posicionar las rutas relativas al directorio raíz, así cuando llames a la cabecera de carpetas interiores, la ruta siempre será la misma.

Esa tabla debes eliminarla ya que la cabecera ahora es la de la web. Cuando la elimines abre stylesheet.css y en esta parte

Código: Seleccionar todo

#wrapnav {
	width: 100%;

Debes modificar el 100% por la cifra que ancho que usas para la cabecera. Así lo tenemos todo al mismo ancho.

[xaruqui]

Imágenes captadas con rutas relativas. La cabecera se ve perfectamente cuando accedo directamente a ella www.efo87.com/web_prova2/efo87_header.php pero cuando la llamo desde el foro aparecen un par de imágenes descolocadas (de momento no me preocupa). He modificado:

#wrapnav {
width: 100%;

...por 70% y nada, también he probado con 850px y nada; sigue con el mismo ancho. Entonces he entrado en overall_header.html y he modificado el ancho de las tablas del menubar y del datebar, con éxito (no están centrados de momento, pero he reducido el ancho). Como no reducía el ancho del contenido del foro, he introducido wrapcentre dentro de una tabla y le he dado ancho fijo, sin resultados.

De momento todo esto queda así: http://www.efo87.com/forum/

[xaruqui]

Avances (o eso creo). Ayer me decidí probar lo mismo pero por otro camino (para ir haciendo tiempo ). Probé un tutorial yanqui y salió lo que veis www.efo87.com/forum A grandes rasgos se trata de introducir el overall_header dentro de una tabla en la plantilla web. El problema del ancho del foro queda solucionado porque se ajusta al ancho de la tabla.

Entonces queda solucionado aquello de que el foro ocupaba todo el ancho disponible, pero siguen quedando rencillas...

-Fíjate que entre la cabecera y la barra de menú queda un espaciado de unos 2 o 3px que no existen en el original.
-Después de borrar la cabecera del foro, queda un espacio muy grande entre la fecha y el inicio del contenido del foro.

Creo que si esto funciona, se podría hacer un tutorial chulo con todo esto.

[xoom]

xaruqui, no te interesa que la cabecera sea independiente, imagina que tu web crece mucho, cientos de páginas, si modificas el diseño, un enlace, etc, tendrás que hacer cientos de modificaciones. De ahí la importancia de usar includes y un único archivo que sirva para toda la web.

Seguimos fijando el ancho de subsilver, vuelve a dejar stylesheet.css como estaba y haz lo siguiente:

Busca:

Código: Seleccionar todo

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   color: #323D4F;
   background-color: #FFFFFF;
   font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
   margin: 0;
}

Modificalo con:

Código: Seleccionar todo

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   color: #323D4F;
   background-color: #FFFFFF;
   font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
   margin: 0 auto;
   width: 900px;
}

En esta línea width: 900px; modifica 900px con el ancho que limita la cabecera.

[xaruqui]

El ancho del foro ha quedado controlado al introducir el body del overall_header dentro de una tabla con el ancho de la plantilla web. Por otro lado, ya está también hecho el cambio de no separar el header, body y footer del site; ahora queda la plantilla íntegra de nuevo.

Ahora pasa lo siguiente, si uso el CSS de la plantilla web, la plantilla se ve de pm pero el foro queda con letras muy grandes y no se ve la tabla (tabla donde aparecen foros, subforos y categorías). Si uso el CSS del foro, el foro se ve de PM pero me descoloca parte de la plantilla. Si copio un CSS dentro del otro (evitando repeticiones), no cambia nada. ¿Qué me estoy dejando? Dentro del overall_header tengo las dos referencias a los CSS, también he probado quitando una cada vez, pero nada. Esta es la línea propia del overall_header donde hace referencia al css del foro.

Código: Seleccionar todo

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

y esta es donde hace referencia al css de la web:

Código: Seleccionar todo

<link rel="stylesheet" type="text/css" media="screen" href="../web_prova/styles.css" />

He probado todas las combinaciones entre ellas, pero no hay manera.

[xoom]

Eres todo un autodidacta. Por lo que veo lo has solucionado, al menos yo lo veo todo perfecto. Sólo cambiar colores para que siga el estilo de la web, pero eso ya es a gusto del consumidor.

[HuanManwe]

xaruqui, ¿podrías hacernos un resumen de lo que has hecho para solucionar estos problemas para integrar tu foro en tu web (o viceversa)?

[xaruqui]

Macho, méteme algo de caña! Quiero decir, se ve muy bien la página pero se ve fatal el foro. Me gustaría que apareciera la tabla que separa las categorías y subcategorías del foro, pero la verdad es que no sé qué parte del stylesheet.css es la que dibuja las tablas; te comenté que uní los dos css para que web y foro tuvieran css en común, pero sin resultado. La cuestión es que tengo que escoger entre que se vea bien el foro o se vea bien la página, pero ambas cosas no. ¿Cómo puedo hacer para ver las tablas al usar el css de la página?

HuanManwe, ya pensaba hacerlo Déjame acabarlo y después hago un resumecillo.

[HuanManwe]

¿y si en vez de usar tablas usas capas? Sería más "fino" y evitarías esos problemas con las definiciones que dé tu plantilla a sus tablas.

Cada vez que cambies algo y quieras probar cómo queda no olvides limpiar la caché del foro.

[xoom]

Al integrar la cabecera en el overall_header y no llamarla con un include, lo que debes es integrar el css que use la cabecera en el css del foro, pero no todo completo, unicamente la parte concerniente a la propia cabecera, lo demás no te interesa en ese espacio. Si el css enlaza con imágenes, recuerda usar siempre rutas absolutas.

[HuanManwe]

...Si el css enlaza con imágenes, recuerda usar siempre rutas absolutas.

¿por qué es eso? Estoy intentando integrar las imágenes y si lo hago en el overall_header no hay problema, pero en el CSS no pilla ninguna referencia relativa: NUNCA.

¿Sabrías decirme por qué pasa eso? Es surrealista. En el .css está indicado que la imagen de fondo de BODY es
background-image: url('./images/bg.gif');
Pero si intento añadir una imagen de fondo a una capa usando el mismo tipo de referencia no hace nada.

Gracias de antemano.

[xaruqui]

Ahora no voy a poder darte detalles porque no ando en casa con mi maquina, pero solo decirte que he decidido usar el plan B (que deberia haber sido plan A desde el primer momento). He usado un iframe para colocar el foro dentro de mi web, de este modo no tengo el problema de incompatibilidades de css que me hizo perder una semana de trabajo. Asi pues, cada css SOLO afecta a quien tiene que afectar. Todavia me quedan muchas cosas que ajustar, pero de momento la cosa queda asi www.efo87.com/web_prova/forum.php

Otra cosa es que cada vez que realizo un cambio en la plantilla web NO tengo que andar refrescando el foro... Hice en 20min lo que no consegui en una semana... Vas a ver que la etiqueta iframe es muy sencilla de usar. Ya diras algo.

[xoom]

Huan no entiendo lo que te ocurre, si te funciona la url para el fondo debería funcionar con todo aquel que use ese DIV

xaruqui, me parece un error usar iframes, está anticuado, los buscadores no ten indexan correctamente y estéticamente es un desastre cuando un tema sea más largo que el alto que has definido al iframe. Se que es una paliza integrar un css en otro, eliminar duplicados etc, pero una vez hecho es todo ventajas.

Recopilando, lo mejor es insertar el css de la cabecera dentro del css del foro. Unificar todas las imágenes en la carpeta images del foro, así todas las rutas de imagenes tendrán la misma definición y no cometeremos errores. De esta forma tiene que funcionar, es muy simple.

[dtvc]

Hola, soy nuevo en el foro, he estado leyendo el hilo, y me he decidido a entrar ya que busco exactamente lo mismo que xaruqui me iba a decidir a hacerlo por iframes pero por lo visto no parece la mejor opcion, a mi en principio em interesaria que saliese la cabezera de mi web unicamente, y parece que tocar el css no es tan facil como podria parecer, alguna idea??? en estos dias probare algunas cosillas a ver si entre todos lo sacamos!

[xaruqui]

Bienvenido al caos. Si lo unico que quieres es incluir la cabecera, no vas a tener los problemas que tenemos Huan ni yo. Nuestro problema (o el mio al menos) es que queremos embedir el foro dentro de nuestra plantilla. Que tal se te da el ingles? Cuando llegue a casa te mando un enlace que me sirvio de guia.

Xoom, tienes razon. Para que no se note el alto fijo del iframe he colocado el footer de mi plantilla en el overall_footer, asi que siempre se adapta al tamaño real del foro. Sobre la web desde la que lo llamo solo quedaria, en el caso mas desfavorable, un pequeño espacio en blanco debajo del footer.