Changing the color of text in slider and home page banner

[daphne]

is there a way to change the color of the text in the slider and home page banner?

[Davinder Singh Kanith]

1. To change color of title in the slider: use different color code (#fff) in the following code as seen in style.css file.

.flex-caption .slider-title {
    color: #fff;
    font-size: 46px;
    font-weight: bold;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-shadow: 0 0 3px #030303;
}

2. To change color of text in the slider, add color code of your choice like color: #eee; to the following code.

.flex-caption .caption {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 18px;
    margin: 0 auto 20px;
    max-width: 65%;
}

[Davinder Singh Kanith]

For Home Banner widget, change color code here:

.home-banner .hb-content-wrap h1,
.home-banner .hb-content-wrap h2,
.home-banner .hb-content-wrap h3,
.home-banner .hb-content-wrap h4,
.home-banner .hb-content-wrap h5,
.home-banner .hb-content-wrap h6,
.home-banner .hb-content-wrap p,
.home-banner .hb-content-wrap textwidget,
.home-banner .button {
    color: #fff;
}

[daphne]

Thank you, but won’t this change the color for all the text in the home banner. I was only trying to change the color for h3?

[Chinmoy Paul]

Provide your site URL once

[daphne]

here is the test site –> http://test1.simplesocialacademy.com/

[Chinmoy Paul]

Your site is looking nice. Replace this CSS

.home-banner .hb-content-wrap h1,
.home-banner .hb-content-wrap h2,
.home-banner .hb-content-wrap h3,
.home-banner .hb-content-wrap h4,
.home-banner .hb-content-wrap h5,
.home-banner .hb-content-wrap h6,
.home-banner .hb-content-wrap p,
.home-banner .hb-content-wrap textwidget,
.home-banner .button {
    color: #fff;
}

With

.home-banner .hb-content-wrap h1,
.home-banner .hb-content-wrap h2,
.home-banner .hb-content-wrap h4,
.home-banner .hb-content-wrap h5,
.home-banner .hb-content-wrap h6,
.home-banner .hb-content-wrap p,
.home-banner .hb-content-wrap textwidget,
.home-banner .button {
    color: #fff;
}

Now I am changing the Color of h3 tag only

.home-banner .hb-content-wrap h3 {
  color: #444;
}

You can also change the color of specific banner widget like this way:

#home-banner-3.home-banner .hb-content-wrap h3 {
  color: #4bc1b6;
}

[daphne]

Thank you!!! This is exactly what I needed.

[daphne]

One last color question – is there a way to only add color to certain words? ie – A Free Online Resource – all words in white, but the word free in black?

[Chinmoy Paul]

You can do it this way.

Replace

<h3>A <b>free</b> online resource for the DIY <b>entrepreneur</b>.</h3>

WITH

<h3><span class="white">A <b>free</b> online</span> resource for the DIY <b>entrepreneur</b>.</h3>

Add this in your CSS file

.white {
  color: #fff;
}

[daphne]

Brilliant! Thank you! Can’t wait to see the end result of my site!

[Author]

Posts