• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] Changing the color of text in slider and home page banner

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

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 6 years, 3 months ago by daphne.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 6, 2016 at 7:56 pm #876
    daphne
    Participant

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

    February 7, 2016 at 3:16 am #878
    Davinder Singh Kanith
    Moderator

    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%;
    }
    February 7, 2016 at 3:18 am #879
    Davinder Singh Kanith
    Moderator

    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;
    }
    February 7, 2016 at 4:10 am #881
    daphne
    Participant

    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?

    February 7, 2016 at 4:14 am #883
    Chinmoy Paul
    Moderator

    Provide your site URL once

    February 7, 2016 at 4:20 am #884
    daphne
    Participant

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

    February 7, 2016 at 4:35 am #885
    Chinmoy Paul
    Moderator

    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;
    }
    February 7, 2016 at 4:59 am #886
    daphne
    Participant

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

    February 8, 2016 at 3:32 pm #889
    daphne
    Participant

    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?

    February 8, 2016 at 3:41 pm #891
    Chinmoy Paul
    Moderator

    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;
    }
    February 8, 2016 at 3:42 pm #892
    daphne
    Participant

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

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2022 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates