Title & subtitles on Header Slider question

Hello!

I’m wondering if the formatting of the titles & subtitles on the Header Slider is customizable? I’d like to be able to have the text in these areas on multiple lines. For example:

Durable
Luxurious
Environmentally-Friendly

Instead of:

Durable, Luxurious, Environmentally-Friendly

Could anyone help? Thank you!
Cailley

Hello Cailley,

Can you please provide a link to your website?

Kind Regards, Roman.

Hi Roman,
Yes, thank you!
http://stone.joshschuyler.com/

Hello Cailley, thank you for the link.

Try to use the following CSS code as a workaround. You can add CSS code in Customize → Additional CSS section.

#slideshow .subtitle::before {
    content: 'Durable';
    display: block;
}

#slideshow .subtitle::after {
    content: 'Environmentally Friendly';
    display: block;
}

Then leave only Luxurious in Customize → Header area → Header Slider section.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thank you so much, that did the trick! By the same measure, if I wanted to do the same thing with the title - create two lines of text instead of one - would the css code be:

#slideshow .title::before {
    content: 'StoneWrap';
    display: block;
}
#slideshow .title::after {
    content: 'Packaging & Gift Wrap';
    display: block;
}

I tried it but it didn’t quite work, think I’m missing something. My link again is: http://stone.joshschuyler.com/

Many thanks!
Cailley

Hello Cailley, try to add this CSS code:

#slideshow .maintitle::before {
    content: 'First line';
    display: block;
    line-height: 1.2;
}

Kind Regards, Roman.

Thank you Roman!
That worked. Is there a css code to make the second line font size smaller? I see the ability to change the font size for the site title, but not for the title for the first slide.

Cheers,
Cailley

Hello Cailley,

I’m not sure which line you want to change. Can you please provide some explanatory screenshots?

Kind Regards, Roman.

Sure thing. Below, I want to change the second line “Packaging & Gift Wrap” to a smaller size font than “StoneWrap.” The text for “Packaging & Gift Wrap” is under Appearances - Header Slider - Title for First Slide.

Hello Cailley,

  1. It looks like you have this CSS code in Simple Custom CSS and JS plugin:
.text-slider h2.maintitle{
  font-size:90px;
}

It breaks your mobile view, so you might want to remove or fix it.

  1. Try to add this CSS code in order to reduce that line size:
@media (min-width: 768px) {
    #slideshow .maintitle::before {
        font-size: 56px;
    }

    #slideshow .maintitle {
        font-size: 42px;
    }
}

Kind Regards, Roman.

Thank you Roman. Sorry for the delay, that was helpful!
Cheers,
Cailley

That’s okay, you are welcome Cailley! :slight_smile:

Kind Regards, Roman.