Round label (Circle)

  • Resolved vpedrozo

    (@vpedrozo)


    2 years, 4 months ago

    Hi! Can I create fully round labels using this plugin? Just a circle with solid color and font in the middle? That’s the design I want for my website but I don’t see that option for this plugin. Here’s an image with an example of the labels I’m trying to create: https://ibb.co/BK4nkJf

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author ILLID

    (@mihail-barinov)

    Hi,

    So from the pre-defined list of plugin labels there is no circle label available.

    But you can try one one this two different solutions to make round labels:

    1. Open label edit page and enable ‘Set custom styles’ toggle. Then find ‘Custom css’ field and add inside it following styles:

    .awl-label-text {
border-radius: 50% !important;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
}

    2. Use ‘Image labels’ feature of the PRO plugin version. You can upload any image and use it as a label for your shop products.

    Thread Starter vpedrozo

    (@vpedrozo)

    Thank you! I was able to create the round label with your custom CSS code.

    One last question – can you provide the CSS to custom the font to the one I use on my site?

    I tried adding the font-family line to what you provided but it didn’t work :/ This is

    .awl-label-text {
    border-radius: 50% !important;
    width: 50px;
    height: 50px;
    font-family: “Roboto”, -apple-system, BlinkMacSystemFont, Arial, Helvetica, ‘Helvetica Neue’, Verdana, sans-serif;
    text-align: center;
    vertical-align: middle;
    }

    Plugin Author ILLID

    (@mihail-barinov)

    Well css looks good. Just please make sure that this font are loaded for your current page.

    Regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Round label (Circle)’ is closed to new replies.