Introduction

Introducing WebLabelDialog (feat. Google Fonts and Icons) for Excel

Load Google Fonts and Icons into Dragable Psuedo HTML WebLabel Elements to use in Excel (32bit or 64bit, Version 16) · Build Beautiful, Modern UserForms for Excel

WebLabelDialog (feat. Google Fonts and Icons) is a modern interface created using a Bitmap image loaded directly into a UserForm Picture member together with tiny WebBrowser Controls that serve as HTML WebLabels/Psuedo Labels. This allows you to pull Google Fonts and Icons using any Font or Icon that you like for Text or Graphics for each WebLabel. It also means that these Fonts will follow the Excel Workbook as they will be dynamically downloaded wherever the Workbook goes or to whoever the Workbook is sent. WebLabelDialog (feat. Google Fonts) uses my minified Extensibility Class for Excel (redacted from my UserForm-Extensibility Class) to make some aspects of interactivity easier like adding a Hand Cursor to a UserForm or parts of a UserForm to be transparent and / or dragged by the Mouse. All of the Credits for Images are in the Download File together with links for Purchasing Vectors (where I have used Free or Pro licenses myself) to enable you to develop this Software further should you so wish

You are purchasing WebLabelDialog (feat. Google Fonts) v1.2 which includes a 400px Dialog and a 500px Dialog, the Extensibility Class and two '.BMP' Images. You also get a method using my Code to download and create Dialogs using any Google Fonts for your WebLabels/Psuedo Labels. You can also purchase forks of this Software #forks

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels using the default 'Comfortaa' Font on a '400px' Bitmap loaded directly into a UserForm

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels using the default 'Comfortaa' Font on a '400px' Bitmap loaded directly into a UserForm

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels, a slightly larger Title Font at '24px' using a mixture of Google Fonts including 'Indie Flower' on a '400px' Bitmap loaded directly into a UserForm

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels, a Google Favorite Icon and a Cursice Font called 'Courgette' on a '400px' Bitmap loaded directly into a UserForm

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels, a Google Settings Icon and on a '500px' Bitmap loaded directly into a UserForm

A fork of WebLabelDialog featuring Indie Flower - this is NOT included with this Project, please see the '#forks' section of this webpage for ordering

If you love WebLabelDialog (feat. Google Fonts), you may also like any of the following Software. Boho MP3 Player uses my UserForm Extensibility Software as the interface for all of its dialogs

Card · RetroDialog · DialogBox · LogoBox · Speech Bubbles · Info Bubble · Warning Msg · Info Msg · Question Msg · Error Msg · Userform Extensibility · Boho MP3 Player · Mint UserForm · Slate UserForm · Lightbox UserForm · Dark UI · Blue UI · Carbon UI · UserFOrm UI · BoX · Flat UI · UserForm Slider Buttons

Prerequisites

Microsoft Excel 2016 Version 16 (32bit or 64bit) · designed for Office 365 Windows 11
Basic to moderate Excel Skills and some basic VBA skills
Windows PC · NOT a Mac!
No support is provided for customization of this Software

Features

