Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..
Gracias.
La Administración de phpBB España.
Cambiar tables por divTema Solucionado
Cambiar tables por div
Estilo: http://www.phpbb.com/customise/db/style ... ures/demo/
como puedo cambiar las etiquetas de table por las de div sin estropear el foro ?
las etiquetas de table son las que muestran el borde del foro
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
- Add User 1.0.2
- Auto Database Backup 1.1.0
- Auto Groups 1.0.0
- Avatars on Memberlist 1.0.3
- Board Announcements 1.0.2
- Board Rules 1.0.1
- cBB Chat 1.1.1
- Fancy Lazy Topics loader 2.1.5
- Genders 1.0.0
- Last Post Avatar
- Log failed logins
- Rank Post Styling
- Share On 1.0.0
- SiteSplat BBCore 2.1.1
- Sortables Captcha 2.0.0
- Topic Author 1.0.1
- Upload Extensions 3.1.2-beta2
- FLATBOOTS 2.0.1
- Carlos Murillo
- Mensajes: 701
- Registrado: 28 Nov 2011, 04:21
- Género:
- Edad: 33
Re: Cambiar tables por div
- Off Topic
- mmm, creo que son mis iconos xD
- Creado comunidades mexicanas! - phpBBMexico.com
- Mis Proyectos Personales: | Mostrar
Conocimientos en: php, html, mysql, phpmyadmin, whm, whmcs, phpBB y un poco de photoshop xD.
Re: Cambiar tables por div
overall_header
Código: Seleccionar todo
<div class="outside">
<div class="top-center">
<div class="top-left"><div class="top-right"></div></div>
Código: Seleccionar todo
</div>
<!-- fin modif bordures extensible -->
forum_borders.css
Código: Seleccionar todo
.outside {
margin:0 auto;
width:918px;
}
.top-left, .top-right, .bottom-left, .bottom-right, .bord-left, .bord-right {
width:34px;
height: 26px;
}
.top-left {
background-image:url("{T_THEME_PATH}/images/bg_top.png");
background-repeat:repeat-x;
background-position:0 0;
margin: auto;
margin-left: 68px;
width: 816px;
}
.top-right {
background-image:url("{T_THEME_PATH}/images/border_top_right.png");
background-repeat:no-repeat;
background-position:0 0;
float: right;
width: 34px;
}
.top-center {
background-image:url("{T_THEME_PATH}/images/border_top_left.png");
background-repeat:no-repeat;
background-position:34px 0;
height:26px;
}
Si quieres puedo desarrollar todo el código restante, pero tardaría un poco
Re: Cambiar tables por div Tema Solucionado
el css usado es
Código: Seleccionar todo
html, body {
color:#404040;
background-color:#A0A7AD;
}
#wrap {
min-width:700px;
width: 920px;
margin:0 auto;
padding:0;
background-image:url("{T_THEME_PATH}/images/background-scroll.gif");
}
/*
--------------------------------------------------------------
Borders css for skinBB3
-------------------------------------------------------------- */
/* Bordures header ================================== */
#menubase_block {
margin: 0px;
margin-top: 20px;
padding: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
clear: both;
}
.menubase-l {
background-image: url("{T_THEME_PATH}/images/border_top_left.png");
background-repeat: no-repeat;
height: 26px;
float: left;
width: 34px;
padding: 0px;
}
.menubase-m {
background-image: url("{T_THEME_PATH}/images/bg_top.png");
background-repeat: repeat;
height: 26px;
width: auto;
margin: 0;
padding: 0px;
text-align: center;
}
.menubase-r {
background-image: url("{T_THEME_PATH}/images/border_top_right.png");
background-repeat: no-repeat;
height: 26px;
float: right;
margin-top: -26px;
width: 34px;
padding: 0px;
}
/* ================================================================================ */
/* ================================================================================ */
/* Bordures externes gauche et droite ================================== */
#border_block {
margin: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
padding: 0px;
width: 100%;
min-height: 100%;
height: 100%;
clear: both;
}
#borderleft {
background-image: url("{T_THEME_PATH}/images/bg_left.png");
background-repeat: repeat-y;
background-position: left;
}
#borderright {
background-image: url("{T_THEME_PATH}/images/bg_right.png");
background-repeat: repeat-y;
background-position:right;
}
/* ================================================================================ */
/* Bordures footer ================================== */
#footer_block {
margin: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 0px;
width: 100%;
clear: both;
}
.foot-l {
background-image: url("{T_THEME_PATH}/images/border_bottom_left.png");
background-repeat: no-repeat;
height: 26px;
float: left;
width: 34px;
padding: 0px;
}
.foot-m {
background: url("{T_THEME_PATH}/images/bg_bottom.png");
background-repeat: repeat;
height: 26px;
margin: 0;
width: auto;
padding: 0px;
}
.foot-r {
background-image: url("{T_THEME_PATH}/images/border_bottom_right.png");
background-repeat: no-repeat;
margin-top: -26px;
height: 26px;
float: right;
width: 34px;
padding: 0px;
}
/* ================================================================================ */
/* Content container styles
----------------------------------------*/
#content_main {
color: #826D4E;
margin-left: 34px;
margin-right: 34px;
clear: both;
padding: 0px;
overflow:hidden;
}
.bodyfill {
background-image: url("{T_THEME_PATH}/images/background-scroll.gif");
background-repeat: repeat;
background-position: top center;
}
cambiar esto
Código: Seleccionar todo
<!-- debut modif bordures extensible armes et aventures -->
<table class="outside" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="top-left"></td><td class="top-center"></td><td class="top-right"></td>
</tr>
<tr>
<td class="bord-left"></td>
<td class="bg-inside">
<!-- fin modif bordures extensible armes et aventures -->
<div id="wrap">
<a id="top" name="top" accesskey="t"></a>
Código: Seleccionar todo
<div id="wrap">
<a id="top" name="top" accesskey="t"></a>
<div id="menubase_block">
<div class="menubase-l"></div>
<div class="menubase-m"></div>
<div class="menubase-r"></div>
</div>
<div id="border_block">
<div id="borderleft">
<div id="borderright">
<div id="content_main" class="bodyfill">
cambiar esto
Código: Seleccionar todo
</div>
<!-- debut modif bordures extensible -->
</td>
<td class="bord-right"></td>
</tr>
<tr>
<td class="bottom-left"></td><td class="bottom-center"></td><td class="bottom-right"></td>
</tr>
</table>
<!-- fin modif bordures extensible -->
Código: Seleccionar todo
</div> <!-- end content -->
</div> <!-- end border left -->
</div> <!-- end border right -->
</div> <!-- end border block -->
<div id="footer_block">
<div class="foot-l"></div>
<div class="foot-m"></div>
<div class="foot-r"></div>
</div>
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
- Add User 1.0.2
- Auto Database Backup 1.1.0
- Auto Groups 1.0.0
- Avatars on Memberlist 1.0.3
- Board Announcements 1.0.2
- Board Rules 1.0.1
- cBB Chat 1.1.1
- Fancy Lazy Topics loader 2.1.5
- Genders 1.0.0
- Last Post Avatar
- Log failed logins
- Rank Post Styling
- Share On 1.0.0
- SiteSplat BBCore 2.1.1
- Sortables Captcha 2.0.0
- Topic Author 1.0.1
- Upload Extensions 3.1.2-beta2
- FLATBOOTS 2.0.1
Re: Cambiar tables por div
Obstante a modo de comentario, hay una manera mas sencilla aun de hacerlo. Solo necesitarías un DIV por zona.
Me explico.
El tema lo puedes dividir en tres partes, el borde superior, los dos centrales y el inferior.
Necesitas un DIV principal que sustituirá al TABLE y que servirá de contenedor general.
Para el borde superior puedes definir 1 solo DIV quedando algo como esto.
Código: Seleccionar todo
<div class="top"></div>
Primero definimos el contenido general de la clase "top"
Código: Seleccionar todo
.top{
margin: auto;
width: 850px;/* 918px menos 64px (34 x 2)*/
height:26px;
background-image:url("{T_THEME_PATH}/images/bg_top.png");
background-repeat:repeat-x;
}
Código: Seleccionar todo
.top:before, .top:after {
content: ""; /* Es importante */
display: block;
height: 26px;
position: relative;
width: 34px;
}
.top:before {
background-image:url("{T_THEME_PATH}/images/border_top_left.png");
background-repeat:no-repeat;
background-position:0 0;
}
.top:after {
background-image:url("{T_THEME_PATH}/images/border_top_right.png");
background-repeat:no-repeat;
background-position:0 0;
left: 816px; /* 850px menos 34px porque alineamos a la derecha no a la izquierda */
top: -26px; /* Por ser posición relativa*/
}
Como puedes comprobar es mucho mas simple, pero tiene un inconveniente. No funciona en navegadores anteriores a IE8.
Re: Cambiar tables por div
div top fijo sin repetir
div central que repite todo el largo
div bottom fijo sin repetir
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
- Add User 1.0.2
- Auto Database Backup 1.1.0
- Auto Groups 1.0.0
- Avatars on Memberlist 1.0.3
- Board Announcements 1.0.2
- Board Rules 1.0.1
- cBB Chat 1.1.1
- Fancy Lazy Topics loader 2.1.5
- Genders 1.0.0
- Last Post Avatar
- Log failed logins
- Rank Post Styling
- Share On 1.0.0
- SiteSplat BBCore 2.1.1
- Sortables Captcha 2.0.0
- Topic Author 1.0.1
- Upload Extensions 3.1.2-beta2
- FLATBOOTS 2.0.1
Re: Cambiar tables por div
En el central (WRAP) tienes la parte central que repetiría la imagen de fondo, que ya está echo. Solo tendrías que definir un .wrap:before y un .wrap:after, con un repeat-y.
En este caso y para foros pequeños no tiene mucho valor, pero cuando empiezas a modificar una pagina entera, la cantidad de datos que te ahorras transmitir puede llegar a ser importante. Mas si tenemos en cuenta que el CSS a no variar, se puede guardar en la caché del ordenador cliente. De echo una manera de ahorrar mucho ancho de banda es definir una caché con las imágenes y elementos que no varían, en el dispositivo cliente. Ya sea mediante una cookie u otros medios.
Aunque eso ya es irse por otros caminos que no son el tema. (Desde que me he quedado en paro tengo demasiado tiempo libre XDD)
Saludos
Re: Cambiar tables por div
Rectificar, porque no había entendido
En el caso del top y del bottom tienes que repetir la parte central. Poner una imagen entera no es una solución demasiado buena. Una manera de hacerlo también es unir en una sola imagen los extremos y el centro, y variar la posición de la imagen en el background, pues te ahorras llamadas y ancho de banda, y quedando algo por ejemplo:
Código: Seleccionar todo
.top{
background:url("{T_THEME_PATH}/images/top.png") 0 35px repeat-x; (no está a escala es para hacerte una idea)
}
.top:before {
background:url("{T_THEME_PATH}/images/top.png") left top no-repeat;
}
.top:after {
background:url("{T_THEME_PATH}/images/top.png") right top no-repeat;
}