ancho de foro y sombra

[micasamitelefono]

Hola, como ya he puesto en otros hilos, aunque por otras cuestiones, con motivo de la navidad he cambiado el style temporalmente, he puesto uno muy guapo Chrimbo se llama, os añado una captura para que quede mas clara mi duda.
El tema es el siguiente

1 en common.css tengo esto

#wrap {
padding: 0 20px;
min-width: 700px;
width: 900px;
margin: 0 auto;
}
, entiendo que los 900 son los que marca el azul celeste, bueno ya está explicado en la foto, quisiera saber ¿cómo especifico la cantidad de cuadrado blanco que se ve y donde se especifica que debe ser blanco, creo que se entiende bien. Muchas gracias por adelantado

[JANU1535]

Los colores por lo general se definen en el archivo colours.css del mismo directorio.

El valor exacto no te lo puedo decir, depende de la plantilla.
Por ahí está la propiedad background-color, pero no se si el color ese es un 'color' o una imagen repetida hasta el infinito.

Saludos.

[micasamitelefono]

lo que pretendo es en mi plantilla prosilver añadir ese recuadro blanco para que la imagen de fondo no se vea así por el medio de los bloques, y no encuentro en donde hacerlo,lo unico que he encontrado diferente entre las dos plantillas es en common.css un trozo que pone border, pero lo añado y sigue igual(adjunto el codigo)./* Border
---------------------------------------- */
.border-left {
background: url("{T_THEME_PATH}/images/border_left.gif") #FFFFFF repeat-y 0 0;
}

.border-right {
background: url("{T_THEME_PATH}/images/border_right.gif") repeat-y 100% 0;
}

.border-top {
background: url("{T_THEME_PATH}/images/border_top.gif") repeat-x 0 0;
}

.border-top-left {
background: url("{T_THEME_PATH}/images/border_top_left.gif") no-repeat 0 0;
}

.border-top-right {
background: url("{T_THEME_PATH}/images/border_top_right.gif") no-repeat 100% 0;
width: 100%;
}

.border-bottom {
background: url("{T_THEME_PATH}/images/border_bottom2.gif") repeat-x 0 100%;
}

.border-bottom span {
background: url("{T_THEME_PATH}/images/border_bottom.gif") no-repeat 0 0;
display: block;
height: 18px;
}

.border-bottom span span {
background-position: 100% -18px;
}

.inside {
padding: 17px 27px 10px 27px;
}

[memoadian]

ah pues mira como lo tengo yo te puedo decir como le hize.
a ver empiezo

para ello abre el archivo:
styles/prosilver/theme/common.css

busca

Código: Seleccionar todo

    #wrap {
       padding: 0 20px;
       min-width: 650px;
    }

remplaza por:

Código: Seleccionar todo

    #wrap {
       padding: 0 20px;
       min-width: 650px;
       width: 80%;
       margin: 0 auto;
    }

crea un fondo como tu quieras y nombralo background

abre el colours.css

busca

Código: Seleccionar todo

html, body {
   color: #536482;
   background-color: #FFFFFF;
}

remplaza por:

Código: Seleccionar todo

html, body {
   color: #536482;
   background-color: #FFFFFF;
        background-image: url("{T_THEME_PATH}/images/background.gif/jpeg/png");
        background-position: center;
        background-repeat: no-repeat;
        background-attachment:fixed;
}

ahí en donde dice background solo pon la extension de tu archivo y quita las otras

luego busca:

Código: Seleccionar todo

input.disabled {
   color: #666666;
}

agrega despues:

Código: Seleccionar todo

/*     
--------------------------------------------------------------
Corners exteriores
-------------------------------------------------------------- */

.top-left, .top-right, .bottom-left, .bottom-right {
   background-image:   /* CHANGE: path and name of your image */
   height: 10px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   }
.top-left, .bottom-left {
   margin-right: 10px; /* CHANGE: replace by the width of one of your corners */
   }
.top-right, .bottom-right {
   margin-left: 10px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
   }
.top-right {
   background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
   }
.bottom-left  {
   background-position: 0 -10px;    /* CHANGE: replace second number by negative height of one of your corners */
   }
.bottom-right {
   background-position: 100% 0px; /* CHANGE: replace second number by negative height of one of your corners */
   }
.inside {
   border-left: 1px solid #000;    /* YCC: color & properties of the left-borderline */
   border-right: 1px solid #000;   /* YCC: color & properties of the right-borderline */
   border-top: 1px solid #000;   
   border-bottom: 1px solid #000;         
   background: #FFFFFF;            /* YCC: background-color of the inside */
   color: #394B5F;                 /* YCC: default text-color of the inside */
   padding-left: 0px;             /* YCC: all texts at some distance of the left border */
   padding-right: 0px;
   padding-top: 10px;             /* YCC: all texts at some distance of the right border */
   }
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */
.outside {
   margin: 0 auto;
   width : 950px;
   padding: 0px;
}

luego abre el common.css
y deja tu wrap así:

Código: Seleccionar todo

#wrap {
   padding: 0 10px;
   min-width: 700px;
   width: 930px;
   margin: 0 auto;
}

y el body así

Código: Seleccionar todo

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

abre el overall header y busca:

Código: Seleccionar todo

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

agrega después

Código: Seleccionar todo

<div class="outside">
<div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap">

busca en el overall footer esto:

Código: Seleccionar todo

</body>

y agrega antes esto:

Código: Seleccionar todo

<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
</div>

sube tus archivos limpia cache y tambien la cache de tu estilo y ya si quieres ver como queda puedes ver mi foro.

GRACIAS A DAVIDU DE http://coloreatuforo.com/

[jakk]

lo que pretendo es en mi plantilla prosilver añadir ese recuadro blanco para que la imagen de fondo no se vea así por el medio de los bloques, y no encuentro en donde hacerlo,lo unico que he encontrado diferente entre las dos plantillas es en common.css un trozo que pone border, pero lo añado y sigue igual(adjunto el codigo)./* Border
---------------------------------------- */
.border-left {
background: url("{T_THEME_PATH}/images/border_left.gif") #FFFFFF repeat-y 0 0;
}

.border-right {
background: url("{T_THEME_PATH}/images/border_right.gif") repeat-y 100% 0;
}

.border-top {
background: url("{T_THEME_PATH}/images/border_top.gif") repeat-x 0 0;
}

.border-top-left {
background: url("{T_THEME_PATH}/images/border_top_left.gif") no-repeat 0 0;
}

.border-top-right {
background: url("{T_THEME_PATH}/images/border_top_right.gif") no-repeat 100% 0;
width: 100%;
}

.border-bottom {
background: url("{T_THEME_PATH}/images/border_bottom2.gif") repeat-x 0 100%;
}

.border-bottom span {
background: url("{T_THEME_PATH}/images/border_bottom.gif") no-repeat 0 0;
display: block;
height: 18px;
}

.border-bottom span span {
background-position: 100% -18px;
}

.inside {
padding: 17px 27px 10px 27px;
}

aparte de añadir ese codigo en el comon.css tendras que definir los bordes en el overall_header y overall_footer mediante div
abriendo el div en el overall_header y cerrandolo en el overall_footer

[micasamitelefono]

pues muchisimas gracias memoadian, ahora no me resulta posible probarlo, pero en cuanto retome el curro lo intento, el iercoles, eso si, me parece genial toda tu solucion y de hehco viendo tu foro, es lo que busco, pero me pregunto en el tema actual de mi web chrimbo, no veo todo este codigo en colours, me podrías decir como tratan este tema en ella?, es curiosidad y me pica tanto que quiero descubrirlo, he estado comparando los colours de prosilver y chrimbo y difieren poco o muy poco, y no acabo de entenderlo, pero bueno que tu sol. me gusta y la pondré en practica. Gracias

[micasamitelefono]

SOLUCIONADO. Bueno pues al final he seguido los consejos de jakk, y voilá, lo tengo listo, efectivamente el problema estaba en que faltaban los div de apertura en header y footer (los de cierre) Gracias

[JANU1535]

Tenemos buenos usuarios en este foro.
Qué cracks!!!

[micasamitelefono]

si si, mas bien que jakkssss!!!!! jajajaj