Pop

The CSS Styles() Function Parameter is the most powerful feature of Pop. It allows a massive string of HTML Tags to be passed to set any number of Settings for Pop Boxes. It has a defined Format which must be strictly adhered to. This feature gives you so much flexibility over what you want to design that would not be possible without writing lots of Code or storing lots of Settings in variables

The Parameter must be set first, then the Element (or Pop Box) Name, then the Property / Value pair. A Colon ':' is used to separate a Property / Value pair, with a Comma ',' separating each set of Property / Value pairs. Any pair must also be wrapped up tightly using a set of Braces '{', '}' and apostrophe's. Here is the Code to set the Font Type, Family, Top and Left position of a Message Pop Box:

Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'35px','left':'20px'}"
                            

What happens when you want to set more than one Pop Box? Well you simply combine the Property / Value pairs using the Pipe '|' character like this - this Code also sets an Icon Pop Box Left and Top position:

Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'35px','left':'20px'} | 'icon-box', {'left':'245px','top':'20px'}"
                            

Or like this to view in a nice line-by-line basis - much neater and clearer:

Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'35px','left':'20px'} | " _
      & "'icon-box', 	{'left':'245px','top':'20px'}"
                            

Any errors will simply break the Code giving a JavaScript error in the WebBrowser Control - you may need to Reset the VBA in the VBA Editor, to stop the Code completely

All valid Tags can be used to Style the Pop Boxes but some things may need doing via the CSS PsuedoStyles() Parameter

Here is a list of some of the most common things you can change - Please Note: this list is not exhaustive and some features may not be available to use in the IE7 WebBrowser Control:

The HTML style attribute has the following syntax which is used to pass in Pop CSS Styles() using JavaScript:
<tagname style="property:value;">


font-family				family-name	Arial, Tahoma	generic-family	serif, sans-serif
font-size				(pt), (px), (percent)		pt is Point, i.e. 12pt. px is Pixel, i.e. 20px.
font-size-adjust		(number), none, inherit	
fontetch				normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit	
font-style				normal, italic, oblique	
font-variant			normal, small-caps	
font-weight				normal, bold, bolder, lighter, (number), xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller	Number can be 100, 200, 300, 400, 500, 600, 700, 800, or 900.
font					Any of the above values separated by spaces.	{font: tahoma 12pt oblique bold}
letter-spacing			normal, 1em	1em, 2em, and so on.
text-align				left, right, center, justify	
text-decoration			none, underline, overline, line-through, blink	
text-shadow				none, color length length length, inherit	
text-transform			none, capitalize, uppercase, lowercase	
text-indent				(length), (percent)	Length is in pixels.
word-spacing			normal, 1em	1em, 2em, and so on.
background-attachment	scroll, fixed	
background-color		(color), transparent	Color is in hex code.
background-image		none, (location)	
background-position		(percent), (length), top, center, bottom, left, center, right	
background-repeat		repeat, repeat-x, repeat-y, no-repeat	
background				Any of the above background values separated by spaces.	{background: URL(back.gif) repeat fixed}
color					(color)	Color is in hex code. This refers to the foreground color.
margin-bottom			(length), (percent), auto	Length is in pixels.
margin-left				(length), (percent), auto	Length is in pixels.
margin-right			(length), (percent), auto	Length is in pixels.
margin-top				(length), (percent), auto	Length is in pixels.
margin					Any of the above margin values in top, right, bottom, left order separated by spaces.	{margin: 5px 2px 5px 3px}
			            - When only one value is present, all margins are affected.
padding-bottom			(length), (percent)	Length is in pixels.
padding-left			(length), (percent)	Length is in pixels.
padding-right			(length), (percent)	Length is in pixels.
padding-top				(length), (percent)	Length is in pixels.
padding					Any of the above padding values in top, right, bottom, left order separated by spaces.	{padding: 5em 6em 3em 6em}
					    - When only one value is present, all sides are affected.
