Como adicionar sombra preta atrás de letras no slider

Morlaw · 21/08/2015

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

darkdraco · 21/08/2015

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);
}

Morlaw · 21/08/2015

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...

Dalkiel · 21/08/2015

[MENTION=145432]Morlaw[/MENTION] lo que puedes hacer es lo siguiente:

Buscar estas lineas:

Inserir CODE, HTML ou PHP:

.widget_featured_slider .slide-content {[/FONT]

Y

Inserir CODE, HTML ou PHP:

[FONT=Consolas].widget_highlighted_posts .article-content {[/FONT]

Y editar el apartado que dice Background estan en:

Inserir CODE, HTML ou PHP:

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.8));
[FONT=Tahoma]

Debes colocarlos así:

Inserir CODE, HTML ou 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í:

Morlaw · 21/08/2015

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.

jose roman 1316 · 21/08/2015

Para el slider esto debe de estar en el style

Inserir CODE, HTML ou 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

Inserir CODE, HTML ou 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

fmoreno · 21/08/2015

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);

}

darkdraco · 21/08/2015

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)); 
}

Dalkiel · 21/08/2015

[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.

Morlaw · 21/08/2015

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!

Como adicionar sombra preta atrás de letras no slider

Morlaw

darkdraco

Morlaw

Dalkiel

Morlaw

jose roman 1316

fmoreno

darkdraco

Dalkiel

Morlaw

Tópicos similares