Announcement

Collapse
No announcement yet.

How to change the Font Color in Featured Product box on Store Front Page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    How to change the Font Color in Featured Product box on Store Front Page

    How would I change the color of the font in the Featured Products box on the Store Front Page. We have a dark Royal Blue for the Box Color and would like a Golden yellow font. I have attached the code where I believe it should be changed but can't figure it out. This code is from the featured products in the Product List tag of the Levels Ready Theme. I was thinking It would be a html color code and wants to insert #FFD733

    <div class="row product-carousel">
    <div class="column whole hide medium-show medium-two-fifths large-one-fourth">
    <div class="well carrot-right featured-products-descrip" id="js-featured-products-height">
    <h3 class="nm">Rustic Home Decor</h3>
    <div class="sky">&bull;&bull;&bull;&bull;&bull;</div>
    <p><mvt:item name="readytheme" param="contentsection( 'home_featured_products' )" /></p>
    <a href="&mvt:urls:PLST:auto;" class="button button-hollow align-center uppercase featured-products-view-all">View All</a>
    </div>

    #2
    In your theme.css file, you can add or modify the colors used on the site. For this section, find the class .featured-products-descrip > h3
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Ok so I have found this code and just not quite sure what to change. I believe its the h3 which is the grey and the sky is the light blue. But do I insert a html color code there and replace the H3 and Sky. I see in the theme.css file that the h2 in a lime green, Even that would work. I did change the h3 to h2 but it did not change the font color in the box.

      Comment


        #4
        To change the color of the H3, you would add:
        Code:
        color: #fc0;
        Of course, change the value to whatever you want to use.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          Am I changing that within the theme.css file or the code in the featured Products? Below is the code in the theme.css file. If I can the h3 there to a golden yellow won't it change the for anything else on the site as a whole that might also be using the h3? Just wanting to make sure I change the font color in the box on the SF page for featured products only.
          bg-3,
          .bg-grey,
          .bg-gray {
          background-color: #a2afbc;
          }
          .color-3,
          .grey,
          .gray {
          color: #a2afbc;
          }
          .bg-4,
          .bg-light-blue,
          .bg-sky,
          .bg-aqua,
          .bg-teal {
          background-color: #4a9dcf;

          Comment


            #6
            If you edit the class I mentioned, it will only affect that particular H3.
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              Thank You!!

              Comment

              Working...
              X