Página 1 de 1

Ayuda Modificando estilo prosilver

Publicado: 29 Jun 2011, 12:00
por zoby
URL: http://www.phpbbsaske.zobyhost.com/foro/index.php
Versión phpBB: 3.0.8
MODs Instalados: Si, una lista aproximada http://www.phpbbsaske.zobyhost.com/foro ... p=112#p112
Servidor: Linux, Zobyhost (gratuito)
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No
Estilo usado: (del sitio en cuestión) Prosilver
Versión del Estilo: (en el sitio en cuestión) 3.0.8 (no se como van las versiones en el prosilvr, pero supongo que será lo mismo que en phpBB)
Estoy Modificando el estilo Prosilver de mi foro, en primer lugar, añadí un par de cosas que encontre en http://www.christianbullock.com/
Luego segui estos cambios, que encontre en este tema http://www.phpbb-es.com/foro/soporte-pl ... 14484.html
EDITAR: styles/prosilver/theme/colours.css

BUSCAR:

Código: Seleccionar todo

input.disabled {
	color: #666666;
}
AÑADIR DESPUES:

Código: Seleccionar todo

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

.top-left, .top-right, .bottom-left, .bottom-right {
   background-image: url("{T_THEME_PATH}/images/rounded.gif"); /* CHANGE: path and name of your image */
   height: 20px;       /* 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: 20px; /* CHANGE: replace by the width of one of your corners */
   }
.top-right, .bottom-right {
   margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -20px;  /* 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 -20px;    /* CHANGE: replace second number by negative height of one of your corners */
   }
.bottom-right {
   background-position: 100% -20px; /* CHANGE: replace second number by negative height of one of your corners */
   }
.inside {
   border-left: 1px solid #A9A9A9; /* YCC: color & properties of the left-borderline */
   border-right: 1px solid #A9A9A9;/* YCC: color & properties of the right-borderline */
   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: 10px;
}

EDITAR: styles/prosilver/template/overall_header.html

BUSCAR:

Código: Seleccionar todo

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
AÑADIR LUEGO:

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">
EDITAR: styles/prosilver/template/overall_footer.html

BUSCAR: Esta linea puede que no sea igual del todo. No se cuatos </div> tendreis

Código: Seleccionar todo

<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div></div>
AÑADIR LUEGO:

Código: Seleccionar todo

<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
</div>
Aunque no se "quedo muy bien" (vean mi foro, y veran el resultado :roll:)
Lo que quiero hacer, es que se quede como esta aquím que segun veo, hay una imagen o color de fondo, y "por encima", hay un board, y dentro el contenido del foro y todo lo demás
Estoy intentando cambiar el color y/o buscar donde añadir una imagen, pero solo consigo hacerlo "dentro", y no "fuera"
Algo similar a esto (Se que no esta muy bien "editado/dibujado", no se usar mucho las heramientas de diseño ... :roll:)
Imagen
Espero que me haya explicado bien ... :roll:

Saludos :wink:

Re: Ayuda Modificando estilo prosilver

Publicado: 29 Jun 2011, 13:13
por javiexin
Hola Zoby,

Creo que cambiando lo siguiente en el CSS será suficiente:

Código: Seleccionar todo

body {
    background-color: #000000;
Puedes cambiar el color por lo que tú quieras, pero debería ser el mismo color de fondo que usas en esta imagen:
./styles/prosilver/theme/images/rounded.gif

Saludos,
-javiexin

PD: Para este tipo de problemas, usar el Firebug plugin para Firefox es una maravilla.

Re: Ayuda Modificando estilo prosilver

Publicado: 29 Jun 2011, 15:36
por zoby
javiexin escribió:Hola Zoby,

Creo que cambiando lo siguiente en el CSS será suficiente:

Código: Seleccionar todo

body {
    background-color: #000000;
Puedes cambiar el color por lo que tú quieras, pero debería ser el mismo color de fondo que usas en esta imagen:
./styles/prosilver/theme/images/rounded.gif

Saludos,
-javiexin
Creo que hice algun cambio de más, por que esa linea no la tengo en los archivo .css, o al menos no la he encontrado, ni en el colours.css ni en el common.css
Lo he dejabo así (en el colours.css)

Código: Seleccionar todo

body {
	margin: 0;
	padding: 0;
	background-color: #000000;
}
Y parece que funciona, muchas gracias :cerveza:
Aunque ahora que me fijo, el "contenido" esta un pooco estrecho, ya que añadi una caja de busqueda a cada foro, y ya no sale "Último mensajes", si no que sale cotada la S
Me imagino que si modifico el ancho del foro, en vez de añadirse ahi, se añadira a la parte de "fuera", no ?¿ :nolose:
Otra cosa, no se si te fijaste que en el colours.css tengo esto

Código: Seleccionar todo

#wrap {
	background-color: #FFFFFF;
	border: 2px solid transparent;
	width: 80%;
	margin: 0 auto;
	padding: 20px;
}
La verdad, es que creo que eso lo vi en el colours.css de este foro, aun así, creo que eso es "necesareo", por que si modificado el background-color:, se modifica elcolor blanco
Mi pregunta es, para aumentar el ancho, tendría que aumentar el width se aría mas ancho ?¿
Por qué la verdad, (Salvo la imagen que comentas, que la tengo que editar), todo ha quedado bien, menos ese pequeño detalle ... :roll:

Re: Ayuda Modificando estilo prosilver  Tema Solucionado

Publicado: 29 Jun 2011, 18:47
por zoby
Ya lo solucione, deshice todos los cambios que había hecho, y seguí este tutorial en phpBB.com
http://www.phpbb.com/kb/article/css3-ro ... prosilver/
Saludos :chulo: