Announcement

Collapse
No announcement yet.

Storefront Promo - hover text

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

    Storefront Promo - hover text

    I goofed. Somehow I have managed to edit out the little line and the hover text "Shop All" for the SFNT ReadyTheme sfnt-promo boxes.





    I've checked my CSS files the sfnt-promo:hover a:after is still there. It does appear when moused over, but the text is no longer there. Also, the little thin bar is missing.


    Yeah, this site is behind a password protected directory. I was just hoping maybe someone might now which piece of CSS I should look for. FYI - I don't delete anything from the file, I create a custom.css to override.



    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Also what determines the sfnt-promo:nth-child(?) number? Is there something that could cause the number needed to change? I have done something and I'm not sure what it was, but I have needed to change the nth-child number to numbers higher than what is in the themes.css file. I'm using 4 5 and 6 while the theme.css is using 3 4 and 5.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    Comment


      #3
      Hi Leslie,

      The CSS for the :after should be:
      Code:
      .sfnt-promo:hover a::after {
          background: rgba(0,0,0,0);
          color: #fff;
          content: "Shop All";
          z-index: 2;
          margin-top: 20px;
          font-weight: normal;
      }
      As for nth-child, I don't see that being referenced in the stock CSS. Id this something you are wanting to add?
      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


        #4
        Originally posted by Matt Zimmermann View Post
        Hi Leslie,

        The CSS for the :after should be:
        Code:
        .sfnt-promo:hover a::after {
        background: rgba(0,0,0,0);
        color: #fff;
        content: "Shop All";
        z-index: 2;
        margin-top: 20px;
        font-weight: normal;
        }
        As for nth-child, I don't see that being referenced in the stock CSS. Id this something you are wanting to add?
        Yes, that's what I have:

        Code:
        .sfnt-promo:hover a:after {
            background: rgba(0, 0, 0, 0);
            color: #fff;
            content: "Shop All";
            z-index: 2;
            margin-top: 10px;
            font-weight: normal;
        }
        The nth-child is in the demo. The all.php shows it at line 2530 for the first sfnt-promo:

        Code:
        .main-content .sfnt-promo:nth-child(3) a::before {
            background: #ae283e;
        }
        Yeah, I know, hard to troubleshoot what you can't see.

        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment


          #5
          Hi Leslie,

          n-th child is always hard to calculate. If you add elements to the main-content, then you will need to re-calculate.
          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


            #6
            Originally posted by Matt Zimmermann View Post
            Hi Leslie,

            n-th child is always hard to calculate. If you add elements to the main-content, then you will need to re-calculate.
            Thanks
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


              #7
              Well, the mystery is semi-solved. I was playing around with the demo site and notice that the hover text dropped below the images. The site I'm working on has a white background and the hover text is white. That's why I could never see it.



              Now to figure out how to put it in its place and have it stay there in smaller screen sizes.

              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment

              Working...
              X