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.

CSS?

PHP, HTML, CSS, JS, jQuery, etc.

0
No hay votos
 
Votos totales: 0

WebLH
Baneado
Mensajes: 87
Registrado: 27 Ene 2011, 17:37

CSS?

#1

Mensaje por WebLH »

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 :D

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 :D , cualquier duda, pregunten sin cuidado.


memoadian
Elite
Mensajes: 1572
Registrado: 27 Jun 2009, 13:07
Edad: 33

Re: CSS?

#2

Mensaje por memoadian »

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

Código: Seleccionar todo

@import url("colours.css");
agregar depues

Código: Seleccionar todo

@import url("afiliados.css");
con eso podrá susar esa clase css en cualquier parte de tu foro.
Última edición por memoadian el 15 Ago 2011, 00:44, editado 1 vez en total.
Datos de soporte
URL: http://manganimemas.com/foro
Versión phpBB: phpBB3 (3.0.9)
MODs Instalados:
Advertisement management, Jquery quick edit,
Block foro externo, Reimg image resizer,
PhpbbSEO, Multi race ranks,
Auto backup, Multiple ranks,
phpbb-seo dynamic meta tags, breizh ajax checks,
barra de mitch, Imágen campos personalizados,
centrar avatar, full quick reply editor,
ign style colored names, perfil a la izquierda,
nv newspage, phpbb security, prime links,
smilie creator, user ranks progresion bar,
buttons menu, prime notify,

Plantilla(s) usada(s): prosilver
Servidor: Pago
Actualización desde otra versión: si
Conversión desde otro sistema de foros: no
__________________________________________________________________________________________________
Instalo mods
Administrador de manganimemas.
__________________________________________________________________________________________________
WebLH
Baneado
Mensajes: 87
Registrado: 27 Ene 2011, 17:37

Re: CSS?

#3

Mensaje por WebLH »

Vale, estoy en la plantilla pero no veo nada de theme, tengo que coger la hoja y subirlo? prefiero hacerlo sin subirlo por ftp.
memoadian
Elite
Mensajes: 1572
Registrado: 27 Jun 2009, 13:07
Edad: 33

Re: CSS?

#4

Mensaje por memoadian »

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.
Datos de soporte
URL: http://manganimemas.com/foro
Versión phpBB: phpBB3 (3.0.9)
MODs Instalados:
Advertisement management, Jquery quick edit,
Block foro externo, Reimg image resizer,
PhpbbSEO, Multi race ranks,
Auto backup, Multiple ranks,
phpbb-seo dynamic meta tags, breizh ajax checks,
barra de mitch, Imágen campos personalizados,
centrar avatar, full quick reply editor,
ign style colored names, perfil a la izquierda,
nv newspage, phpbb security, prime links,
smilie creator, user ranks progresion bar,
buttons menu, prime notify,

Plantilla(s) usada(s): prosilver
Servidor: Pago
Actualización desde otra versión: si
Conversión desde otro sistema de foros: no
__________________________________________________________________________________________________
Instalo mods
Administrador de manganimemas.
__________________________________________________________________________________________________
WebLH
Baneado
Mensajes: 87
Registrado: 27 Ene 2011, 17:37

Re: CSS?

#5

Mensaje por WebLH »

Vale, que plantilla es? es que por el panel acd no lo vemos, solo dime el nombre, i editare con el FTP
memoadian
Elite
Mensajes: 1572
Registrado: 27 Jun 2009, 13:07
Edad: 33

Re: CSS?

#6

Mensaje por memoadian »

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

y recuerda que siempre debes editar tus plantillas directamente en los archivos. y despues subirlos al servidor.
Datos de soporte
URL: http://manganimemas.com/foro
Versión phpBB: phpBB3 (3.0.9)
MODs Instalados:
Advertisement management, Jquery quick edit,
Block foro externo, Reimg image resizer,
PhpbbSEO, Multi race ranks,
Auto backup, Multiple ranks,
phpbb-seo dynamic meta tags, breizh ajax checks,
barra de mitch, Imágen campos personalizados,
centrar avatar, full quick reply editor,
ign style colored names, perfil a la izquierda,
nv newspage, phpbb security, prime links,
smilie creator, user ranks progresion bar,
buttons menu, prime notify,

Plantilla(s) usada(s): prosilver
Servidor: Pago
Actualización desde otra versión: si
Conversión desde otro sistema de foros: no
__________________________________________________________________________________________________
Instalo mods
Administrador de manganimemas.
__________________________________________________________________________________________________
WebLH
Baneado
Mensajes: 87
Registrado: 27 Ene 2011, 17:37

Re: CSS?

#7

Mensaje por WebLH »

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

Volver a “🆘 Recursos Webmaster”