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 Merchant 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

  • 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 Merchant 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


    • 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
      Director of UI/UX Standards and Theme Development
      / Miva, Inc.

      Comment


      • 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 Merchant 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


        • 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
          Director of UI/UX Standards and Theme Development
          / Miva, Inc.

          Comment


          • 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 Merchant 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


            • 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 Merchant 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

              This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

              This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

              Accept