phpBB España Oficial

Buenas tardes, queria el codigo de hacer esto, un ejemplo http://rol4us.blogspot.com/p/afiliados-silver.html
Quiero seguir este tutorial, pero no se donde esta el CSS, para poder colocar el codigo y que me salga asi, donde debo de colgarlo?

Francesca264 escribió:

Autor: Francesca264 Preview de ejemplo: http://rol4us.blogspot.com/p/afiliados-silver.html INTRODUCCIÓN Este metodo será útil para dos clases de personas: La primera, que está CANSADA de repetir las medidas admitidas para sus afiliados y no le hacen ni un poco de caso. La segunda, será aquella que quiera mantener la estética en sus afiliados y que todos destaquen de un modo bonito, además de ordenado. Yo, sinceramente, soy un todo de las dos opciones xD Así que comencemos : D ¡TODO ES CSS! Si ya vieron el preview, se darán cuenta que las medidas de los botones se redimensionan automáticamente, así como también se les agrega un borde, sombra y opacidad. Para poder lograrlo necesitamos ir al CSS de nuestro foro y agregar lo siguiente: Código: Seleccionar todo a.afiliados img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; -moz-box-shadow : 0 0 10px #2E2E2E; -webkit-box-shadow : 0 0 10px #2E2E2E; width: 100px; height: 35px; border: 3px solid #D2D2D2;} a.afiliados:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; -moz-box-shadow : 0 0 0px #2E2E2E; -webkit-box-shadow : 0 0 0px #2E2E2E; width: 100px; height: 35px; border: 3px solid #D2D2D2;} } En caso de que tus afiliados estén en una página externa (como esta, que pertenece a Sundown), entonces el código que debes agregar será: Código: Seleccionar todo <style type="text/css"> a.afiliados img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; -moz-box-shadow : 0 0 10px #2E2E2E; -webkit-box-shadow : 0 0 10px #2E2E2E; width: 100px; height: 35px; border: 3px solid #D2D2D2;} a.afiliados:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; -moz-box-shadow : 0 0 0px #2E2E2E; -webkit-box-shadow : 0 0 0px #2E2E2E; width: 100px; height: 35px; border: 3px solid #D2D2D2;} </style> De ese modo creamos una Hoja cascada independiente PERSONALIZALO TU Empecemos con lo primerito. Este primer atributo sirve para preparar la nueva presentación de los botones. a.afiliados img { -moz-opacity: 1.0; >> Modifica la opacidad. En caso de querer una imagen realmente opaca, debes cambiar el valor por 0.5. opacity: 1.0; >> Modifica la opacidad. En caso de querer una imagen realmente opaca, debes cambiar el valor por 0.5. -khtml-opacity: 1.0; >> Modifica la opacidad. En caso de querer una imagen realmente opaca, debes cambiar el valor por 0.5. -moz-box-shadow : 0 0 10px #2E2E2E; >> Puedes cambiar el color de la sombra. -webkit-box-shadow: 0 0 10px #2E2E2E; Puedes cambiar el color de la sombra. width: 100px; >> El ancho de la imagen a redimensionar height: 35px; >> La altura de la imagen a redimensionar border: 3px solid #D2D2D2; >> Define el grosor del borde >> Define el tipo de borde (ejemplos: double, dashed, dotted). >> El color del borde. } El siguiente será el efecto del "hover" (cuando el curso está sobre la imagen). Para lograr los botones luzcan como si se hundieran, bastara con modificar el valor de la sombra a cero. Tambien reduje la opacidad de los atributos correspondientes a la mitad. a.afiliados:hover img { -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; -moz-box-shadow : 0 0 0px #2E2E2E; -webkit-box-shadow : 0 0 0px #2E2E2E; width: 100px; height: 35px; >> Recuerda que aqui tambien debes agregar los valores de la imagen, porque sino al posicionar el puntero sobre la image, ésta volverá a su tamaño original y perderá el encanto. border: 3px solid #D2D2D2;} CÓDIGO FINAL Cada vez que añadas un nuevo afiliado, debes utilizar este código. Código: Seleccionar todo <a class="afiliados" href='LINK DEL FORO' target='_blank'><img src='LINK DEL BOTÓN' border='0' title='NOMBRE DEL FORO'></a> Pero ¡OJO! debes ser muy cuidadoso y procurar no remover esto: <a class="afiliados" href='LINK DEL FORO' target='_blank'><img src='LINK DEL BOTÓN' border='0' title='NOMBRE DEL FORO'></a> Pues sino, no verás ningun cambio en los botones de tus afiliados. Espero les guste , cualquier duda, pregunten sin cuidado.

ahm pues, todo el css va en

styles/nombre_de_tu_plantilla/theme/

o sea que lo más recomendable es crear un archivo css, digamos

afiliados.css y pegarlo en esa ruta de tu foro que te deje arriba

luego ir a

styles/nombre_de_tu_plantilla/theme/stylesheet.css

buscar agregar depues con eso podrá susar esa clase css en cualquier parte de tu foro.

Vale, estoy en la plantilla pero no veo nada de theme, tengo que coger la hoja y subirlo? prefiero hacerlo sin subirlo por ftp.

Es necesario hacerlo por ftp para que no tengas problemas, y la carpeta theme esta dentro de la plantilla, de hecho yo puedo verla desde tu url, buscala bien.

Vale, que plantilla es? es que por el panel acd no lo vemos, solo dime el nombre, i editare con el FTP

la plantilla que usas es prospace y eso deberias saberlo mejor tu que yo

y recuerda que siempre debes editar tus plantillas directamente en los archivos. y despues subirlos al servidor.

muchas gracias, podrias preguntarme en el otro tema, la duda que tengo? gracias!