border-bottom-width		medium, thin, thick, (length)	Length is in pixels.
border-bottom			Any of the border-top-bottom, border-color and border-style values.	{border-bottom: thin inset blue}
border-color			(color)	Color is in hex code.
border-left-width		medium, thin, thick, (length)	Length is in pixels.
border-left				Any of the border-top-left, border-color and border-style values.	{border-left: thick inset green}
border-right-width		medium, thin, thick, (length)	Length is in pixels.
border-right			Any of the border-right-width, border-color and border-style values.	{border-right: thin inset blue}
border-style			none, dotted, dashed, solid, double, groove, ridge, inset, outset	
border-top-width		medium, thin, thick, (length)	Length is in pixels.
border-top				Any of the border-top-width, border-color and border-style values.	{border-top: thin inset red}
border					Any of the border values. Applies to all borders.	{border: medium blue}
height					auto, (length), (percent)	Length is in pixels.
width					auto, (length), (percent)	Length is in pixels.
list-style-type			disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroh, none	
list-style-image		none, (url)	
list-style-position		outside, inside	
list-style				Any of the above list-style values separated by spaces.	{list-style: disc inside}
white-space				normal, pre, nowrap	
clip					auto, (shape)	Currently, the only valid shape is "rect(top,right,bottom,left)".
cursor					auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help	
outline-width			medium, thin, thick, (length), inherit	
outline-style			none, dotted, dashed, solid, double, groove, ridge, inset, outset	
outline-color			(color), invert, inherit	
outline					Any of the above outline values separated by spaces.	{outline: dotted thick}
overflow				visible, hidden, scroll, auto	
visibility				inherit, visible, hidden	
content					(string), (uri), (counter), attr(X), open-quote, close-quote, no-open-quote, no-close-quote, inherit	Used with the :before, :after pseudo-elements.
counter-reset			(identifier) (integer), none , inherit	Used with the counter() and counters() functions of the content property.
counter-increment		(identifier) (integer), none , inherit	Used with the counter() and counters() functions of the content property.
marker-offset			(length), auto, inherit	
quotes					(string)(string) or more, inherit	
bottom					auto, inherit, (length), (percent)	Length is in pixels.
clear					none, left, right, both, inherit	
direction				ltr, rtl, inherit	ltr - Left-to-Right
				     	- rtl - Right-to-Left
display					inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit	
float					none, left, right, inherit	
height					auto, inherit, (length), (percent)	Length is in pixels.
line-height				normal, (length), (percent)	Length is in pixels.
left					auto, inherit, (length), (percent)	Length is in pixels.
max-height				none, inherit, (length), (percent)	Length is in pixels.
max-width				none, inherit, (length), (percent)	Length is in pixels.
min-height				inherit, (length), (percent)	Length is in pixels.
min-width				inherit, (length), (percent)	Length is in pixels.
position				static, absolute, relative, fixed, inherit	
right					auto, inherit, (length), (percent)	Length is in pixels.
top					    auto, inherit, (length), (percent)	Length is in pixels.
unicode-bidi			normal, embed, bidi-override, inherit	Length is in pixels.
vertical-align			baseline, sub, super, top, text-top, middle, bottom, text-bottom, (percent)	
z-index					auto, inherit, (integer)	
border-collapse			collapse, separate, inherit	
border-spacing			(length)(length), inherit	
caption-side			top, bottom, left, right, inherit	
empty-cells				show, hide, inherit	
speak-header			once, always, inherit	
table-layout			auto, fixed, inherit
                            

Okay, so we have the powerful CSS Styles() Function, but what about any shortfalls that the IE7 WebBrowser Control cannot cope with? Well these are all covered of by the PsuedoStyles() Function

These include things like the Mouse Hover events for a Link Pop Box or both of the Button Pop Boxes, so Background Colours, Foreground Colours, Tooltips etc.

The Psudeo Styles are switched on using the PsuedoStyles() Parameter, passing a pipe and comma-delimited list of Named Arguements that can be interpreted by the VBA Code to make the neccessary adjustments to the HTML/Javascript Markup. The Named Arguement must come first ie. 'ok-rollover-background' and then the value for the Named Arguement ie 'none' meaning no Background/Colour. The value must be an appropriate HTML TagName value as per the Table list below. Here is the format for a Psudeo Styling of the 'OK' Button (you can see this covers off, the hover or Mouse over effects for the Background, Font Colour, Button Text and Button Tooltip):

PsuedoStyles:="ok-rollover-background|#DAE3E8,ok-rollout-background|#D0D9E0,ok-rollover-colour|#3E585F,ok-text|Okay,ok-title|Close the dialog,"
                            

Here is a full Table list of the PsuedoStyles():

ok-rollover-background		#DAE3E8 		(Colour Hex)		OK Button

ok-rollout-background		#D0D9E0 		(Colour Hex)		OK Button

ok-rollover-colour		#3E585F 		(Colour Hex)		OK Button

ok-rollout-colour		#3E585F 		(Colour Hex)		OK Button

ok-text				Okay 			(Text/String)		OK Button

ok-title			Ok	 		(Text/String)		OK Button

