Sydney Pro Header slider text

Hi,

I can see how to change the colour of the header text and the sub line in customising-colours-header although it seems they both have to be the same colour.

But i cannot see how to change the size of the header and and sub line of text.

It would be good if I could change the colours as well?

Thanks

Nigel

Dear Nigel,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.text-slider .maintitle{
  font-size: 20px;
}

.text-slider .subtitle{
  font-size: 12px;
}

Adjust the values as needed.

Regards,
Kharis

Hi,

Done, but not changing the text in the child theme. I changed it to 20px to see what the effect was.

http://ferguson.uk.com/wp/wp-content/uploads/2016/11/ferguson_css.jpg

Only used html before soma have made basic error.

Nigel

Hello there,

The custom CSS code won’t be read by the browser because they are wrapped with /* … /. Please remove / at the top and */ at the bottom line.

Regards,
Kharis

Sorted.

Many Thanks.

Nigel

No problem.

Just go easy on it.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hello Kharis,
Thanks a lot for the awesome support that you provide here. I applied the custom CSS that you mentioned above to adjust fonts in slider:

.text-slider .maintitle{
font-size: 20px;
}

.text-slider .subtitle{
font-size: 12px;
}

But then I get too large slider fonts on mobile phone. Is there a way to adjust these fonts independently on computer and mobile phone?

Thanks,
Sergio

Hi Kharis,

Thanks for the CSS code provided in this topic - very useful! But I’ve noticed that Text Slider Main Title has a shadow. Question: how to change the color of this shadow?

Thanks,
Sofya.

Hello @spchang,

You can use media query to specifically change the style on particular screen. For instance:


@media only screen and (max-width:767px){

  .text-slider .maintitle{
    font-size: 16px;
  }

  .text-slider .subtitle{
    font-size: 11px;
  }

}

Visit this link for more detailed information about CSS media query.

Regards,
Kharis

Hello @sofya-g,

Here is the code for that shadow:


.text-slider .maintitle,
.text-slider .subtitle {
   text-shadow: 1px 1px 3px rgba(74, 195, 13, 0.3);
}

Adjust the RGBA value to meet your best fit.

From the code above,

R: 74
G: 195
B: 13
A: 0.3

The A (alpha) value ranges from 0 to 1, where 1 is solid.

Use this tool to find the RGB values:

http://www.colorspire.com/rgb-color-wheel/

Regards,
Kharis