Google Fonts used are dynamically pulled, so that all of them will travel with your Workbook so your beautiful UserForms will always look the same as you designed them
Use Google Icons to display a variety of Icons in different sizes on your UserForm
Use HTML Tags like , and to apply Bold, Underline or Italic formatting to the WebLabels
Prime the WebLabelDialog using a method in the Workbook_Open() Subroutine, so as to pre-load the Controls with the HTML Markup to speed up loading time and screen rendering
Two styles of WebLable are included in this Software, a standard call to the '.CreateWebLabel' UserForm Subroutine will create the HTML Markup for a normal WebLabel and a call to '.CreateMouseOverWebLabel' will create a WebLabel with a Mouse over effect
Self.RemoveCaptionBordersAndSetTransparency - remove the Caption, Borders from a UserForm and sets the Transparency so that you can use a .BMP and make the White parts transparent in Excel. Using this extra invisible White part allows you some freedom when designing the Dialog as you can display the UserForm much bigger and this part will always be hidden
Self.AllowDrag - creates a draggable UI Interface, move the UserForm (or other Controls on the UserForm) around with the Mouse. For this Project I had to adjust slightly so as to enable the usage with the WebLabels/Psuedo Labels
Use with both Modal or Modeless UserForms
Use the Escape Key {ESC} to cancel a WebLabelDialog (using WebBrowser controls take away the standard method using the UserForm so this also needed to be adapted via the use of a DummyFocus Frame Control hidden within the UserForm)
Title, Message and two hoverable WebLabels/Psuedo Labels - Change the Font and Rollover Font Colours
Two isolated, extracted and manipulated Bitmaps that can be loaded directly into a UserForm
Irregular UserForm with their Captions or Titlebars removed and containing images using a special Transparency Colour, ie. White, RGB(255, 255, 255), to hide parts that should be transparent
A lovely Shaded 3D Border with the missing part set to White, RGB(255, 255, 255) so that the Transparency Key can be used to make them transparent when loaded into a UserForm
Use one of the MouseOver WebLabels as a Psuedo Close Cross
Looks great on any Colour Background in the Excel Workbook
Version 1.1 has an example of Priming the Workbook and then using Hide() as opposed to UnLoad. The WebLabels must still be created each time but the load will be faster as you are are simply showing and then hiding the UserForm. Also I have added a future Development, idea/improvement for the entire Project - see the 'Future Builds' section

Credits

WebLabelDialog (feat. Google Fonts and Icons) by Isroil Ibrahimov purchased under a Vecteezy Free license. You can view and purchase the file here. Single isolated image used as the Blank Interface and loaded as a Bitmap directly into the UserForm. Please note: the original Vector is NOT included with this Software, only modified 'lower' resolution parts are used for loading into the Excel UserForm

Retro Background for Excel bycarterart, downloaded under a Free License (one-size, reduced to a much 'lower' resolution image and embedded directly into the Excel Zip archive File, not for backward dissasembly). Please note: regardless of the license, no attempt should be made to extract this image. You can view and purchase the file here

Extensibility Class, UserForm Enabler for Interactivity by Mark Kubiszyn redacted from UserForm Extensibility for Excel

A WebLabelDialog (feat. Google Fonts) demonstrating how to use HTML Tags like , and to apply Bold, Underline or Italic formatting to the WebLabel. You can also change the Font Colour and the Background Colour of the WebLabels

A WebLabelDialog (feat. Google Fonts) demonstrating how to use HTML Tags like <b>, <u> and <i> to apply Bold, Underline or Italic formatting to the WebLabel. You can also change the Font Colour and the Background Colour of the WebLabels

A Success, WebLabelDialog1 (feat. Google Fonts and Icons) UserForm with a '400px' Bitmap, using a Font called 'Shadows into Light' and having a single 'Okay' Button

Installation

Right-click and extract the contents of the File WebLabelDialog.zip. Bitmaps are stored in the 'bmps' Folder. Open WebLabelDialog.xlsm and test the Examples

To use WebLabelDialog (feat. Google Fonts) in your own Projects open WebLabelDialog.xlsm and your own Macro-enabled Project. Then open the VBE (Visual Basic Editor) and drag the Extensibility Class and any of the UserForms into your Project. Add and configure any of the Example Code in the Examples Code Module to use each WebLabelDialog (feat. Google Fonts)

Take some time to examine how WebLabelDialog (feat. Google Fonts) works and read the 'Usage' Section in this online documentation before you begin to create your own WebLabelDialog (feat. Google Fonts) WebLabels/Psuedo Labels for Excel or before turning to Support

Usage

How to use WebLabelDialog (feat. Google Fonts)

What are WebLabelDialogs and How to Use them in Projects
WebLabelDialogs are Irregular UserForms with a beautiful Bitmap loaded directly into the UserForm, that have their Captions or Titlebars removed and contain a number of tiny WebBrowser Controls that act as Psuedo Labels, enabling you to pull Google Fonts and Icons down from Google to use in your UserForms. You can change the Font, Style, Weight and Colour of each WebLabel (the default Font is called 'Comfortaa' in '22pt'). You can have a MouseOver style of WebLabel. WebLabels allow the UserForm to be dismissed via the Escape '{ESC}' Key or via two specific WebLabels, the 'Okay' and 'Cancel' WebLabel. When calling the WebLabels there are two Subroutines, '.CreateWebLabel' and '.CreateMouseOverWebLabel', that you can use with Named Arguments so as to only specify the arguments that you want. To use WebLabelDialog (feat. Google Fonts) in your own Projects open RetroDialog.xlsm and your own Macro-enabled Project. Then open the VBE (Visual Basic Editor) and drag the Extensibility Class and any of the UserForms into your Project. Add and configure any of the Example Code in the Examples Code Module to use each WebLabelDialog