cancel-title			Close the dialog 	(Text/String)		Cancel Button

cancel-rollover-background	#DAE3E8 		(Colour Hex)		Cancel Button

cancel-rollout-background	#D0D9E0 		(Colour Hex)		Cancel Button

cancel-rollover-colour		#3E585F 		(Colour Hex)		Cancel Button

cancel-rollout-colour		#3E585F 		(Colour Hex)		Cancel Button

cancel-text			Okay 			(Text/String)		Cancel Button

cancel-title			Close the dialog 	(Text/String)		Cancel Button

link-tooltip			visit kubiszyn.co.uk 	(Text/String)		Link

link-rollover-colour		Red 			(Colour Hex)		Link

link-rollout-colour		Blue 			(Colour Hex)		Link

close-tooltip			Close the dialog 	(Text/String)		Close Cross Button

close-rollover-background	#DAE3E8 		(Colour Hex)		Close Cross Button

close-rollout-background		#D0D9E0 		(Colour Hex)		Close Cross Button

close-rollover-colour		#3E585F 		(Colour Hex)		Close Cross Button

close-rollout-colour		#3E585F 		(Colour Hex)		Close Cross Button

                            

All Pop Boxes have a 'z-index' which defines the order (or layer) that they are placed in (if they are displayed on the Canvas) - the higher the number, the greater the priority in the 'z-index' layers. You can swap a Pop Boxes 'z-index' around to display a Box in front of another ie. to display a TitleText over an Icon, swap their 'z-index' around by passing the index into the CSS Styles() Function like this (by default the Icon has a 'z-index' of '8' and the TitleText has a 'z-index' of '6'):

Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'85px','left':'20px'} | " _
& "'icon-box', {'left':'255px','top':'25px','z-index':'6'} | " _
& "'title-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'25px','left':'20px','z-index':'8'} | " _
& "'close-box', {'left':'370px','top':'10px'} | " _
& "'canvas-box',  {'border':'1px solid #000000'}"

						

Here are all of the default Pop Box 'z-index' values (a value of '-1' will ensure it is the lowest level within the layers):

canvas-object				z-index: 0
frame1-object				z-index: 1
frame2-object				z-index: 2

' gap for any future dev...

logo-image				z-index: 5
title-text				z-index: 6
strapline-text				z-index: 7
icon-image				z-index: 8
message-text				z-index: 9
picture-image				z-index: 10
progress-title-text			z-index: 11
progress-percentage-text		z-index: 12 
progress-object				z-index: 13
link-hover				z-index: 14
close-text				z-index: 15
ok-text					z-index: 16
cancel-text				z-index: 17


						

Here are my favourite Pop Boxes with Code and an Excel Screen Shot

Let's start with a Pop Box that you can use to run a task - the task will be a dummy task that pretends to be 'Formatting Master data' whilst writing coloured block data to a Worksheet, but you can use this Pop Box whilst running a Macro. I have chosen an example that features a 'Ring' Preloader, a Title with a Percentage of task, a Message descibing the task and the option to Abort the task at any time. Upon an Abort, the Dialog will alter its Message and then perform a slight pause before closing

