• Hot
  • Top
  • New
4
votes

You have ... votes left in this category for this week!

approved

Custom image color filter

ihatelife shared this feature

July 18, 2019

I need 2 custom image for this color multi and pattern I hope you can add this feature soon. Example in the screenshot below.

feature attachments:

4 Comments

  1. Dave H.
    August 30, 2019 @ 1:36 pm

    Hi – it would be possible to implement this currently using CSS.

    Basically, you need to alter the CSS for whatever you call your ‘multi’ and use a background image instead of a solid colour.

    e.g. Create a new colour, give it a unique colour code and note that code down. Name the colour ‘Multi’ then add this CSS:


    .wpilabel.wpicolour[style="background-color:#012345"] {

    background-image:url(https://www.yourimage.com/image.png);

    background-repeat:no-repeat;

    background-size:cover;

    }

    Replace the background-color code above with whatever code you set for your ‘multi’ and the image url with whatever background image you’d like to use.

    Reply

  2. ihatelife ..
    August 30, 2019 @ 5:36 pm

    Thank you for the advice!

    In my case doesn’t work.

    Works using this instead:
    .fwwattributelink[title=”Pattern”] {
    background-image: url(https://www.yourimage.com/image.png);
    background-repeat: no-repeat;
    background-size: cover;
    }

    Reply

    • K T.
      August 30, 2019 @ 6:15 pm

      You can also use a linear gradient:

      background: linear-gradient(45deg,#f6c,#fff200 50%,#0fc);

      or
      background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

      or
      background: linear-gradient(to right, #fd3 25%, #5ad36c 25% 50%, #0f73ad 50% 75%, #f563b9 75% 100%)

      or
      background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

      Reply

      • ihatelife ..
        August 31, 2019 @ 2:05 am

        Wow, this is faster no image required. Thank you!

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

We use cookies

We use cookies for various things on our site, including our on-site chat bubble (if you use it), our comment forms (if you use them) and for session handling (if you log in).

Other than that, we use cookies to identify where traffic came from to help us understand which traffic turns into sales, we use a cookie for Google Analytics traffic analysis and we use a cookie to customise adverts for our own products we think you'll be interested in.

You can read more detail in our privacy policy page. Please click 'Accept' or 'Decline' to continue.