Dudas sobre estilos, edición de HTML, edición de CSS para mejorar tu foro phpBB3

Moderadores: Carlos, Soporte en MODs, Soporte en phpBB, Soporte en Estilos

Reglas del Foro: Si vas a pedir ayuda o soporte favor de rellenar los Datos de Soporte,
Si no asi no le podemos ayudar!
  • Avatar de Usuario
  • Avatar de Usuario
Avatar de Usuario
By Cruciattus
#334
URL: www.cruciatus-hogwarts.com
Versión phpBB: 3.0.11
MODs Instalados:
o Advanced Show Poll Voters
o Ultimate Points
o NV Advanced Last Topic Titles
o Group Legend Positioning
o Auto Database Backup
o Categorize Announces and Stickies
o Activity Stats mod
o Anti-Spam ACP
o DiceMod v.0.7.3
o Simple Topic Description
o Parse Bbcode in custom profile fields
o MSSTI Advanced Bbcode Box 3
o First post on every page
o Change Users posts
o M-chat
o Ultimate SEO URL in Advanced mode
o Enable HTML 1.2.3

Plantilla(s) usada(s): Cruciatus v.2 (SUBSILVER)
Servidor: Pago
Conversión desde otro sistema de foros: No
Manera de instalacion: ??
Nivel de experiencia?: Ninguna

Quiero ponerle una imagen de fondo a la sidebar y encima de la imagen un recuadro con x opacidad para que se vea un poco el fondo, claro. Y dentro de todo eso, el contenido.
Se que el ancho es 300 pero no se la altura. Por si no me explico bien, en imagen
Imagen

el codigo de la sidebar es este
Código: Seleccionar todo<style type="text/css">
/*<![CDATA[*/
#sidebar{
overflow: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
height: 100%;
overflow: auto;
    color: #fffff;
}

#maintables{
position: fixed;
top: 0;
left: 300px;
right: 0;
bottom: 0;
overflow: auto;
}
.clickable {
    display: inline;
    margin-left: 7px;
}
.tab-content {
    background-color: transparent;
    color: #666666;
    display: none;
    font-family: trebuchet ms;
    font-size: 8px;
    line-height: 9px;
    padding: 10px;
    text-align: justify;
    text-shadow: 1px 0 0 #262523;
    text-transform: uppercase;
}
#tab1-content {
    display: block;
}
.highlight {
    border-bottom: 1px solid #666666;
}
#tab-strip {
    color: #311616;
    display: block;
    font-family: 'Orator Std',sans-serif;
    font-size: 14px;
    line-height: 25px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
   cursor: pointer;
}
#tab-strip a:link, a:visited, a:active, a:hover {
    text-decoration: none;
}
.sidetitle {
    color: #311616;
    font-family: 'CygnetRound',sans-serif;
    font-size: 40px;
    line-height: 40px;
    padding-top: 5px;
    text-align: center;
    text-shadow: 1px 0 0 #262523;
}
.forminput, .textinput, .radiobutton, .checkbox, .textarea {
    background: none repeat scroll 0 0 #2F2E2C;
    border: 5px solid #262523;
    color: #666666;
    font-family: trebuchet ms;
    font-size: 9px;
    line-height: 10px;
    vertical-align: middle;
}

/*]]>*/
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
 /* code written by kismet of RPG-Directory.com */
$(function(){ function selectTab(tab){ var i=1; while($('#tab'+i).length){ if(tab.attr('id')!=='tab'+i){ $('#tab'+i).removeClass('highlight'); $('#tab'+i+'-content').hide(); } else { tab.addClass('highlight'); $('#tab'+i+'-content').show(); } i++; }} $('#tab1').addClass('highlight'); $('.clickable').each(function(){ $(this).click(function(){ selectTab($(this)); });});});
</script>
</head>
<div id="sidebar">

<div class="sidetitle">Cruciattus</div>
<div style="height:5px;"></div>
A VER QUE SALDRIA AQUI
<div style="padding:10px;">

