Página 1 de 1
Trucos estilos de prosilver Tema Solucionado
Publicado: 04 Ene 2008, 07:10
por Morph
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
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
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 