Introduction

Introducing Dark Interactive UI Elements

Dark UI Elements - Interactive Flat UI Images modified from 2 PSD UI Kits by Freebiesbug.com to use on a UserForm

Here is a Material design that allows you to add interactive Searchbars, Toggle Buttons, Hyperlink Tags, Close Cross Button, Close Button, Straplines, Separator Lines, Text, Checkboxes, Radiobuttons and Buttons to a UserForm. Dark UI Elements use a minimal Colour theme and gorgeous Graphics. The Images are isolated, edited and then extracted out of 2 PSD's, a Free Dark & Blue UI Kit and a Free Dark UI Kit

All of the Images loaded into the Image Controls are available in the Download File and I have also saved them as SVG. To edit the Button Text properly, you should use an Art Package for example Paint Shop Pro, Photoshop or Affinity Designer (I use Affinity for all of my work). The Images can also be copied from one UserForm to another

Dark UI Elements use two tiny Classes from UserForm Extensibility to enable the Hand Cursor and a Pause in milliseconds. The Toggle Button uses additional Code in the UserForm to move the Button back and forth with easing and to change the Text to On or Off states

Here is a Material design that allows you to add interactive Searchbars, Toggle Buttons, Close Buttons, Straplines, Text, Checkboxes, Radiobuttons and Buttons to a UserForm. Dark UI Elements use a minimal Colour theme and gorgeous Graphics

If you like this Project you may also enjoy

Blue UI · Carbon UI · UserFOrm UI · BoX · Flat UI · UserForm Slider Buttons · UserFormExtensibility

Prerequisites

Excel 2016 (32bit or 64bit version 16.0)
Basic to moderate Excel Skills to understand and edit Code, also to copy & paste Images into UserForm Controls if developing this Software further or integrating it into your own Projects. In order to edit the Button Text an Art Package is required; this may be Paint Shop Pro, Photoshop or Affinity Designer or a Package that can open and edit PSD files -- Please Note: the PSD Files are available as FREE downloads but DO NOT ship with this Software
Windows PC · NOT a Mac!
No support is provided for customization of this Software

Features

UserForm UI Elements consists of Searchbars (2 states one Normal and one Active), Straplines, Separator Lines, Hyperlink Tags, Close Cross Button, Close Button, Text, Toggle Button, Checkboxes, Radiobuttons, Buttons (1 interactivity design with multiple states, requires an Art Package to edit the Text) in a minimal colour design all seated upon a Gradual Fade PNG UserForm Background
Dark Carbon background PNG for the UserForm
Searchbar with or without an Active Interactivity
Toggle Button with On/Off Text
Hover Buttons in two designs and a Button that can be left Pressed In
Checkboxes with Ticks
Radiobuttons with Selected Circles
Separator Lines
3D Text that can be edited in Affinity Designer
Buttons with Text that can be edited in Affinity Designer
Tags that Hyperlink to Webpages
Close Icon
3D Strapline
Easing is used for the Toggle Button
Features a Cursor Class that displays the Hand Cursor on the Flat UI Elements
Features a Timing Class to enable a Millisecond Pause
All of the individual Image Controls use Images as 'PNG' extracted from the 2 PSD Files and pulled into the Image Controls using my TransparentImages Software (also FREE with the Download). I also include the Affinity Designer Images which can be easily edited ie. for the Button Text
Before Purchasing!: Both of the UI Kit PSD Files by Freebiesbug.com are FREE to download for all of the Elements used by this Software including the Button Text but they are NOT included in this Software. What IS included is shown in the Screen Shot above

Installation

Right-click on the file, 'DarkUI.zip' and extract the contents to your computer. Lots of Image files are included with this Software and within the Zip Archive you will find two folders, 'Images' (all of the main Images used for DarkUI) and 'Affinity' (the actual Affinity Images that I copied from the PSD file one by one, all of which can be edited using the Affinity Designer Program which is NOT included with this Software)

The main file is called 'DarkUI.xlsm' and I have also added my Transparent Images Software, 'ImageTransparency.xlsm' that will allow you to load in PNG with Transparency set to a Background Colour. To use this Software, open the 'DarkUI.xlsm' file

Usage

Dark UI Elements

How to Use

To use these Controls Open your own Project and the 'DarkUI.xlsm' file in the VBE Editor and drag the UserForm1 into your own Project. Then drag both the 'Cursor' Class and the 'SystemTiming' Class into your own Project. Finally drag the 'mdExample' Code Module into your own Project. I will use a new file called 'Test.xlsm' to demonstrate and here is a Screen Shot after I have copied the Code Modules across (Compile the Code - there should not be any errors):

