Slider : title & subtitle Text Customization

Hi Guys,
thank you very much for all your themes, I love Sydney, and support.

I have this wish:

I’d like to add text customization to the slider title and subtitle.

I explain: first of all I’d like to have one different color for each text slider;
if possible title and subtitle in different colors in the same slider.

Second: is it possible to add any kind of text effect to the slider texts (such as for example contour, stroke, texture or inner shadow/glow effects)?

I ask because I can’t find one good text color to give proper emphasis to the slider texts…

http://soluzionidigitali.online/

Thank you very much.

Dario

Hello there,

Instead of styling the text slider, it would be much better to apply slide image overlay. Follow this instruction, please.

Doesn’t it work for you?

Regards,
Kharis

Hi Kharis,
thank you for your answer.
I read that post: can I combine that custom CSS code with the code you wrote here to have image overlay + different text color?

One more question: can I add all the codes to Child Sydney Pro Theme or is it enough adding it into Appearance > Customize > Additional CSS

Here you wrote about changing slider text color:
https://athemes.com/forums/topic/slider-image-header-image-customization/

For the text slider, would it be acceptable if you colorize its color individually and darken the text shadow? Try adding the following custom CSS code:

/* Slide 1 */
.header-slider .slide-item:nth-of-type(1) .text-slider .maintitle,
.header-slider .slide-item:nth-of-type(1) .text-slider .subtitle {
color: #fff;
text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4);
}

/* Slide 2 */
.header-slider .slide-item:nth-of-type(2) .text-slider .maintitle,
.header-slider .slide-item:nth-of-type(2) .text-slider .subtitle {
color: #ff0000;
text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4);
}

Thank you very much.

Best regards

Dario

Hi Kharis,
I started to study the code from your input;
I wrote this code that can be added to Appearance > Customize > Additional CSS.

If you, or anyone experienced, think it is correct anyone could change for each slider both title and subtitle text color and text shadow for title and subtitle separately.

It works for me.

(colors and text shadow values in the code are just examples).

/* Slide 1 */
.header-slider .slide-item:nth-of-type(1) .text-slider .maintitle {
  color: #eeee22; 
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.7);
}

.header-slider .slide-item:nth-of-type(1) .text-slider .subtitle {
  color: #d65050;
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.7);
}

/* Slide 2 */
.header-slider .slide-item:nth-of-type(2) .text-slider .maintitle {
  color: #67f94d; 
  text-shadow: 0px 0px 21px rgba(0, 0, 0, 1);
}

.header-slider .slide-item:nth-of-type(2) .text-slider .subtitle {
  color: #d65050;
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 1);
}

/* Slide 3 */
.header-slider .slide-item:nth-of-type(3) .text-slider .maintitle {
  color: #d65050; 
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.7);
}

.header-slider .slide-item:nth-of-type(3) .text-slider .subtitle {
  color: #eeee22;
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.7);
}

/* Slide 4 */
.header-slider .slide-item:nth-of-type(4) .text-slider .maintitle {
  color: #eeee22; 
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.7);
}

.header-slider .slide-item:nth-of-type(4) .text-slider .subtitle {
  color: #67f94d;
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.7);
}

/* Slide 5 */
.header-slider .slide-item:nth-of-type(5) .text-slider .maintitle {
  color: #67f94d; 
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.7);
}

.header-slider .slide-item:nth-of-type(5) .text-slider .subtitle {
  color: #d65050;
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.7);
}


Regards.

Dario

Hi Dario,

I am glad to know you got it worked. You did really awesome job. Feel free to open a new topic if you have any other else to ask.

Regards,
Kharis

1 Like