<ul id='tab-strip'>
  <li id='tab1' class='clickable'>BIENVENIDA</li>
  <li id='tab2' class='clickable'>STAFF</li>
  <li id='tab3' class='clickable'>Tab 3.</li>
  <li id='tab4' class='clickable'>Tab 4.</li>
  <li id='tab5' class='clickable'>tab 5.</li>
</ul>
<div id='tab1-content' class='tab-content'>

<div id="cboxdiv" style="text-align: center; line-height: 8px;">
<center><img src="http://i.imgur.com/0QzT4.png"/><br><a class="opacity" href="http://adhlan.com/"><img src="http://i.imgur.com/lbhZJ.png" style="width:50px;heigh:100px;" /></a><a class="opacity" href="http://thelastcity.foroactivo.com/forum"><img src="http://i.imgur.com/jCpEt.png" style="width:50px;heigh:100px;" /></a><a class="opacity" href="http://www.thedarkhole.net/foro/"><img src="http://i.imgur.com/Hh590.png" style="width:50px;heigh:100px;" /></a><br><br><br><img src="http://i.imgur.com/QKHUU.png"/><br><a class="opacity" href="http://rol4us.foro.ag/"><img src="http://i.imgur.com/fGOct.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.roleplaymonster.org/forum"><img src="http://i.imgur.com/lNsSW.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://durmstrangrpg.foroactivo.com/forum"><img src="http://i.imgur.com/OYTMV.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.elmapadelmerodeador.com/"><img src="http://i.imgur.com/nDwgb.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.morsmordrerol.com/forum"><img src="http://i.imgur.com/EYnbr.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://theblackhalo.foroactivo.com/"><img src="http://i.imgur.com/lHJEQ.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://cuentosdenoreth.creacionforo.com/"><img src="http://i.imgur.com/VIrpR.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://triadamagica.foroactivo.com/forum"><img src="http://i.imgur.com/kaHzL.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.universidadalbion.com/forum"><img src="http://i.imgur.com/qnJJh.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://allmysecretsaway.foroactivo.com/"><img src="http://i.imgur.com/jvad7.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.imperiusgeneration.com/"><img src="http://i.imgur.com/drfQ6.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.finiteincantatemavie.com/"><img src="http://i.imgur.com/fMOzx.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.hungergamesrol.com/"><img src="http://i.imgur.com/hu6l0.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://lost-heaven.el-foro.net/"><img src="http://i.imgur.com/rgtco.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.zeldarol.com/"><img src="http://i.imgur.com/Tyeju.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.preston-college.com/"><img src="http://i.imgur.com/UaFN1.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://hinnomsvalley.foroes.net/forum"><img src="http://i.imgur.com/8wY0I.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://ghostoakville.vampire-legend.net/"><img src="http://i48.tinypic.com/e6289g.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://psquiatricorx.gratuitosforos.com/"><img src="http://i.imgur.com/ElaDL.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.instituto-hellsing.com/"><img src="http://i47.tinypic.com/f3u8g1.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://afterlife.el-foro.net/"><img src="http://i.imgur.com/Vwze8.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://walkingdeadrpg.foroactivo.com/forum"><img src="http://i.imgur.com/V94vQ.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://hp-avada-kedavra.foroactivo.com/"><img src="http://i49.tinypic.com/2yv8c4w.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.mapadelmerodeador.com/foro/"><img src="http://i.imgur.com/5zBaf.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://ordenmerodeadora.foros.ws/index.php"><img src="http://i50.tinypic.com/2lsjuqq.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://thehangingtree.foroactivo.com"><img src="http://i.imgur.com/bR0n7.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://vuelapluma.foroactivo.com/"><img src="http://i.imgur.com/Ur6Yo.png" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.cruciatus-hogwarts.com/"><img src="http://i50.tinypic.com/qxa1rs.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.cruciatus-hogwarts.com/"><img src="http://i50.tinypic.com/qxa1rs.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.cruciatus-hogwarts.com/"><img src="http://i50.tinypic.com/qxa1rs.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.cruciatus-hogwarts.com/"><img src="http://i50.tinypic.com/qxa1rs.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.cruciatus-hogwarts.com/"><img src="http://i50.tinypic.com/qxa1rs.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.cruciatus-hogwarts.com/"><img src="http://i50.tinypic.com/qxa1rs.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.cruciatus-hogwarts.com/"><img src="http://i50.tinypic.com/qxa1rs.jpg" style="width:35px;heigh:35px;" /></a><a class="opacity" href="http://www.cruciatus-hogwarts.com/"><img src="http://i50.tinypic.com/qxa1rs.jpg" style="width:35px;heigh:35px;" /></a></center>
</div>

