-
AuthorPosts
-
July 31, 2020 at 2:38 pm #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!
July 31, 2020 at 7:14 pm #1234417First : 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
July 31, 2020 at 7:22 pm #1234418Yes, 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?July 31, 2020 at 7:36 pm #1234420i 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/July 31, 2020 at 7:52 pm #1234421here is the ai file: http://www.sylwilsonmarketing.com/ai/
July 31, 2020 at 8:16 pm #1234422i will see – and no panic it will work with png’s too:
https://webers-testseite.de/tagood/July 31, 2020 at 8:18 pm #1234423So 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!
July 31, 2020 at 8:26 pm #1234424in 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 moreJuly 31, 2020 at 8:34 pm #1234425Edit : 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 uploadJuly 31, 2020 at 10:07 pm #1234430but 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.July 31, 2020 at 10:09 pm #1234431Hahahaha! Trust me, I wouldn’t vote for him even if my life depended on it! Seriously, can you load it for me?
July 31, 2020 at 10:48 pm #1234435This reply has been marked as private.July 31, 2020 at 11:20 pm #1234436I 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.
August 3, 2020 at 7:10 pm #1234925To 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.August 3, 2020 at 8:08 pm #1234936This reply has been marked as private.August 4, 2020 at 11:39 pm #1235246Hi,
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,
YigitAugust 5, 2020 at 12:05 am #1235250OMG! 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.
August 5, 2020 at 8:04 am #1235331Hi,
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,
YigitAugust 5, 2020 at 8:57 am #1235340so this is done?
August 5, 2020 at 2:08 pm #1235421 -
AuthorPosts
- The topic ‘Icon List Custom Pattern’ is closed to new replies.