Default Font, Comfortaa, 400px: Example 1, Demonstration of the WebLabelDialog1 UserForm (feat. Google Fonts and Icons) Interface
The first example demonstrates the WebLabelDialog (feat. Google Fonts) interface using the default 'Comfortaa' Font. It asks the Question we all want to know! "Hello user. Are you a robot?". You can answer "Yes" or "No" with both Buttons simply closing the UserForm. For the first example dismissing the UserForm via the Escape '{ESC}' Key is switched off. We trap a repeated press on the Button used for the example by checking if the UserForm is visible - if it already is then we exit the Subroutine

To display the first WebLabelDialog UserForm in your own Excel Workbook simply use Code like this in any standard Code Module:

Public Sub Example1()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = False
      
      .CreateWebLabel WebLabel:=.Title, _
                      Text:="Question"
      
      .CreateWebLabel WebLabel:=.Message, _
                      Text:="Hello user.  Are you a robot?", _
                      FontSize:=20
      
      .CreateMouseOverWebLabel WebLabel:=.OkayButton, _
                               Text:="Yes", _
                               Tooltip:="Yes I am a robot!"
      
      .CreateMouseOverWebLabel WebLabel:=.CancelButton, _
                               Text:="No", _
                               Tooltip:="Definitely Not!"
      
      .Show 0
   
   End With
End Sub

Mixed Fonts Comfortaa + Indie Flower, 400px: Example 2, Demonstration of the WebLabelDialog1 UserForm (feat. Google Fonts and Icons) Interface
For the second example, I use mixed Fonts, where I add in the 'Indie Flower' Font for the Message and the MouseOver WebLabels like this:

Public Sub Example2()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = False
      
      .CreateWebLabel WebLabel:=.Title, _
                      Text:="Question", _
                      FontSize:=24
      
      .CreateWebLabel WebLabel:=.Message, _
                      Text:="Hello user.  Are you a robot?", _
                      FontFamily:="Indie+Flower:400", _
                      FontName:="Indie Flower", _
                      FontSize:=24
      
      .CreateMouseOverWebLabel WebLabel:=.OkayButton, _
                               Text:="Yes", _
                               Tooltip:="Yes I am a robot!", _
                               FontFamily:="Indie+Flower:400", _
                               FontName:="Indie Flower", _
                               FontSize:=24
      
      .CreateMouseOverWebLabel WebLabel:=.CancelButton, _
                               Text:="No", _
                               Tooltip:="Definitely Not!", _
                               FontFamily:="Indie+Flower:400", _
                               FontName:="Indie Flower", _
                               FontSize:=24
      
      .Show 0
   
   End With
End Sub

Mixed Font Weights, 400px + Escape {ESC}: Example 3, Demonstration of the WebLabelDialog1 UserForm (feat. Google Fonts and Icons) Interface
In Example 3 I switch on the ability to dismiss the UserForm via the Escape '{ESC}' Key and demonstrate the use of Font Weights displaying a lovely thin 'Rajdhani' Font but use a heavier '600' for the Title WebLabel so that it stands out. When using Font Weights you should include the number of Weights that you want to use as shown by the Code below (then you can choose which one or modify the Weight at a later time):

