Soporte en estilos de phpBB3Imagen para fondo de sidebar

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

Moderadores: Carlos, Soporte en phpBB, Soporte en MODs, 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
Cruciattus
Usuario
Usuario
Mensajes: 120
Registrado: 25 Jul 2012 00:22:51
Bandera: Spain
Nombre real: X

Imagen para fondo de sidebar

Notapor Cruciattus » 15 Sep 2012 14:52:25

URL: www.cruciatus-hogwarts.com
Versión phpBB: 3.0.11
MODs Instalados:
[spoiler]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[/spoiler]
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
cisco007
Usuario
Usuario
Mensajes: 367
Registrado: 05 Ene 2012 15:59:22
Bandera: Mexico
Nombre real: cisco

Re: Imagen para fondo de sidebar

Notapor cisco007 » 15 Sep 2012 18:33:13

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
Cruciattus
Usuario
Usuario
Mensajes: 120
Registrado: 25 Jul 2012 00:22:51
Bandera: Spain
Nombre real: X

Re: Imagen para fondo de sidebar

Notapor Cruciattus » 17 Sep 2012 12:51:48

De que altura debe ser la imagen?? para que no se repita ni se corte

Avatar de Usuario
cisco007
Usuario
Usuario
Mensajes: 367
Registrado: 05 Ene 2012 15:59:22
Bandera: Mexico
Nombre real: cisco

Re: Imagen para fondo de sidebar

Notapor cisco007 » 17 Sep 2012 13:11:43

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:
[c]background-repeat: no-repeat;[/c]
por este:
[c]background-repeat: repeat-y;[/c]


Social Media

     

Volver a “Soporte en estilos de phpBB3”