Header Slider Text Background, colour & Size

Hi,

I’ve recently added the title and subtitle text to my home page slider images at https://www.centralavenuehomes.com.au/ and would like to know what CSS to apply to change the text size and colour of both. Additionally i would like to add a semi transparent bar under the text to make the text stand out a tad more while still being able to see the image underneath, is there any css i can apply for that?

I had toyed with the idea of just editing the images in photoshop but as the text is wrapping depending on device and device size it’s too hard to make the text fit.

Kind regards,
Joseph

Further to the above to avoid confusion, by ‘bar under the text’ i mean underneath between the image and text similar to what the website https://www.centralavenuehomes.com.au/ has under the text in their slider images.

Hello there,

Try adding the below custom CSS code into your site’s additional CSS option (Appearance > Customize > Additional CSS) or child theme’s style.css.


.text-slider{
  background-color: rgba(0,0,0,0.3);
  padding-top: 25px;
}

.text-slider .maintitle{
  color: #ff0000;
  font-size: 35px;
  line-height: 45px;
}

.text-slider .subtitle{
  color: #fff000;
  font-size: 18px;
  line-height: 26px;
}

For rgba color format of background-color, please see the W3Schools’ article. To know the RGB color code, use this tool.

Regards,
Kharis

Thanks Kharis,

All worked exactly how I wanted it to! Couple more things if it’s not too much, how do you change the left and right padding of the text slider without it also doing it on a mobile/tablet and I also want to extend the divider between the title and subtitle so it’s the full width of the title.

Kind regards,

Hello there,

Please use the CSS code below:


.text-slider{
  padding-left: 20px;
  padding-right: 20px;
}

.text-slider .maintitle:after {
  width: 100%;
  left: 0;
  margin-left: 0;
}  

Regards,
Kharis

Great! Thanks heaps Kharis all worked.

Hi Kharis, sorry to bug again but is there a way for the text slider to be centered to the image. At the moment it’s positioned quite high.

Kidn regards,
Joseph

Hello there,

Try adding the CSS code below:


.slide-inner{
  top: 0;
  height: 100%;
  -webkit-transform: unset !important;
  -moz-transform: unset !important;
  -ms-transform: unset !important;
  -o-transform: unset !important;
  transform: unset !important;
}

.slide-inner .text-slider{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  min-height: auto;
}  

.text-slider .maintitle{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

Regards,
Kharis

Awesome information. Only code I could find anywhere that worked! Much appreciated!

I have one more question though. I don’t want the background across the width of the entire page. I want it to start where the word start and end where the words end. Hope that makes sense. Any chance you have the code for that?

Thanks!

Hey kharis,

thank you very much for the code.
Can you tell me if it’s also possible to center the devider?

Best wishes
Daniel

Hello Daniel,

Try this code:

    .text-slider .maintitle:after {
      bottom: -10px;
    }

Regards,
Kharis