Public Sub Example3()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = True
      
      .CreateWebLabel WebLabel:=.Title, _
                      Text:="Question", _
                      FontFamily:="Rajdhani:wght@400;600&display=swap", _
                      FontName:="Rajdhani, sans-serif", _
                      FontSize:=24, _
                      FontWeight:=600
      
      .CreateWebLabel WebLabel:=.Message, _
                      Text:="Hello user.  Are you a robot?", _
                      FontFamily:="Rajdhani&display=swap", _
                      FontName:="Rajdhani, sans-serif", _
                      FontSize:=24
      
      .CreateMouseOverWebLabel WebLabel:=.OkayButton, _
                               Text:="Yes", _
                               Tooltip:="Yes I am a robot!", _
                               FontFamily:="Rajdhani&display=swap", _
                               FontName:="Rajdhani, sans-serif", _
                               FontSize:=24
      
      .CreateMouseOverWebLabel WebLabel:=.CancelButton, _
                               Text:="No", _
                               Tooltip:="Definitely Not!", _
                               FontFamily:="Rajdhani&display=swap", _
                               FontName:="Rajdhani, sans-serif", _
                               FontSize:=24
      
      .Show 0
   
   End With
End Sub

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels, a slightly larger Title Font at '24px' using a mixture of Google Font Weights with the Font 'Rajdhani' on a '400px' Bitmap loaded directly into a UserForm

Icon, 400px + Escape {ESC}: Example 4, Demonstration of the WebLabelDialog1 UserForm (feat. Google Fonts and Icons) Interface
For example 4, I again allow the use of the Escape '{ESC}' Key to dismiss the Dialog and also demonstrate how to use a Google Icon on the UserForm via the Message WebLabel. When choosing a Google Icon there are loads to pick from and you have to pass the Name into the Text member of the Subroutine like this 'Text:="favorite"' with the Name for the Heart being 'Favorite'. You also need to pass in slightly different Markup for the FontFamily member of the Subroutine like this 'FontFamily:="Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"'. You can get this all from Google Fonts and Icons online and I give the links in the Project. I then also switch things up a little by using another Cursive Google Font called 'Courgette' which kinda makes it all look lovely. To do this you can use Code like this:

Public Sub Example4()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = True
      
      .CreateWebLabel WebLabel:=.Title, _
                      Text:="Do you love me?", _
                      FontFamily:="Courgette&display=swap", _
                      FontName:="Courgette, cursive", _
                      FontSize:=24, _
                      FontWeight:=600
      
      .CreateWebLabel WebLabel:=.Message, _
                      Text:="<span style=""font-size: 64px;"" class=""material-symbols-outlined"">favorite</span>", _
                      FontFamily:="Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
      
      .CreateMouseOverWebLabel WebLabel:=.OkayButton, _
                               Text:="Yes", _
                               Tooltip:="Yes I love you!", _
                               FontFamily:="Courgette&display=swap", _
                               FontName:="Courgette, cursive", _
                               FontSize:=24
      
      .CreateMouseOverWebLabel WebLabel:=.CancelButton, _
                               Text:="No", _
                               Tooltip:="Definitely Not!", _
                               FontFamily:="Courgette&display=swap", _
                               FontName:="Courgette, cursive", _
                               FontSize:=24
      
      .Show 0
   
   End With
End Sub

Changing Label Colour & Formatting, 400px: Example 5, Demonstration of the WebLabelDialog1 UserForm (feat. Google Fonts and Icons) Interface
In example 5, I demonstrate how to use HTML Tags like , and to apply Bold, Underline or Italic formatting to the WebLabels. I also show you how easy it is to change the Font and Background Colours of the WebLabels using Code like this:

Public Sub Example5()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = False
      
      .Title.Width = 124: .Title.Height = 24
      .CreateWebLabel WebLabel:=.Title, _
                      Text:="<u>Font</u> Colours", _
                      FontColour:="#109C9A", _
                      BackgroundColour:="#E5E5E5"
      
      .CreateWebLabel WebLabel:=.Message, _
                      Text:="Hello user.  <i>Are you a robot?</i>", _
                      FontSize:=20, _
                      FontColour:="#DDD5B4"
      
      .CreateMouseOverWebLabel WebLabel:=.OkayButton, _
                               Text:="<u>Yes</u>", _
                               Tooltip:="Yes I am a robot!"
      
      .CreateMouseOverWebLabel WebLabel:=.CancelButton, _
                               Text:="No", _
                               Tooltip:="Definitely Not!"
      
      .Show 0
   
   End With
End Sub

