Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #1234376

    Hi I would like to create a custom icon or custom pattern to be more specific on one of the icons in your list. Can you help with that? The pattern I want is any element of this image http://www.bestwebdesignco.com/tagood/wp-content/uploads/2020/07/chain-header.png to be within each of the circles on the icon list section about midway down the page. I desperately need this to happen today (July 31, 2020) and I realize you are probably hours apart from me…but if you can make it happen in the next few hours I will be super grateful!

    #1234417

    First : is there a better – bigger – sharper Image of that?
    And what does this mean:

    Hi I would like to create a custom icon or custom pattern to be more specific on one of the icons in your list

    Aren’t there round source patterns on that? best would be svg

    #1234418

    Yes, how about this: http://www.bestwebdesignco.com/tagood/wp-content/uploads/2020/07/ARTWORK-CHAIN.ai_.png
    What I mean is on the home page here: http://www.bestwebdesignco.com/tagood/ if you scroll down to where it says “How we work” there is a list of items that I created using the “icon list” and I would like the icons to resemble the pattern in the above image (that long one above that you asked if there was a better resolution file) and so – i love the circles but if there is a way to fill the circle or create a button of some sort that is filled with the pattern that I just gave you that would make the client so much happier. I have a few other requests in the cue too. Would you like to just answer this one or should I send all of the questions in this thread?

    #1234420

    i see that the source of the png was an ai ( Adobe Illustrator) File – that would be best – if it is a vector based file ( sometimes images are embedded in ai docs)
    In this case we could make an icon-font like entypo-fontello on : http://fontello.com/

    #1234421
    #1234422

    i will see – and no panic it will work with png’s too:
    https://webers-testseite.de/tagood/

    #1234423

    So cool! So how in the world did you do that? Can you make those appear on my site that way? I’ll add my login credentials below!

    #1234424

    in the ai doc there are some vector datas – but the most patterns are embedded images.
    So here we go with png files: https://webers-testseite.de/tagood.zip

    • Give a custom class to your icon-list : tagood-icons
    • upload all the png files to your media library
    • put this to your quick css: ( if you like to colorize the icons as i do )
    • adjust the file path to yours
    .tagood-icons .avia-icon-list li .iconlist-char:before {
      content: "";
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center ;
      left:0;
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 50%
    }
    
    .tagood-icons .avia-icon-list li:nth-of-type(1) .iconlist-char:before {
      background-image: url(/wp-content/uploads/art01.png);
      background-color: red;
    }
    .tagood-icons .avia-icon-list li:nth-of-type(2) .iconlist-char:before {
      background-image: url(/wp-content/uploads/art02.png);
      background-color: blue;
    }
    .tagood-icons .avia-icon-list li:nth-of-type(3) .iconlist-char:before {
      background-image: url(/wp-content/uploads/art03.png);
      background-color: green;
    }
    .tagood-icons .avia-icon-list li:nth-of-type(4) .iconlist-char:before {
      background-image: url(/wp-content/uploads/art04.png);
      background-color: yellow;
    }
    .tagood-icons .avia-icon-list li:nth-of-type(5) .iconlist-char:before {
      background-image: url(/wp-content/uploads/art05.png);
      background-color: darkmagenta;
    }

    you see how this works : the first settings are the same for all icons – and then you count to your list items 1, 2, 3 etc
    if you colorize you had to set a border-radius for them too
    in the zip there are 6 files – but you can have more

    #1234425

    Edit : this must be done by a mod – because as a participant like you – I don’t see the private content messages. But I guess everything is so easily explained that you can do it yourself.

    The background color does not shine through with full intensity, because the png’s in the spaces between were not fully transparent.
    You could change this by increasing the contrast of the pngs before upload

    #1234430

    but if you can make it happen in the next few hours I will be super grateful!

    How much does your gratitude look like?
    If you want to do me a big favor, don’t vote for Trump ;)
    Best whishes to you all from Germany.

    Image

    #1234431

    Hahahaha! Trust me, I wouldn’t vote for him even if my life depended on it! Seriously, can you load it for me?

    #1234435
    This reply has been marked as private.
    #1234436

    I am only kidding – I am of course a proponent of democracy, and as such for universal, direct, free, equal and secret elections!
    ______
    As said before – i do not see private Content Area – if you could not manage it yourself – you had to wait til mods are here.
    Or you describe your problem with the description above.

    ______

    Under my nick there is a contact info about me. If you give me the datas via E-Mail i would install it for you – but it has to be admin account.

    #1234925

    To be honest, I really don’t understand it anymore.
    There is a call to hurry, it can’t go fast enough. It is clear that we could have easily made the appointment, but now there is no hurry anymore and I don’t get an answer anymore.
    Is that super grateful?
    I really don’t want any thanks, but at least the haste demanded at the beginning should then also find an equivalent from you.

    #1234936
    This reply has been marked as private.
    #1235246

    Hi,

    Sorry for the late reply! I hope your sister gets well soon!

    Would you like to use the same pattern on all icons under “HOW WE WORK” section? I have edited your Icon List element and gave it “tagood-icons” custom CSS class but since it is on your live site, I did not continue. We will be waiting for your confirmation.


    @guenni007
    thank you so much for your help! We are grateful and if there is anyone you would not like us to vote, please let us know :)

    Best regards,
    Yigit

    #1235250

    OMG! You guys are awesome – yes, I still need this done and if you can just use one of the balls on that design (see here https://www.tribeallgood.org/wp-content/uploads/2020/08/icon-ball-tag.png) and yes i am on the LIVE site now and so if you can create them and have them show up here on the home page under the Quick Links section (I have an icon list there) that’d be super https://www.tribeallgood.org

    I cannot thank you enough! My sister is still waiting on test results. For some reason they can’t do rapid tests where we live.

    #1235331

    Hi,

    I added the code @guenni007 shared earlier to bottom of Enfold theme options > General Styling > Quick CSS field and adjusted it a bit to display your background image.

    Please review your website :)

    Best regards,
    Yigit

    #1235340

    so this is done?

    #1235421

    Yes

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Icon List Custom Pattern’ is closed to new replies.