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.

Trucos estilos de prosilverTema Solucionado

Dudas sobre estilos phpBB 3.0.x
Colaboraciones gráficas paquetes de rangos aquí y botones aquí.
Cerrado
Avatar de Usuario
Morph
Ex Staff
Mensajes: 594
Registrado: 10 May 2005, 17:50
Nombre real: Joan
Ubicación: Silent Hill
Género:

Trucos estilos de prosilver  Tema Solucionado

Mensaje por Morph » 04 Ene 2008, 07:10

Cambiar ancho de foro prosilver y dejarlo parecido al phpbb.com. No se si esta guia esta en nuestro idioma, por si acaso la dejo aqui, no hay enlaces ya que la hice yo tal como hacia los cambios en un pbpbb3 mio.
Abrir archivo styles/prosilver/theme/common.css | Mostrar

Código: Seleccionar todo

BUSCAR:

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

CAMBIAR POR:

#wrap {
   padding: 0 20px;
   min-width: 700px;
   width: 900px;
   margin: 0 auto;
}

Donde 900 es el ancho desado

-----------------------------------------------------------------------------------------------------------------------

QUITAR BUSQUEDA


EDITAR: styles/prosilver/template/overall_header.html


BUSCAR:

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

CAMBIAR POR:

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
		<!-- ENDIF -->
Poner BUSCAR en la linea de Desconectar ETC
Abrir el archivo styles/prosilver/template/overall_header.html | Mostrar

Código: Seleccionar todo

BUSCAR:

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

AÑADiR DEPUES:

<li class="icon-search"><a href="{U_SEARCH}" title="{L_FAQ_EXPLAIN}">{L_SEARCH}</a></li>
Poner el corner grande en header: archivo rounded.gif
Abrir el archivo styles/prosilver/theme/colours.css | Mostrar

Código: Seleccionar todo

BUSCAR:

input.disabled {
	color: #666666;
}

AÑADIR DESPUES:

/*  	
--------------------------------------------------------------
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;
}
Abrir el archivo styles/prosilver/template/overall_header.html | Mostrar

Código: Seleccionar todo

BUSCAR:

</head>

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

AÑADIR LUEGO:

<div class="outside">
<div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap">
styles/prosilver/template/overall_footer.html | Mostrar

Código: Seleccionar todo

BUSCAR: Esta linea puede que no sea igual del todo. No se cuantos </div> tendréis

<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div></div>

AÑADIR LUEGO:

<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
</div>
-----------------------------------------------------------------------------------------------------------------------
El archivo rounded.gif hay que ponerlo enstyles/prosilver/theme/images/rounded.gif
-----------------------------------------------------------------------------------------------------------------------

LOGO:
Abrir el archivo styles/prosilver/template/overall_header.html | Mostrar

Código: Seleccionar todo

BUSCAR:

<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="./styles/prosilver/imageset/site_logo.png" alt="" title="" ></a>

CAMBIAR POR

<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="images/spacer.gif" width="870" height="136" alt="" /></a>
Abrir el archivo styles/prosilver/theme/colours.css | Mostrar

Código: Seleccionar todo

BUSCAR

.headerbar {
	background-color: #4A75B3;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

CAMBIAR POR

.headerbar {
	background-color: #FFFFFF;
	background-image: url("{T_THEME_PATH}/images/site_logo.png");
	color: #FFFFFF;
}
La imagen site_logo.png moverla de su directorio a styles/prosilver/theme/images las medidas son 900x145

Cambiar color celdas del foro amarillas
Abrir el archivo styles/prosilver/theme/colours.css | Mostrar

Código: Seleccionar todo

BUSCAR

li.row:hover {
	background-color: #F6F4D0;
}
Cambiar este código #F6F4D0 por el que se quiera.

Cambiar colores de los link al pasar el cursor
Abrir el archivo styles/prosilver/theme/colours.css | Mostrar

Código: Seleccionar todo

BUSCAR 
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */

a:link	{ color: #264273; }
a:visited	{ color: #264273; }
a:hover	{ color: #D31141; }
a:active	{ color: #5176B7; }
Cambiar por el que mas os guste

User online por si se quiere poner una imagen png
Abrir el archivo styles/prosilver/theme/colours.css | Mostrar

Código: Seleccionar todo

BUSCAR

.online {
	background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
}

CAMBIAR

icon_user_online.gif  Por la imagen que sea
/spoilt]

Creo que no me he dejado nada ya que lo iva escribiendo tal como hacia el nuevo estilo y buscaba info por todos lados. La palabra magica BUSCAR.
Si quereis que el avatar etc. Os salga a la izquierda como en los foros phpbb2. En la descarga del adjunto esta el archivo content.css sustituirlo por el que tengais. Este archivo solo es para poner a la izquierda el avatar, rango etc, si lo quereis dejar coomo viene en el phpbb3 no cambiarlo.
En la descarga tambien esta el archivo rounded.gif

Bueno pues eso es todo. La base para hacer los cambios es un estilo prosilver. Espero os funcionne ya que tal como dije, lo he ido escribiendo tal como lo hacia, por eso tampoco esta ordenado.
A parte tendreis que poner un poco de vuestra imaginacion. Y haceros la imagen para el header en las medidas que puse mas arriba. Saludos

PD: Cierro el tema para que quede limpio. Si teneis alguna duda y me acuerdo como lo hice podeis preguntar en el foro e intentare ayudar jeje. No puse enlace para ver como queda ya que no soy amante del Spam.
Recordar hacer copias de seguridad de los archivos antes de editar :cerveza:
Adjuntos
Estilo.zip
Archivos necesarios
(4.01 KiB) Descargado 492 veces




Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Cerrado