Announcement

Collapse
No announcement yet.

More Fun with Flags

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

  • More Fun with Flags

    I had started a conversation about adding product flags to Shadows back in 2018 and have been able to add them using all CSS for the flag. Now I'd like to use a graphic for the flag which would be triggered by the flag custom field. I'm having a brain fade moment. I'm thinking it's probably a tick easier than all CSS styling. What am I forgetting?

    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

  • Hi Leslie,

    You could try creating an image path using the flag code as the file name for the image.
    Matt Zimmermann
    Director of UI/UX
    / Miva, Inc.

    Comment


    • Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      You could try creating an image path using the flag code as the file name for the image.
      Would this be the starting point?

      Code:
      .flag--out_of_stock::after {
          content: "OUT OF STOCK";
      }
      Use .flag--out_of_stock in some way?

      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


      • Hi Leslie,

        You could start there and use a background-image instead of content.
        Matt Zimmermann
        Director of UI/UX
        / Miva, Inc.

        Comment


        • Here's an example directly related to what you want: (Check the best seller flag.)

          https://www.redrivercatalog.com/brow...et-papers.html

          The SMT switch is simple the value of the custom field (flag name) appended to a CSS class (though you could just use the custom field name itself). I.e., class="attnFlag" becomes class="attnFlag-bestseller"
          Bruce Golub
          Phosphor Media - "Your Success is our Business"

          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
          phosphormedia.com

          Comment


          • Originally posted by Bruce - PhosphorMedia View Post
            Here's an example directly related to what you want: (Check the best seller flag.)

            https://www.redrivercatalog.com/brow...et-papers.html

            The SMT switch is simple the value of the custom field (flag name) appended to a CSS class (though you could just use the custom field name itself). I.e., class="attnFlag" becomes class="attnFlag-bestseller"
            I think I already have a handle on the SMT, it's the CSS...
            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


            • Bruce pretty much gave you the CSS... Just inspect his flag using DevTools and gather inspiration from his code. Take note that he's not using a pseudo-element in his example and you'd probably want to change the positioning. Either will work.

              That said the CSS will depend on your unique design and what you are trying to accomplish.

              It sounds like you might be looking for something along the lines of:

              .flag--out_of_stock::after {
              content: ' ';
              position: absolute;
              top: 0;
              right: 0;
              background-image: url(your image path);
              background-repeat: no-repeat;
              width: your image width;
              height: your image height;
              }

              The parent element will need to have relative positioning to display properly and you'd likely want to style it differently depending on browser resolution using media queries.

              Hope this helps!
              -Ryan

              Comment


              • Thanks RTHOMASDESIGN (Ryan), I think I have other flag issues that may be blocking or preventing the display of the graphic. I haven't changed any of the flag CSS I dragged over except to add the graphic and try to adjust for it. I know the "transform: rotate(-45deg);" needs to go but I'm not sure about the rest of it.

                Code:
                .flag::before {
                    -moz-border-bottom-colors: none;
                    -moz-border-left-colors: none;
                    -moz-border-right-colors: none;
                    -moz-border-top-colors: none;
                    border-color: transparent;
                    border-image: none;
                    border-style: solid;
                    border-width: 0 0 110px 110px;
                    top: 0;
                    content: " ";
                    height: 0;
                    pointer-events: none;
                    position: absolute;
                    left: 0;
                    width: 0;
                    z-index: 10;
                }
                
                .product-image .flag--out_of_stock::before {
                    border-left-color: #dd293a;
                }
                
                .product-image .flag::before {
                
                    border-width: 0 0 200px 200px;
                
                }
                
                .flag--out_of_stock::before {
                    border-left-color: #dd293a;
                }
                *, *::before, *::after {
                    box-sizing: border-box;
                }
                .flag--out_of_stock::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    background-image: url(/images/out-of-stock.png);
                    background-repeat: no-repeat;
                    width: 233px;
                    height: 233px;
                }
                
                
                .flag::after {
                    top: 2.5rem;
                    color: #fff;
                    font-weight: 700;
                    font-size:20px;
                    position: absolute;
                    left: 1.5rem;
                transform: rotate(-45deg);
                    z-index: 11;
                }
                
                .product-image .flag::after {
                    top: 5rem;
                    left: 3rem;
                    font-size: 30px;
                }
                
                *, *::before, *::after {
                    box-sizing: border-box;
                }
                .flag {
                    display: block;
                    overflow: hidden;
                    position: relative;
                    transition: all 0.2s ease-in-out 0s;
                }
                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


                • LOL - okay it's getting closer - seems it's partly a path problem.
                  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


                  • Thanks RTHOMASDESIGN and Bruce - PhosphorMedia - I've got the graphic working
                    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


                    • RE: Paths in CSS....for the watchers...paths to resources in CSS are relative to the CSS file location.

                      https://css-tricks.com/quick-reminder-about-file-paths/
                      Bruce Golub
                      Phosphor Media - "Your Success is our Business"

                      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                      phosphormedia.com

                      Comment


                      • Happy to hear it! Haha, huzzah to early morning triumphs :)

                        -Ryan

                        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