The 'Ring' Preloader is styled in a 'Lego' Colour Scheme. The Dialog is minimal, but looks nice alongside a White Lightbox. The Percentage gives the Dialog a sense of how long the task will take and sits nicely within the frame of the Dialog. Here is the Code together with the dummy task Code (you don't have to specify the 'font-family' because 'Verdana' is the default, but doing so, allows you to easily tweak it if required so I left it in this example):

Sub Example_Preloader_Ring_Macro()

    Pop.Init ScalePercentage:="0%", _
             Width:=410, _
             Height:=185, _
             Icon:=ldrRing, _
             ExitByLightbox:=False, _
             Styles:="'title-box',      {'font-family':'Verdana','font-size':'16px','color':'#3E585F','top':'5px','left':'20px','width':'240px'} | " _
                     & "'message-box',  {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'65px','left':'20px'} | " _
                     & "'icon-box',     {'left':'255px','top':'25px'} | " _
                     & "'canvas-box',   {'border':'1px solid #000000'}"


    Pop.Box Canvas:=True, _
            Icon:=True, _
            TitleText:="Running Macro ", _
            MessageText:="Formatting Master data
Please wait...

- Press {Esc} to quit this process", _
            DisableCTRLBreak:=True, _
            Callback:="Task7"

End Sub

Private Sub Task7()
    On Error Resume Next

    Worksheets.Add
    Columns("A:E").ColumnWidth = 5

    Dim i
    Dim iVal
    Dim rngCell As Range
    While i < 100
        DoEvents
        Randomize
        i = i + Rnd(100) - 0.1
        'Debug.Print i
        RandomEvent
        If i Mod 3 = 0 Or i Mod 5 = 0 Or i Mod 7 = 0 Then GoTo skip
        iVal = Format(i / 100, "0%")
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro " & iVal
        'Debug.Print iVal
        If Pop.CallbackExit Then i = 100

        ' // borrowed from Ejaz Ahmed's Class Progressbar as I liked the technique
        '    modified to stay within a Blue/Pink spectrum of Colours I like ;)
        For Each rngCell In Range("A2:E6").Cells
            On Error Resume Next
            rngCell.Interior.Color = RGB(255 * Rnd(i), 81, 181)
            On Error GoTo 0
        Next rngCell

skip:
    Wend

    ' lets remove the Worksheet we just created
    Application.DisplayAlerts = False
    ActiveSheet.Delete
    Application.DisplayAlerts = True

    ' check the Pop.Aborted() Function to see if the User pressed the {Esc} Key to abort the process
    ' MsgBox Pop.Aborted
    Debug.Print Pop.Aborted

    If Pop.Aborted Then
        Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data
Please wait...

- Process aborted..."
        Pop.Pause 3000
    Else
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro 100%"
        Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data
Complete..."
        Pop.Pause 3000
    End If

End Sub


Private Sub RandomEvent()
    On Error Resume Next

    Dim MyTimer As Double
    DoEvents
    MyTimer = Timer
    Do
        Do
            DoEvents
            Dim i
            Randomize
            For i = 1 To Rnd(10) * 1000: Next i
        Loop While Timer - MyTimer < 0.07
        Randomize
        For i = 1 To Rnd(10) * 100: Next i
    Loop While Timer - MyTimer < Rnd(0.1)
End Sub
                     

And here is the resulting Screen Shot of Excel running the task:

The next Pop Box is my favourite Progressbar. I styled this like an NProgress.js bar, minimal, in Green. It has a Title with the Percentage written next to the Title. It also has a Message which allows an Abort using the {Esc} Key and updates accordingly

The Progressbar itself has a Green border and a Green internal bar used to display the progress of the task. Here is the Code, again with the dummy task Code:

Sub Example_Progressbar_Nanobar10()

    Pop.Init ScalePercentage:="0%", _
             Width:=360, _
             Height:=130, _
             ExitByLightbox:=False, _
             Styles:="'title-box',                  {'font-family':'Verdana','font-size':'16px','color':'#3E585F','top':'5px','left':'20px','width':'240px'} | " _
                     & "'canvas-box',               {'border':'1px solid #3E585F'} |" _
                     & "'progress-title-box',       {'left':'20px','top':'35px','width':'340px','font-size':'14px','color':'#666666'} |" _
                     & "'progress-box',             {'left':'24px','top':'76px','height':'30px','width':'310px','background':'#FFF','border':'3px solid #22DD99'} |" _
                     & "'progressbar-box',          {'width':'0%','background-color':'#22DD99','border':'3px solid #FFF'} |" _

                     Pop.Box Canvas:=True, _
             Progressbar:=True, _
             TitleText:="Running Macro ", _
             ProgressbarTitleText:="Press {Esc} to cancel the process", _
             DisableCTRLBreak:=True, _
             Callback:="Task10"

End Sub

Private Sub Task10()
    On Error Resume Next

    Worksheets.Add
    Columns("A:E").ColumnWidth = 5

    Dim i
    Dim iVal
    Dim rngCell As Range
    While i < 100
        DoEvents
        Randomize
        i = i + Rnd(100) - 0.1
        RandomEvent
        If i Mod 3 = 0 Or i Mod 5 = 0 Or i Mod 7 = 0 Then GoTo skip
        iVal = Format(i / 100, "0%")
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro " & iVal
        Pop.CallbackUpdate DialogElement:="progressbar-box", UpdateValue:=iVal
        If Pop.CallbackExit Then i = 100

        ' // borrowed from Ejaz Ahmed's Class Progressbar as I liked the technique
        '    modified to stay within a Blue/Pink spectrum of Colours I like ;)
        For Each rngCell In Range("A2:E6").Cells
            On Error Resume Next
            rngCell.Interior.Color = RGB(255 * Rnd(i), 81, 181)
            On Error GoTo 0
        Next rngCell

skip:
    Wend

    ' lets remove the Worksheet we just created
    Application.DisplayAlerts = False
    ActiveSheet.Delete
    Application.DisplayAlerts = True

    If Pop.Aborted Then
        Pop.CallbackUpdate DialogElement:="progress-title-box", UpdateValue:="Process aborted..."
        Pop.Pause 3000
    Else
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro 100%"
        Pop.CallbackUpdate DialogElement:="progress-title-box", UpdateValue:="Process Complete"
        Pop.CallbackUpdate DialogElement:="progressbar-box", UpdateValue:="100%"
        Pop.Pause 3000
    End If

End Sub


Private Sub RandomEvent()
    On Error Resume Next

    Dim MyTimer As Double
    DoEvents
    MyTimer = Timer
    Do
        Do
            DoEvents
            Dim i
            Randomize
            For i = 1 To Rnd(10) * 1000: Next i
        Loop While Timer - MyTimer < 0.07
        Randomize
        For i = 1 To Rnd(10) * 100: Next i
    Loop While Timer - MyTimer < Rnd(0.1)
End Sub
                     

And here is the resulting Screen Shot of Excel running the task:

Pop only uses embedded Base64 Encoded Images that are dynamically extracted from the 'shtPop' Worksheet in the 'Pop.xlsm' Workbook. You can Delete and then Load in any number of Images. You must first Base64 encode the Image String. For Images stored online, you can do this here (Motobit). For locally stored Images, ie. PC, Network Drives, you can do this here (Motobit) - the Images must not have Carriage Returns otherwise they will not work. The type of Image must be added to the 'data:image/png;base64' part. Here are 2 Images that have been Base64 Encoded using another link (Base64Image)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABLVJREFUeNrsXdFxozAQxZn793UQd2A6gA5IB6QDl+B0kOuAXAW4A+jAvgpwKrCvAg5ulhvHJ4kVSGJl7c5o8CQGSW+Xt5K8WkURC0vIsqLewLZtn7vLpitxV75DiSVfP3XlCqX/fF6tVp+sADzY6+6SQonhakJqUEh/rTul/GYFfAX9FcB+cVTtAZTxQUkZroHPulK2y0vfhiwk4POuNC096duUPywFQed+gBPVlTOU+o7Xb2XwF4OT3kCZUtdbR00/H8XikwkW39PCrr/XUP27CXTXmKh/Ueeq0elLVwoXXAy+p4A6scaw9tHBXrC8u0QHwUCw/ujihaOGThWIDlWUOgQGUyHaXZB9GwD8I8WRhuER2pGcEroGbRGUs/eIQvcIStr6Av6RTGP1+3UkrQQE+O8PMIx+H1FCQhH8C2Wun+gbLmTeBAT42+jBhEyfYbQTFPgaSli7AP8YIvhIJdgdoiomWUGAj1RCYXO2GDz4SCVkNqhHVlkeBSowOrLvDxSrmu9R4KKYJ5SmKkhkDidiGTCSDUwSEw+XLU5tGfov/kC4+GiL4/YM+39Y7Y37SInjbRhuLbZoTFt/zlA7wEyizYphHsWtmv0WKCZdGUPsADvJuL8JFNA1DMW3M9mj1KmQuV+83FAg75P5gjXm5t0iS63+rPVskUZ8wRjxk+D+VPC3Q0hRxAByHYnDKEdDKwGrg+BfL1PpJ2PL12MChTNea9/E4E9bdscY8xOGfph2/m55Sjtq+aX52MMYxd8rQLT3qmbwJ4Evwy7WfWUSpp3Jz07QlN7vRgyN/12Emkie/SyioI3g/jPTzmwRYbgRKSAORQEOwZdhGIsUIGrMicGfLSfVZG5MAVcGf7ZcsQqIeahpHHyZxKq1oIebAywMvhLDp+jBhZjlh6UA6uD38s0REENCjl6cJMjwAfz7Blc24n8EP05YD+altIFEEi9UiSjI1pj/9c4K+8+1LRA8sfyTSAG2xvyyX5WMK4Eo+Mr51ZgCUgMN+FBMRowpgbDlx6jJmWTptDEFjk1OprxpUBKikoi+aHU52hZI1Hdsji1HY76cUFWCB+AnWkYtGYruKA4RfdirLImxqlQz4ZMlR/xPwBGmcxyzR5OsVGttyGVYylQL9mmXvnaMlevALF0wPQM/mxQfKomMLiw2FAWqb/kpJJvaS8yNuevgXAS4iU8pEmZFmC8Vno7MuuXFLv1Z4ekKGmocNFxHCWRTJMzaoDHiQDIiSqAMvhnsltyk53NCKCOb9EZ4LF9QCdTBN4uZ0Y3H05XQ+JIWxzhenKpAC6u9FcbgZB3oN7W1whacrgaFkb10NYp5ASdsihwkbLqZHXPKMryPNL90w0n7tOYqma1KOW1ltFDayhsq4sStSyVuRfgDTl3MazWB9JnT1xMwOD7AwY9TNPgIEwJK4EN8HDSaj7EiogQ+yI1Ih/goQwJvA+XDPHVOdvU3YSEfZ6sW1wc6v0XTD1nuSx+9PURV13ffSeHKBzobGGksIU0b0m8bwMUlAeDLoHNi34xGSseg5xSc64qaMoDLU+Dx1NCja/Af/bWmlAV45cEb8gzONAYHOzhZkQxO+gqfzx3YnxELCwtR+SPAAEi/fLep65neAAAAAElFTkSuQmCC



data:image/gif;base64,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
                        

The Subroutine to Load in your Icons and Preloaders as Base64 encoded data into the 'shtPop' Worksheet can be found in the 'Pop' Code Module. It is called 'InstallIcons' and will allow you to Browse and locate all of your Base64 Images/Preloader Files which must be '.TXT' Files. The Name of the Icon or Preloader is derived from the Filename of your Base64 Encoded Text File ie. 'icoSpanner.txt'

Make a backup of 'Pop'. Ensure that you have saved your Base64 data correctly in Text Files with the Name of the File being the Name of the Icon or Preloader that you want to use ie. 'icoSpanner' for a Spanner Icon Image. Scroll down to the InstallIcons() Subroutine and run this Code - Browse and select your Files to install them. Now you would add the Named Argument including the Name of the Icon like this: 'Icon:=icoSpanner' or Picture:=icoSpanner' etc.

Important! When converting your Base64 Images, Copy the data MANUALLY including the relevant Image Part as detailed above into A NEW NOTEPAD INSTANCE - not an existing TXT File. Check all is well by toggling the Format->Word Wrap On/Off. It should be disjointed and then when Wordwrap is Off it will be a single continuous File of data. This is important otherwise the Image may not be displayed in Pop

Pop uses Font Stacking to ensure IE7 Browser fallback for Fonts on your PC. The default Font used is a Google Font called 'Verdana'. If this fails to load, then the following CSS 'font-family' is adhered to in order of inclusion - if all of these Fonts fail then the default 'serif' Font on your system is used. Any Fonts rendered within the IE7 WebBrowser Control will never look 100% perfect, but you can tweak Font Sizes and Colours to achieve decent looking Dialog Text - alternatively, you can use a Google Font

font-family: Verdana, Garamond, 'Adobe Garamond Pro', 'Hoefler Text', Georgia, 'Calibri', serif;
                            

Pop can load Google Fonts in the HTML Markup used by the WebBrowser control - by default this is switched off. You can turn this on by uncommenting the Google Fonts at the very top of the HTML Markup in the 'Pop' Code Module in the Pop.Init() Subroutine by adding/removing Font Names separated by a 'Pipe' or '|' character - for Spaces use the 'Plus' '+' character. Call the new Font by replacing the 'FontName' in the 'font-family' in the CSS Styles() Parameter through the Pop.Init() Subroutine with the new Google FontName

Uncomment this line (you may or may not have to do this - depends if I leave uncommented):
v = v & "< link href=""https://fonts.googleapis.com/css?family=Indie+Flower:400"" rel=""stylesheet"" lazyload>" & Chr$(13)

Use the following in the URL Link:
https://fonts.googleapis.com/css?family=Indie+Flower:400

Or use the following in the URL Link (may have impact on load times for Pop.Box in some environments):
https://fonts.googleapis.com/css?family=Quicksand|Indie+Flower|Raleway
                            

Pop with an Indie Flower Google Font:

You should remember that using these Fonts may induce a definite 'Lag' on loading the Pop.Box in some environments as it downloads the Font(s). To avoid this as much as you can you should just pull the weight that you want ie. '?family=Indie+Flower:400' - this will save download time

Here is the link to Google Fonts - you can choose any Font shown here. Click the little red cross and then the 'Family Selected' Popup will give you the 'Embed Font' and the 'Specify in CSS' Font Name

Pop uses Colours in a variety of ways. For consistency, any Parameters use 'Long' Colour Codes whilst any HTML Markup Styles use 'HTML' Colour Codes. You can pass an 'RGB' Colour Code into a Long Parameter. To get a Long Colour Code from an RGB Colour Code you can do either of the following below - I recomend installing 'Instant Eyedropper' by Konstantin Yagola on your PC if you intend to pull Colours from a variety of sources and switch them between 'HTML', 'Long' or 'RGB'

1. RGB to Long - in the immediate Window simply add the following to see the Long value '16777215':

? RGB(255, 255,255)

2. Add this Subroutine to any Code Module and run to view the Long Colour Code:

Private Sub PrintLongRGB()
 ' enter your RGB Colour Code & press F5
 ' use View->Immediate Window to see the Long equivalent
 Dim col As Long
 col = RGB(255, 185, 1)
 Debug.Print col
End Sub

3. pass an RGB into a Long Parameter - this will set the Lightbox to Black

LightboxColour := RGB(0,0,0)
                            

Pop exposes a Global Enum called 'Colours' that you can use to select a stored 'Long' Colour. To choose a predefined Pop Colours Code use the Global Variable as per below in the Parameters of Pop.Initialise() or Pop.Box():

LightboxColour:=Colours.Cinder
                            

Pop can create truly awesome Dialog Boxes if you take the time to design something beautiful given all of the CSS Styles() and CSS PsuedoStyles() Functions. Here is the Code for a really awesome Dialog:

' Example of an Awesome Dialog
Sub Example_Picture_Message()

    Pop.Init ScalePercentage:="0%", _
             Width:=436, _
             Height:=240, _
             Picture:=icoPicture, _
             Styles:="'title-box',        {'font-family':'Verdana','color':'#3E585F','top':'40px','left':'240px','width':'120px'} | " _
                     & "'picture-box',    {'left':'0px','top':'0px','width':'210px','height':'240px','border':'none','text-align':'center'} | " _
                     & "'message-box',    {'font-family':'Verdana','color':'#83A2AA','top':'80px','left':'240px','width':'180px'} | " _
                     & "'close-box',      {'left':'396px','top':'10px','color':'#47364F'} | " _
                     & "'canvas-box',     {'border':'1px solid #188777'} | " _
                     & "'frame1-box',     {'left':'0px','top':'0px','width':'210px','height':'240px','background':'#188777','border':'none'} |" _
                     & "'frame2-box',     {'left':'210px','top':'2px','width':'224px','height':'236px','background':'#FFF','border':'none'} |" _
                     & "'ok-box',         {'left':'240px','top':'150px', 'height':'40px','font-size':'14px','background':'#FB2A4F'} |" _
                     & "'picture-psuedo', {'vertical-align':'middle'}", _
             PsuedoStyles:="ok-rollover-background|#188777,ok-rollout-background|#FB2A4F,ok-rollover-colour|#FFF,ok-text|Delete,ok-title|Click to Delete the user profile,close-rollover-colour|#188777,close-rollout-colour|#47364F"

    Pop.Box Canvas:=True, _
            TitleText:="Lorem Ipsum", _
            MessageText:="Dolor sit amet, consectetur adipiscing elit. Vestibulum", _
            Picture:=True, _
            Frame1:=True, _
            Frame2:=True, _
            OKButton:=True, _
            CloseButton:=True

End Sub
                            

Pop Box Dialog - I have split the Pop Box using a Frame and an Icon. I have also changed the Close Cross Colours and the Font Colours:

Pop Box Dialog pressing the Button - if you want the Button Colours the other way around, it is a simple change to the CSS Style() and PsuedoStyle():

Pop Box Dialog pressing the Close Button:

Pop Box Dialog with Justify Text and different Button Colours:

Styles:="'icon-box', {'left':'245px','top':'24px'} | " _
      & "'icon-img', {'width':'100px','height':'20px'}
                            

And here is the Code to do it:

Pop.Init ScalePercentage:="0%", _
         Width:=410, _
         Height:=185, _
         Logo:=icoMsgSuccessTitle, _
         Icon:=icoMsgSuccess, _
         Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'40px','left':'10px'} | " _
               & "'title-box', {'left':'4px','top':'0px','padding':'0px','width':'240px','height':'24px','color':'#3c7f51'} | " _
               & "'logo-box', {'left':'0px','top':'0px','horizontal-align':'left','padding':'0px','width':'410px','height':'30px'} | " _
               & "'logo-img', {'width':'100%','height':'24px','border':'1px solid #60a174','border-bottom':'none'} | " _
               & "'logo-psuedo', {'vertical-align':'top'} | " _
               & "'icon-box', {'left':'251px','top':'24px','horizontal-align':'right','padding':'0px','width':'165px','height':'160px','background':'none'} | " _
               & "'icon-psuedo', {'vertical-align':'bottom'} | " _
               & "'close-box', {'left':'380px','top':'0px','background':'none','color':'#FFF'} | " _
               & "'canvas-box',  {'border':'1px solid #60a174'}", _
         PsuedoStyles:="close-rollover-background|none,close-rollout-background|none,close-rollover-colour|#3c7f51,close-rollout-colour|#FFF"
         
Pop.Box Canvas:=True, _
        TitleText:="Success", _
        Logo:=True, _
        Icon:=True, _
        CloseButton:=True, _
        MessageText:="Your request was processed"
                            

    frmPop.StartupPosition = 0
    frmPop.Top = 100
    frmPop.Left = 100
                            

Private Sub Workbook_Open()
    Pop.Init "0%", Startup:=True
    Pop.Box Canvas:=False, Startup:=True
End Sub
                            

Pop Box with an Indie Flower Google Font downloaded on the fly:

Pop Box with Camera Icon, demonstrating CSS PsuedoStyles() for Button Text & Title:

Pop Box with Search Icon (Find & Replace), demonstrating CSS PsuedoStyles() for Button Text & Title:

Pop Box with Camera Icon with Rounded Corners for the Dialog Box:

Pop Box with Camera Icon with a thick Border around the Dialog Box (leaving the Close Cross in situ gives a chunky kind of look & feel):

Pop Box with Success Thumb Up - please Note: this Thumb Icon is not included with Pop, but can be purchsed for $2 at www.iconfinder.com

Pop Box with Upload / Cloud - please Note: this Upload / Cloud Icon is not included with Pop, but can be purchsed for $2 at www.iconfinder.com

Pop Box as a 'Msg' Success Dialog - this is the power of Pop Box, with a little work it can even emulate 'Msg' (formerly Notify) as a Success Dialog with Rollover Close Button:

