Cómo añadir sombra negra detrás de letras en slider

  • Autor Autor Morlaw
  • Fecha de inicio Fecha de inicio
M

Morlaw

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, no quiero lanzar el blog hasta conseguir poner esto, queria poner una sombra negra detras de las letras de la foto del slider area y beside slider area, para que las letras se vean mejor, como vereis las letras en blanco donde sale la nadadora se distingue mal por la foto,queria poner una banda en negro para que resalten las letras, a ver si alguien me pude poner el css para modificarlo, tengo ya el editor para cambiar el css. soy nuevo en esto y no veo manera de cambiarlo.
el theme que uso es este. COLORMAG | Magazine WordPress theme for 2015
mil gracias
 
Pon este pedazo de código a ver como se te hace

PHP: 
.highlights-featured-image{box-shadow: 4px 4px 7px rgb(1, 1, 1);}

- - - Actualizado - - -

con este aplica para el slider y para las imágenes de costado: [MENTION=145432]Morlaw[/MENTION]
PHP: 
.highlights-featured-image {
	box-shadow: 4px 4px 7px rgb(1, 1, 1);
}
.widget_slider_area {
	box-shadow: 4px 4px 10px rgb(1, 1, 1);
}
 
gracias darko, pero no me funciono, te escribi un mensaje por privado, me salen las fotos en relieve con la somra en negro, creo que puede ser en algo del background por lo que he leido, que dificil...
 
[MENTION=145432]Morlaw[/MENTION] lo que puedes hacer es lo siguiente:

Buscar estas lineas:

Insertar CODE, HTML o PHP: 
.widget_featured_slider .slide-content {[/FONT]

Y

Insertar CODE, HTML o PHP: 
[FONT=Consolas].widget_highlighted_posts .article-content {[/FONT]

Y editar el apartado que dice Background estan en:

Insertar CODE, HTML o PHP: 
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.8));
[FONT=Tahoma]

Debes colocarlos así:
Insertar CODE, HTML o PHP: 
background: linear-gradient(to bottom, rgba(1, 1, 1, 1) , rgba(0, 0, 0, 0.8));
[FONT=Tahoma]
[/FONT]
Con esos cambios te debe quedar así:

SgbVxhI.png

 
Madre mia, muchisimas gracias!!!!! genio!! lo unico una cosa, he puesto tal cual la ultima linea del codigo, para no tocar la plantilla me descargue un editor de codigo, donde meto el css que quiero modificar, el caso es que metiendo la ultima linea que me adjuntas (la que modificas) solo me cambian las cuatro fotos de la derecha pero el slider sigue igual.
Como veras, soy un paquete en esto importante.

De verdad que muchisimas gracias, no te imaginas las horas que llevo con esto.
 
Para el slider esto debe de estar en el style

Insertar CODE, HTML o PHP: 
.widget_featured_slider .slide-content {
    position: absolute;
    bottom: 0;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.3));
    padding-bottom: 20px;
    padding-left: 5%;
    position: absolute;
    width: 95%;
    background-color: rgba(0, 0, 0, 0.6);
}

y asi debe de estar el codigo para que aparesca en las otras 4 imagenes del lado derecho

Insertar CODE, HTML o PHP: 
.widget_highlighted_posts .article-content {
    position: absolute;
    bottom: 0;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.8));
    padding-bottom: 10px;
    padding-left: 5%;
    position: absolute;
    width: 95%;
    background-color: rgba(0, 0, 0, 0.5);
}

En ambos solo se le agrega background-color: rgba(0, 0, 0, 0.6); <----- el 0.6 lo puedes cambiar por el que gustes segun loa opacidad que quieras 0.3, 0.7, etc

saludos
 
Si sólo quires darle sombra a las letras, en lugar de la "banda negra", puedes modificar esto en el css:


.widget_featured_slider .slide-content .entry-title a {
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
​
}
 
Amigo ya te había enviado este código:

PHP: 
.article-content, .slide-content { 
    background: linear-gradient(to bottom, rgba(1, 1, 1, 0.67) , rgba(0, 0, 0, 0.59)); 
}
 
[MENTION=145432]Morlaw[/MENTION] te puse esta 2 línes que buscaras en esas 2 ".widget_featured_slider .slide-content {" y ".widget_highlighted_posts .article-content {" tienes que agregar lo que puse.
 
Jose Roman,Fmoreno,darkdrako y Dalkiel, muchas gracias,sois unos genios, de verdad que no hay palabras para agradeceroslo. darkdrako y Dalkiel, perdonad por no entender bien el codigo, como veis, esto me supera.

P.D: En una semana se lanzara el blog, os lo mandare a ver si os gusta. Mil gracias!
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

M
Mejorar apariencia del slider y beside con sombra negra
Respuestas
1
Visitas
443
ramonjosegn
ramonjosegn
M
A ver si alguien me ayuda llevo una semana con esto...
Respuestas
1
Visitas
210
tanis77
T
Atrás
Arriba