To use these Controls Open your own Project and the 'DarkUI.xlsm' file in the VBE Editor and drag the UserForm1 into your own Project. Then drag both the 'Cursor' Class and the 'SystemTiming' Class into your own Project. Finally drag the 'mdExample' Code Module into your own Project. I will use a new file called 'Test.xlsm' to demonstrate and here is a Screen Shot after I have copied the Code Modules across (Compile the Code - there should not be any errors)

Now before you can start to use any of these you need to add the Defined Names for the Control states into your Project. If you do not do this then you will receive Errors once the UserForm is displayed and you attempt to click or Move over the Controls. Also, you will not be able to store the states of the Controls correctly. I added an 'On Error Resume Next' into the UserForm_Initialize() Event Handler so that at least you can run the Example in the 'mdExample' Code Routine to view the UserForm and its Controls without triggering any errors. Anyhow, now add the Following Defined Names or Named Ranges into any Cells in any of your own Project Worksheets, using either the Name Box (quickest method, simply Copy mone and Paste) or the Name Manager on the 'Formulas' Tab of Excel - select New and type the Name 'Checkbox1Value' and so on and so forth...

' 1 Toggle Value
Toggle1Value

' 1 Button state
Button3State

' 2 Checkbox Values
Checkbox1Value          
Checkbox2Value          

' 1 Radiobutton  Group Selected ID
RadiobuttonASelected

' 2 Radiobutton Values
Radiobutton1Value
Radiobutton2Value

Now in the 'mdExample' Code Module in your Project, run the Example and test out the Controls. You can check out my Code to see how each Checkbox, Radiobutton or Button etc. is controlled by the VBA. You should see the UserForm in your own Project now like this - so simple!:

Button States

Buttons

The Buttons available in this Software act like normal Buttons with a lovely MouseOver effect. A Button will display a different Image as the Mouse rolls over it and then you can make the Button 'do soomething' like close the UserForm. I have added a Button that can be Pressed permanently or Pressed and then Unpressed again with its State stored in a Defined Name or Named Range (Button 3 for this Software). I have also added Buttons from both PSD's and so you have some slightly smaller, brighter Buttons as well which all look great on the Black, faded effect Background. Here are the Buttons in the Software with different interactivity - remember you can edit the Affinity Buttons or download the FREE PSD's yourself and edit them directly:

Here are the Buttons in the Software with different interactivity and in two different designs

Editing the Button text

It is not easy to replicate how the PSD Buttons with different Text look as it will include 'pixelation for the Text' SO you should download the PSD's from here and edit the individual Button Font etc. and then export/save your new Images out as PNG and load them into your UserForm Image Controls using my 'ImageTransparency.xlsm' Software. Here is a link to the Free Dark & Blue UI Kit and the Free Dark UI Kit

Once downloaded use Paint Shop Pro, Photoshop or Affinity Designer to isolate (perhaps Copy and then Paste as New from Clipboard) and then select and edit the Font for the Buttons:

Once downloaded use Paint Shop Pro, Photoshop or Affinity Designer to isolate (perhaps Copy and then Paste as New from Clipboard) and then select and edit the Font for the Buttons

Round Buttons and Sliders are also included in Freebiesbug.com's design on Free PSD Dark & Blue UI Kit - here is an example of this excellent work, click to view at Freebiesbug.com

Screen Shots

Dark UI Interactive UI Elements Extracted from 2 PSD's

Here is a Material design that allows you to add interactive Searchbars, Toggle Buttons, Close Buttons, Straplines, Text, Checkboxes, Radiobuttons and Buttons to a UserForm. Dark UI Elements use a minimal Colour theme and gorgeous Graphics

FAQ

Q. Can I change the Images?
A. Of course -you can use your own. I recommend an art package like 'Affinity Designer' to create or edit Affinity and PNG Images. Instructions on how to add your own Images to an Image Control with Transparency are in the 'ImageTransparency.xlsm' file included in the download. Don't forget you can just load an Image directly into an Image Control as a Transparent GIF!

Q. How do I change the Text on a Button?
A. Instructions are given in the Usage Section - you will need an Art Package like Paint Shop Pro, Photoshop or Affinity Designer to edit the Affinity Images or the original PSD Files by Freebiesbug.com (these are FREE but NOT included in the Software). Some additional Button Images are included in the Download file, all of the 'OK' and 'Cancel' Button Images

Videos

This is a video of the Dark UI Interactive Elements in action. Music featured is 'Immortal - NEFFEX' · view the Dark UI Elements video on YouTube

Caution: Music may contain Explicit Lyrics, please listen at your own risk!

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

* No ideas as yet!

Bug Fixes

* No bugs have been identified for Dark UI Elements

Changelog

You can find the version history in the Code Module for any Macro-enabled Software or read more information on the status of each release here
- the latest Version including a description of any changes made is always shown first


16.02.2023 - (Version 1)

General release of Dark UI Elements