Add shadow on flexslider

Activello
1

Hi,

I need to add shadow in the flexslider to the two borders the “read more” text is between and to the bottom border of the category text, also to bullets and arrows.

I already added shadow to text using this code in the CSS editor:

.flex-caption {
color: #ffffff;
text-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;}

Thanks!

2

Hi @francescomas,

I hope you are well today and thank you for your question.

To add same shadow also to bullets and arrows, please use the below custom CSS code.

.flex-direction-nav a:before,
.flex-control-paging li a{
color: #ffffff;
box-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
}

Best Regards,
Movin

3

Thank you very much!

Is there the possibility to add shadows to the separation line between category name and post title and also to vertical bars before and after “read more”?

4

Hello there,

The following CSS should help:


/*Category line shadow*/
article.post .post-categories:after, .post-inner-content .cat-item:after {
    box-shadow: 3px 1px black;
}

The read more button is using a border to display the lines so adding a shadow there would display a shadow for the entire read more border area.

Best Regards,
Support

5

Hello there,

The following CSS should help:


/*Category line shadow*/
article.post .post-categories:after, .post-inner-content .cat-item:after {
    box-shadow: 3px 1px black;
}

The read more button is using a border to display the lines so adding a shadow there would display a shadow for the entire read more border area.

Best Regards,
Support

6

Sorry, but it doesn’t seem to work as I want.

I was referring to the line and the bars inside the flexslider, as you can see in the attached image.

7

Hello there,

This CSS would be used for the category line there:


.flex-caption .post-categories:after {
    box-shadow: 4px 4px black;
}

The box shadow for the left and right side of the read more button are borders so the box shadow would not work there.

Best Regards,
Support

8

Correct code I needed is the following:

.flex-caption .post-categories:after {
    box-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
}
The box shadow for the left and right side of the read more button are borders so the box shadow would not work there.

So is it possible to hide this two borders and to add the “|” symbol after and before “Read more” caption?

9
So is it possible to hide this two borders and to add the “|” symbol after and before “Read more” caption?

Use below custom CSS code to achieve this.


.flex-caption .read-more a{
    border: 0;
    position: relative;
}
.flex-caption .read-more a:after,
.flex-caption .read-more a:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 15px;
    width: 2px;
    background: #ffffff;
    top: 0;
}

.flex-caption .read-more a:before {
    left: 0;    
}

.flex-caption .read-more a:after {
    right: 0;
}
10

It doesn’t work, the issue remains the same.

11

You asked in your question “So is it possible to hide this two borders and to add the “|” symbol after and before “Read more” caption?” so i provided CSS code to remove borders and add the “|” symbol after and before “Read more” caption which is displaying in your shared screenshot so where is the issue?

12

My initial question was “to add shadow in the flexslider to the two borders the “read more” text is between”, that are still without shadow.

13

Ok then please share me your site URL so that i can help you.

14

Here it is: www.timesnewromance.art

15

Please use below CSS code to add shadow to those lines.

.flex-caption .read-more a:after,
.flex-caption .read-more a:before{
color: #ffffff;
box-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
}
16

Now it’s perfect! Thank you!

17

You are always welcome here :slight_smile: