Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 27, 2022 at 5:09 pm #1346216
    navindesigns

    on my site – http://balrajt9.sg-host.com/ – I have 4 columns with animated numbers

    Is is possible to change the circle border to look more like this mockup – https://ibb.co/NCJ8cLy

    Either through css or an image for just the circle border

    Thanks in advance

    March 27, 2022 at 7:20 pm #1346223
    Mike

    Hey navindesigns,
    Thanks for the mockup, try this css in your Quick CSS

    #av_section_1 .avia-animated-number .avia-animated-number-circle-inner {
    border: 2px solid #007da5;
    border-radius: 50%;
}
#av_section_1 .avia-animated-number .avia-animated-number-circle:after {
  display: block;
  border: 2px solid #969696;
  width: 100%;
  border-radius: 50%;
  transform: translateX(-6%);
}

    this is the expected results
    2022-03-27_007.jpg

    Best regards,
    Mike

    March 27, 2022 at 7:31 pm #1346224
    navindesigns

    wow, you are amazing!

    Would you be able to help do the same thing to this section – https://ibb.co/MN9qM8t – I am using the icon box there with the icons at the top of the block

    here is the mockup of what it should look like
    mockup. – https://ibb.co/Xxs48V3

    March 27, 2022 at 8:11 pm #1346229
    Mike

    Hi,
    Sorry, not that one.

    Best regards,
    Mike

    March 27, 2022 at 8:15 pm #1346231
    navindesigns

    No I meant, can you help me change that one as well or do I need to open a new ticket?

    March 27, 2022 at 8:58 pm #1346233
    Mike

    Hi,
    For that one you will need to create a transparent image of the icon with the rings around it and then use it to replace the icon with css.
    For example imagine this as your image, but with a transparent background
    2022-03-27_009.jpg
    then you wouls use this css with the url to your image:

    #main .iconbox .iconbox_icon {
	background: url(https://savvyify.com/img/images/2022/03/27/2022-03-27_009.jpg);
	height: 60px;
	width: 60px;
	font-size: 0px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	border: none;
	background-position: center 11px;
}

    then the result would be:
    2022-03-27_010.jpg

    Best regards,
    Mike

    March 27, 2022 at 9:04 pm #1346234
    navindesigns

    ok for each icon/block, i can add a class under the “developer settings”?

    March 27, 2022 at 9:16 pm #1346235
    navindesigns

    I have updated the images but I dont know how to apply the different images to the other two icon boxes

    Home

    • This reply was modified 2 years, 9 months ago by navindesigns.
    March 27, 2022 at 9:16 pm #1346237
    Mike

    Hi,
    yes

    Best regards,
    Mike

    March 27, 2022 at 9:20 pm #1346238
    navindesigns

    It is not working

    here is my code for the first icon with my custom class “whaticon01”

    #main .iconbox .iconbox_icon .whaticon01 {
    background: url(http://balrajt9.sg-host.com/wp-content/uploads/2022/03/whaticon01-1.png);
    height: 60px;
    width: 60px;
    font-size: 0px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    background-position: center 11px;
    }

    March 27, 2022 at 9:34 pm #1346240
    Mike

    Hi,
    Try this:

    #main .iconbox.whaticon01 .iconbox_icon {
background: url(https://balrajt9.sg-host.com/wp-content/uploads/2022/03/whaticon01-1.png);
height: 60px;
width: 60px;
font-size: 0px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
border: none;
background-position: center 11px;
}

    Best regards,
    Mike

    March 27, 2022 at 10:34 pm #1346241
    navindesigns

    worked perfect

    thanks for your amazing support

    March 27, 2022 at 11:33 pm #1346243
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Change animated numbers circle border’ is closed to new replies.