Capturing Return Values: Example 6, Demonstration of the WebLabelDialog1 UserForm (feat. Google Fonts and Icons) Interface
In example 6, I demonstrate using a Modal Dialog and a Public vbMsgBoxResult Variable to capture the return value of the WebLabelDialog. You can capture the return value by examining the Variable for 'vbOK', 'vbCancel' and 'vbAbort' - you can change these if you like so you could use 'vbOkay' for example. Use the following Code to capture the return values:

Option Explicit

Public ReturnValue As VbMsgBoxResult

Public Sub Example6()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = True
      
      .CreateWebLabel WebLabel:=.Title, _
                      Text:="Return values"
      
      .CreateWebLabel WebLabel:=.Message, _
                      Text:="Are you a robot? {ESC} to exit...", _
                      FontSize:=20
      
      .CreateMouseOverWebLabel WebLabel:=.OkayButton, _
                               Text:="Yes", _
                               Tooltip:="Yes I am a robot!"
      
      .CreateMouseOverWebLabel WebLabel:=.CancelButton, _
                               Text:="No", _
                               Tooltip:="Definitely Not!"
      
      .Show 1
   
   End With
   
   ' check the return value
   Select Case ReturnValue
   Case vbOK
      MsgBox "The user pressed Yes", vbInformation, ThisWorkbook.Name
   Case vbCancel
      MsgBox "The user pressed No", vbInformation, ThisWorkbook.Name
   Case vbAbort
      MsgBox "The user pressed Escape {ESC}", vbInformation, ThisWorkbook.Name
   End Select
 
End Sub

Smaller Fonts, Icon and a Larger Dialog, 500px: Example 7, Demonstration of the WebLabelDialog1 UserForm (feat. Google Fonts and Icons) Interface
In example 7, I demonstrate the larger '500px' WebLabelDialog UserForm. Here you have more room to use another WebLabel called 'Icon' so that you can have a Title, Icon, Message and two MouseOver WebLabels all on the single UserForm. I use the Font called 'Rajdhani' whihc is a sans-serif Font. This is a narrow, thin Font that looks pretty sweet together with the UserForm Bitmap design

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels, a Google Settings Icon and on a '500px' Bitmap loaded directly into a UserForm