</div>
<div id='tab2-content' class='tab-content'>

<table align="center" width="90%"><tr><td width="60%" class="maintitle"><a href="http://www.cruciatus-hogwarts.com/foro/normas-ambientacion-cruciattus.html"><FONT FACE="arial" SIZE=1 COLOR=>NORMAS Y AMBIENTACION</FONT></a>
</td></tr>
<tr><td width="60%" class="maintitle"><a href="http://www.cruciatus-hogwarts.com/foro/sombrero-seleccionador-t3133.html"><FONT FACE="arial" SIZE=1 COLOR=>SOMBRERO SELECCIONADOR</FONT></a>
</td>
<tr><td width="60%" class="maintitle"><a href="http://www.cruciatus-hogwarts.com/foro/hogwarts-express.html"><FONT FACE="arial" SIZE=1 COLOR=>FICHA DE PERSONAJE</FONT></a>
</td></tr>
<tr><td width="60%" class="maintitle"><a href="http://www.cruciatus-hogwarts.com/foro/empleos-disponibles.html"><FONT FACE="arial" SIZE=1 COLOR=>EMPLEOS PARA ADULTOS</FONT></a>
</td>
<tr><td width="60%" class="maintitle"><a href="http://www.cruciatus-hogwarts.com/foro/caja-de-herramientas.html"><FONT FACE="arial" SIZE=1 COLOR=>REGISTROS</FONT></a>
</td></tr>
</table>
CONTENIDO 2
</div>
<div id='tab3-content' class='tab-content'>
CONTENIDO 3
</div>
<div id='tab4-content' class='tab-content'>
CONTENIDO 4
</div>

<div id='tab5-content' class='tab-content'>
CONTENIDO 5
</div>

</div>
<div id="maintables" class="maintables">
Avatar de Usuario
By cisco007
#338
esa sidebar nos va a volver locos!
para la imagen necesitas agregar esto:
Código: Seleccionar todo    background: url("enlace de tu imagen");
     background-repeat: no-repeat;

dentro de el codigo css:
Código: Seleccionar todo#sidebar{


agregar estas extras lineas:

Código: Seleccionar todo.background {
       background-color: white;
     height: 100%;
     filter:alpha(opacity=60); /* IE's opacity*/
     left: 0px;
     opacity: 0.60;
     position: absolute;
     top: 0px;
     width: 250px;
     z-index: 99;
     border-radius: 6px;
     -moz-border-radius: 6px;
    margin: 20px;
}


y ahora encapsular toda la informacion que quieras que este dentro de la cajita con esto:
Código: Seleccionar todo<div class="background">tu contenido</div>

espero sepas hacer lo! es todo lo que puedo hacer por ti desde aqui! smile_bigsmile
Avatar de Usuario
By cisco007
#355
pues eso si no se, porque tu tienes el sidebar a la altura de 100% asi es de que si tienes mucho contenido se va a alargar para arriba y para abajo, y si esta corta pues no se vera toda la imagen, necesitas probar de una por una la altura a ver cual quedara mejor.
y si pones una que se corta pues cambia este codigo:
background-repeat: no-repeat;
por este:
background-repeat: repeat-y;
¿Quién está conectado?

Usuarios navegando por este Foro: CommonCrawl [Bot] y 0 invitados