Support › Forums › Flex Theme › Changing the color of text in slider and home page banner
- This topic has 10 replies, 3 voices, and was last updated 7 years, 4 months ago by
daphne.
-
AuthorPosts
-
February 6, 2016 at 7:56 pm #876
daphne
Participantis there a way to change the color of the text in the slider and home page banner?
February 7, 2016 at 3:16 am #878Davinder Singh Kanith
Moderator1. 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%; }
February 7, 2016 at 3:18 am #879Davinder Singh Kanith
ModeratorFor 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; }
February 7, 2016 at 4:10 am #881daphne
ParticipantThank 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?
February 7, 2016 at 4:14 am #883Chinmoy Paul
ModeratorProvide your site URL once
February 7, 2016 at 4:20 am #884daphne
Participanthere is the test site –> http://test1.simplesocialacademy.com/
February 7, 2016 at 4:35 am #885Chinmoy Paul
ModeratorYour 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; }
February 7, 2016 at 4:59 am #886daphne
ParticipantThank you!!! This is exactly what I needed.
February 8, 2016 at 3:32 pm #889daphne
ParticipantOne 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?
February 8, 2016 at 3:41 pm #891Chinmoy Paul
ModeratorYou 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; }
February 8, 2016 at 3:42 pm #892daphne
ParticipantBrilliant! Thank you! Can’t wait to see the end result of my site!
-
AuthorPosts
- You must be logged in to reply to this topic.