Capturing Return Values
Okay so to capture return values of the two WebLabels, Okay and Cancel you can use a Modal Dialog together with a Public Variable 'ReturnValue' which will return either 'vbAbort' (default and used for the Escape '{ESC}' Key, 'vbOK' for the OkayWebLabel, typically used for "Yes" or "OK", and 'vbCancel' for the OkayWebLabel, typically used for "No" or "Cancel". To do this you can use Code like this:

Public Sub Example6()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = True
      
      .CreateWebLabel WebLabel:=.Title, _
                      Text:="Question"
      
      .CreateWebLabel WebLabel:=.Message, _
                      Text:="Hello user.  Are you a robot?", _
                      FontSize:=20
      
      .CreateMouseOverWebLabel WebLabel:=.OkayButton, _
                               Text:="Yes", _
                               Tooltip:="Yes I am a robot!"
      
      .CreateMouseOverWebLabel WebLabel:=.CancelButton, _
                               Text:="No", _
                               Tooltip:="Definitely Not!"
      
      .Show 1
   
   End With
   
   ' check the return value
   Select Case ReturnValue
    Case vbOK
       MsgBox "The user pressed Yes", vbInformation, ThisWorkbook.Name
    Case vbCancel
       MsgBox "The user pressed No", vbInformation, ThisWorkbook.Name
    Case vbAbort
       MsgBox "The user pressed Escape {ESC}", vbInformation, ThisWorkbook.Name
   End Select
 
End Sub

Cursive Font, Single Button, 400px: Example 8, Demonstration of the WebLabelDialog1 UserForm (feat. Google Fonts and Icons) Interface
In example 8, I demonstrate a Cursive Font alled 'Shaodws into Light' on a '400px' WebLabelDialog UserForm. I only allow a single Button to be visible and use Code to make the CancelButton invisible. I also show you how to pass Parameters without using the Named Arguments - this is a much more condensed method as you can see from the Code below:

Public Sub Example8()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
         .WebLabelDragCopyState = True
         .EscapeKeyState = True
         .CreateWebLabel .Title, "Success!", 20, , , "Shadows+Into+Light&display=swap", "Shadows Into Light, cursive"
         .CreateWebLabel .Message, "The change was made to the Worksheet", 20, , , "Shadows+Into+Light&display=swap", "Shadows Into Light, cursive"
         .CreateMouseOverWebLabel .OkayButton, "Okay", 20, , , "Shadows+Into+Light&display=swap", "Shadows Into Light, cursive", , "Okay, close the dialog"
         .CancelButton.Visible = False
         .CreateMouseOverWebLabel .CancelButton, "Okay", 20, , , "Shadows+Into+Light&display=swap", "Shadows Into Light, cursive", , "Okay, close the dialog"
      .Show 0
   End With
End Sub

Priming the WebLabelDialog
When the Workbook opens, Code will run that 'primes' the WebLabelDialog1 UserForm, loading the HTML WebLabels, navigating to their respective Pages (HTML Markup runs) and then exits, terminating the Extensibility Class. This in effect should speed up any Font loads, kind of like a Font 'pre-load'. I have added an Error skip here and you can simply comment out if not required. When using this technique, you should ideally set the Font Family and Font Name in the Optional Paramaters to the same Font Family and Font Name that you will be using for the HTML WebLabel elements - this will mean that you should have an almost instant rendering of your Font

Extensibility Class
The Extensibility Class is required for WebLabelDialog to remove the Caption and Borders from a UserForm. It also allows the White colour to become transparent so that you can use irregular Window Sizes for the UserForm via a '.BMP' (Bitmap) image. It allows a number of simple ways to extend your UserForms, for example to make them (or any Control) draggable use the following Code:

Option Explicit

Private Self As New Extensibility

' UserForm
Private Sub UserForm_Initialize()
   Set Self.Assign = Me
End Sub

Private Sub UserForm_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   Self.AllowDrag
End Sub

To show a hand Cursor use the following Code:

Option Explicit

Private Self As New Extensibility

' UserForm
Private Sub UserForm_Initialize()
   Set Self.Assign = Me
End Sub

Private Sub Close_Cross_Active_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   Self.AddCursor IDC_HAND
End Sub

To remove the Caption, Borders and allow Transparency of White (a Long Colour Code) use the following Code:

Option Explicit

Private Self As New Extensibility

' UserForm
Private Sub UserForm_Initialize()
   Set Self.Assign = Me
   Self.RemoveCaptionBordersAndSetTransparency 16777215  
End Sub

Modal or Modeless?
To change a WebLabelDialog from a Modeless UserForm to a Modal UserFrom simply change the zero (0) after the Code '.Show' to a 1 like this:

Public Sub Example1()
   With WebLabelDialog1
      If .Visible = True Then Exit Sub
      
      .WebLabelDragCopyState = True
      .EscapeKeyState = False
      
      .CreateWebLabel WebLabel:=.Title, _
                      Text:="Question"
      
      .CreateWebLabel WebLabel:=.Message, _
                      Text:="Hello user.  Are you a robot?", _
                      FontSize:=20
      
      .CreateMouseOverWebLabel WebLabel:=.OkayButton, _
                               Text:="Yes", _
                               Tooltip:="Yes I am a robot!"
      
      .CreateMouseOverWebLabel WebLabel:=.CancelButton, _
                               Text:="No", _
                               Tooltip:="Definitely Not!"
      
      .Show 1
   
   End With
End Sub

Image Processes - The WebLabelDialog (feat. Google Fonts and Icons) Method
The WebLabelDialog (feat. Google Fonts) uses images loaded directly into the UserForm for the main Dialog interface. First of all I downloaded the original Vector used for this Project - see the links in the Introduction and/or Credits sections. Then I isolated the Image I needed (the first Card in the Vector design) using Affinity Designer (my go-to image manipulation tool), you can also use PhotoShop. I added a nice 3D Grey Border. I then Exported out the image as a transparent PNG at 400px and 500px From here, I opened both images in Photoshop and carefully made a single pixel Border for the Frame and then saved them both out as a BMP's (Bitmaps). Then I loaded each of the two images one at a time directly into the Picture member of the UserForms

Image Processes - Loading in a Bitmap to a UserForm or Control
An easy way of getting an image into a UserForm or one of its Controls is to load a transparent '.GIF' or '.BMP' (Bitmap) image directly. Use the 'Picture' member to Browse and load the File. You can create a transparent 'GIF' directly from an art package such as Affinity Designer. To create a Bitmap you can use Photoshop to take any Transparent Image saved as a '.PNG' and convert it by using 'Save As' into a Bitmap, choose Format 'BMP (*.BMP;*.RLE;*.DIB)', File Format 'Windows' and Depth '24 Bit'. Where you need to have the Background Colour a different Colour from standard White '255, 255, 255' for your Bitmap, because for example you are using White as the Transparent Colour, which would cause holes in your image, then use the Paint Bucket Tool, selecting an alternative Colour by entering the RGB Values ie. '254, 254, 254' together with settings, Opacity '100%', Tolerance '30' and tick the Anti Alias checkbox

Image Processes - Loading in a Transparent PNG to a UserForm or Control
A trick I use all of the time is to use my Free ImageTransparency.xlsm Software to load in a Transparent '.PNG' File into a UserForm or one of its Controls - you can download this free here. This technique allows you to load any PNG and then Paste it into the Picture member of the UserForm or Control. You MUST set the background Colour 'BackColor' of the UserForm or Control in the single UserForm within the ImageTransparency.xlsm File first and this should be a VB Hex Colour - use a great Tool like 'InstantEyeDropper' to do this, it's free and can be downloaded from here. Now press the 'Copy to Clipboard' Button in the ImageTransparency.xlsm Software to Browse and load in the PNG File. Switch to Excel and Paste into the Picture member. The PNG image will now be added to the UserForm or Control and the Transparent Colour will be replaced by the VB Hex Colour that you used for the BackColor of the UserFrom or Control

Image Processes - Another Method to Load an Image into a Control
You can load in a transparent 'PNG' image into Affinity and add a Layer that is a Rectangle and set it to the background Colour you want it to have once it is loaded ie. White for the transparency. Export out that image as a '.PNG' image again. Now load it into Photoshop and Save it as a '.BMP' image. Finally load this Bitmap directly into any Image Control and it will sit ontop of the background and appear to blend in perfectly

Screen Shots

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels using the default 'Comfortaa' Font on a '400px' Bitmap loaded directly into a UserForm

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels, a slightly larger Title Font at '24px' using a mixture of Google Fonts includinig 'Indie Flower' on a '400px' Bitmap loaded directly into a UserForm

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels using a mixture of Google Font Weights with the Font 'Rajdhani' at '24px' on a '400px' Bitmap loaded directly into a UserForm

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels, a Google Favorite Icon and a Cursice Font called 'Courgette' on a '400px' Bitmap loaded directly into a UserForm

A WebLabelDialog (feat. Google Fonts) demonstrating how to use HTML Tags like , and to apply Bold, Underline or Italic formatting to the WebLabel. You can also change the Font Colour and the Background Colour of the WebLabels

A WebLabelDialog (feat. Google Fonts) with 2 WebLabel/Psuedo Labels, a Google Settings Icon and on a '500px' Bitmap loaded directly into a UserForm

WebLabelDialog1 (feat. Google Fonts and Icons) UserForm with a '400px' Bitmap loaded directly into the UserForm Picture member

WebLabelDialog2 (feat. Google Fonts and Icons) UserForm with a '400px' Bitmap loaded directly into the UserForm Picture member

WebLabelDialog2 (feat. Google Fonts and Icons) UserForm with a '500px' Bitmap and extra Icon WebLabel loaded directly into the UserForm Picture member

A Success, WebLabelDialog1 (feat. Google Fonts and Icons) UserForm with a '400px' Bitmap, using a Font called 'Shadows into Light' and having a single 'Okay' Button

A Question, WebLabelDialog1 (feat. Google Fonts and Icons) UserForm with a WebLabel acting as a Close Cross

A fork of WebLabelDialog, #fork1 - this is NOT included with this Project, please see the '#forks' section of this webpage for ordering

A fork of WebLabelDialog - this is NOT included with this Project, please see the '#forks' section of this webpage for ordering

A fork of WebLabelDialog, #fork2 - this is NOT included with this Project, please see the '#forks' section of this webpage for ordering

FAQ

* There are currently no FAQ for WebLabelDialog

WebLabelDialog (feat. Google Fonts) Videos

This is a video of the WebLabelDialog Software. Music is 'Hallow's Beach - Quincas Moreira'. View this video on YouTube or view the YouTube Short

Other forked videos are also available:
WebLabelDialog-fork1
WebLabelDialog-fork2

Support

Please remember you have purchased very affordable Software and you have not paid for a full-time Software design agency - I am but one man. Occasionally I may help with small tweaks, but these requests will be put on a much lower priority due to their nature. You have not PAID for Support, Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support (limited) for my Software includes

Responding to questions or problems regarding the Software and its features
Fixing valid (replicated) bugs and reported issues for the VERSION I HAVE WRITTEN

Software support does not include

Customization and installation services
Support for third party software or ANY kind of development whatsoever

Before seeking support

Make sure your question is a valid Software Issue and not a customization request
Make sure you have read through the FAQ's, online documentation and any related video guides before asking support on how to accomplish a task
Ensure that you access to the VBOM is allowed and that Macros can run in Excel
Make sure to provide 'proof of purchase' and state the name / version of the Software that you are having issues with when requesting support by Email or via Facebook

How to get Support

Contact Mark Kubiszyn on the Email address provided when you purchased the Software, including the Order Number
...or Contact Mark Kubiszyn via our Facebook Page - remember to be patient, if there has been an issue with your download, Mark will always respond within 48 hours and will Email you the File directly if neccessary or via Messenger. For other issues the response time may be considerably longer and I may choose to respond to specific questions only (as is my right), depending on what has been asked

Future Builds

* You could hard-code the WebLabels to be created each UserForm Activation. You would need some type of interface for the Code to pickup the HTML Markup settings though, so perhaps an Init() Subroutine to do this and then the WebLabels would simply read from the Property/Properties. Potentially then, any WebLabel with Markup already rendered would remain and you could, for example, say just update the Message instead of all of the WebLabels each time you Show the UserForm

Bug Fixes

* There are currently no bugs identified for WebLabelDialog

Credits

Credits, Attributions & Licensing

#forks

Additional forks of WebLabelDialog

fork#1

A fork by Mark Kubiszyn, using a Vector by Anik Das, downloaded under a Free License (one-size, reduced to a much 'lower' resolution image and embedded directly into the Excel Zip archive File, not for backward dissasembly). Please note: regardless of the license, no attempt should be made to extract this image. You can view and purchase the file here

Purchase · £2.99

fork#2

A fork by Mark Kubiszyn, featuring the Indie Flower Font, using a Vector by Anik Das, downloaded under a Free License (one-size, reduced to a much 'lower' resolution image and embedded directly into the Excel Zip archive File, not for backward dissasembly). Please note: regardless of the license, no attempt should be made to extract this image. You can view and purchase the file here

Purchase · £2.99

A fork of WebLabelDialog featuring Indie Flower as the main Font

A fork of WebLabelDialog with an Inspirational Quote

Changelog

Read more information on the status of each release below. The latest Version including a description of any changes is shown first


24.03.2023 - (Version 1.2)

Parts of the HTML Markup on each WebLabelDialog that read in the Image Control Name as the Name for the '<div id' was missing 2 quotation marks (1 each side of the Variable) so I have adjusted this
Added a new Demo, an Inspirational Quote in a smaller 'Rajdhani' Font with mixed weights


21.03.2023 - (Version 1.1)

Tests on 'Priming' the WebLabelDialog so that the HTML Tags are pre-loaded when the Workbook opens, indicates that the Class is never destroyed unless the Dialog is set to '.Show' which makes sense, therefore I have added a Subroutine called SelfTerminate() that will stop the Class using the 'End' command. This way we can now effectively prime our WebLabels

Added another Font example, using smaller Fonts on the '400px' WebLabel Dialog. Added another example of how to use one of the WebLabels as a psuedo Close Cross

Added an example of Priming the Workbook and then using Hide() as opposed to UnLoad. The WebLabels must still be created each time but the load will be faster as you are are simply showing and then hiding the UserForm. Also added a future Development, idea/improvement for the entire Project - see the 'Future Builds' section

Tidied up any incorrect Text on the main Worksheet


20.03.2023 - (Version 1)

General release of WebLabelDialog