Pop Box Success Groove Icon:

Pop Box Error Groove Icon:

Pop Box Warning Groove Icon:

Pop Box Help Groove Icon:

Pop Box Success Emulate:

Pop Box Error Emulate:

Pop Box Warning Emulate:

Pop Box Help Emulate:

Pop Box Success Outset 3D Button:

An Awesome Pop Box with Justify Text:

Pop Box Dialog downloading data from Access:

Pop Box Dialog downloading data from Access featuring an Orange Cubes Preloader:

Pop Box Popup Window Dialog:

Pop Box Standard Progressbar:

Pop Box NProgress.JS Emulation Progressbar:

Pop Box with a 'Thin', 'Outset' Border:

Pop Monster Splash Screen:

Pop Monster Splash Screen with Dialog Frame:

Pop Valerie Frame:

Pop Box with Dialog in a White Lightbox:

Pop Box with Dialog in a Black Lightbox:

Pop Box with Dialog in a Beige Lightbox, Blue Buttons, a Greater Lightbox Opacity and a Blue Border:

Preloader - Cogs:



Preloader - Ring:



Preloader - Harmony:



Preloader - Rolling:



Preloader - Cloud:



Preloader - Cubes:

1.6 Pop Demos (22.11.2020):



131 Pop Demos (earlier releases of the Software):



Version 1.6 fish-bone for Pop Demos (minified version of Pop featuring a tiny Scrollbar that can be placed underneath the Titlebar or Statusbar):



Version 1.7 positioning and animation examples using easeInQuad:

Pop Box Standard Progressbar:



Pop Box Standard Progressbar with Border Aborted:



Pop Box Standard Progressbar with Border, Shorter Width:



Pop Box NProgress.JS Emulation Progressbar:



Pop Box NProgress.JS Emulation, Shorter Progressbar:



Pop Box Nanoscopic Progressbar:



Pop Box NProgress.JS Emulation Progressbar, smaller with Percentage in Title:



Pop Box NProgress.JS Emulation Progressbar, smaller with Percentage in Title - Aborted:



Pop Box NProgress.JS Emulation Progressbar, smaller with Percentage in Title - Complete:

You can Compress your finished Files prior to distribution using VBA DecompilerMore a great little free tool

02.04.2018 - 'True is Undefined' JavaScript Error An error has been reported in the JavaScript when using Windows 10 and the German Version of Excel 2013 & Excel 2016

• - this was fixed 10.06.2018

• - this was fixed 02.03.2018