## What can we assist you with?
### [**Getting started**](/getting-started/installation)
### [Setting up](/setting-up/appearances)
### [I want help making custom app commands](/app-commands/create-custom-app-commands)
### [I want help making a Community App](/community-apps/introduction)
### [I want help making a Community Theme](/community-themes/introduction)
### [Some tips & Tricks](/tips/editor)
# Installation
How to install Droptop Four
## Requirements
* **Windows 10** or above
* **Rainmeter** v4.5.7 or above ([download here](https://www.rainmeter.net/))
## Installation
Download the `Droptop Basic Version.rmskin` file from below:
{% embed url="" %}
After downloading the file, launch the .rmskin install file and select "Install". Follow the setup guide.
{% hint style="warning" %}
You must have started Rainmeter at least once before installing Droptop!
{% endhint %}
## Installing the Supporter Version
You can support the developers of Droptop Four by purchasing the Supporter version. As a Supporter, you will receive:
* 18 additional themes not available in the Basic version
* 6 additional fully-customizable dropdown folders
* 5 additional slots for Community Apps
* 293 additional home button icons (full-color and black & white)
You can purchase the Supporter version through [Gumroad](https://gumroad.com/l/droptop) with a suggested purchase price of $6. Droptop operates on a pay-what-you-want model.
# Updating
How to update Droptop Four
## Automatic detection
When an update is available for Droptop, a green notification icon will automatically appear in the top bar on all PCs connected to the internet.
After the download is finished, launch the `.rmskin` install file to complete the update.
{% hint style="danger" %}
If you receive an error check [FAQs](/help/faqs#i-cant-install-the-update)
{% endhint %}
## Hiding the update notification
Press the `Dismiss update notification` to remove the green notification icon until the next update is available, or the next time you restart your PC.
Select "Don't notify me" to never show the green notification icon again. To manually check for updates, go to `Droptop settings >> Support >> Check online for an update` or you can check for updates on our [Discord Server](https://droptopfour.com/discord) #Annoucements channel.
# Uninstalling
How to uninstall Droptop Four
We are sorry that you want to delete Droptop Four. If there is something we can improve, please let us know sending a message in our [Discord server](https://droptopfour.com/discord).
## Unistalling
To uninstall Droptop from your PC, go to `Droptop settings >> Exit Droptop >> Remove Droptop from PC >> Remove Droptop from PC`. Droptop will close, and the Skins folder will open. You can then proceed to delete any Droptop folders from the folder to permanently delete Droptop from your PC.
# Appearances
Change Droptop Four appearances
You can change the appearances of droptop in almost every way possible, you only have to find the right option or the right way of doing it.
## Chapters
# Home icon
Customize the home icon of Droptop Four
If you want to change the icon shown on the home button of droptop, you have some options:
## Icons
### Default icons
If you click on `Droptop settings >> Set home icon` you can find some icon presets you can choose from. If you have the Supporter version, you'll find 300 different icons, if you have the Basic version only, you'll find only 7.
{% tabs %}
{% tab title="Basic version" %}
{% endtab %}
{% tab title="Supporter version" %}
{% endtab %}
{% endtabs %}
### Custom icons
If the icon you want isn't present between the default ones, you can load a custom one yourself!
Click the  button in the `Droptop settings >> Set home icon` button, select the image you want to use, click `Open`, wait a moment and your custom icon should be set!
### Random icon
You don't want to select an icon because you are lazy? Use the  button in the `Droptop settings >> Set home icon` button to select a random icon between all the default ones!
## Icon colors
If the icon you chose is multicolor, you have to make sure you enable the multicolor option in the `Droptop settings >> Set home icon`  button.
If you icon is white, you can change it's color by changing the `Top bar text` color from the `Droptop settings >> Color & opacity` menu ([Color & opacity](/setting-up/appearances/color-and-opacity#top-bar-text)).
# Color & opacity
Change Droptop Four colors
To personalize your Droptop Four bar you can change its colors and opacity of every component. Just head to `Droptop settings >> Color & opacity` and start changing the colors to the ones you like.
In every color setting you'll find 3 sliders to adjust the RGB (Red, Green, Blue) values and one slider to adjust the opacity of the color you chose.
Color settings
If you want to reset the colors, just press the `Reset` button at the end of the menu.
## Top bar background
This color is the background of the bar.
## Top bar text
The color of all the text on the top bar.
{% hint style="info" %}
This includes the color of the home icon if you are using a white icon and you disabled the icon colors. See[Home icon](/setting-up/appearances/home-icon#icon-colors) for other options.
{% endhint %}
## Dropdown background
The color of the background of every dropdown element (options, app, dialog) that isn't the top bar.
## Dropdown text
The color of the text of every dropdown element (options, app, dialog) that isn't the top bar text.
## Top bar highlight
The background color of every highlighted element on the top bar.
## Top bar highlight text
The text color of every highlighted element on the top bar.
## Dropdown highlight
The background color of every highlighted element in any dropdown element (options, app, dialog) that isn't on the top bar.
## Dropdown highlight text
The textcolor of every highlighted element in any dropdown element (options, app, dialog) that isn't on the top bar.
# Fonts
Change Droptop Four fonts
## Change font
If you want to change the font of droptop, head to `Droptop settings >> Options >> Font >> Change font` and select one of the fonts you already have on your computer.
If the font you want is not in the list, you can upload your font file by clicking `Droptop settings >> Options >> Font >> Change font >> Add a new font` and find and select your font file. It should be imported in droptop after a couple of seconds.
{% hint style="warning" %}
If the font doesn't change after applying the changes, let us know!
{% endhint %}
## Font options
### Font size
You can adjust the size of the font you want if it's a little too big/little in confront of the bar.
### Font position
You can adjust the vertical position of the font if it's a little too low/high in confront of the bar.
### Character spacing
You can adjust the spacing between each character if them are too close/far to each other.
# Shapes
Change Droptop Four shapes
## Rounded corners
You can set the corners of the bar and of the dropdown menus to be rounded or squared. Just use the `Droptop settings >> Options >> Shape >> Rounded top bar corners` and `Droptop settings >> Options >> Shape >> Rounded menu corners` options.
## Skewed shape
You can skew the shape of droptop by using `Droptop settings >> Options >> Shape >> Skew top bar shape`.
## Divide bar into sections
If you don't want the droptop bar to be one long chunk, you can divide it into subsections with this option `Droptop settings >> Options >> Shape >> Divide bar into sections`.
## Arrows and slider styles
You can also change the style of arrows and sliders that are used in droptop. Use the `Droptop settings >> Options >> Shape >> Change folder arrow` and `Droptop settings >> Options >> Shape >> Change slider style` options.
# Blur & shadows
Change Droptop Four blur and shadows
## Blur
You can enable blur on both the top bar (`Droptop settings >> Options >> Blur effects >> Top bar blur`) and the dropdown menus (`Droptop settings >> Options >> Blur effects >> Dropdown menu blur`).
If you want to make the artifacts more/less visible, use the `Droptop settings >> Options >> Blur effects >> Use heavy blur effect` option.
{% hint style="warning" %}
Sometime the heavy blur option can create some visual problems.
{% endhint %}
## Shadows
You can use the shadow options (`Droptop settings >> Options >> Shadows`) to toggle the shadows on the various components of the top bar and of the dropdown menus (text, highlights, components).
You can also set a gradient fade on the top bar: `Droptop settings >> Options >> Shadows >> Gradient fade on top bar`.
# Themes
Customize Droptop Four with themes
If you want to change the majority of all the settings we talked befour, you might want to take a look at droptop's themes.
## Default themes
In the `Droptop settings >> Themes` menu you'll see all the default themes you can use.
If you have the Basic version you'll be able to use only 4 themes, with the Supporter version you'll be able to use all the 22 default themes.
{% tabs %}
{% tab title="Basic version" %}
Available themes for the Basic version
{% endtab %}
{% tab title="Supporter version" %}
All the themes are unlocked with the Supporter version
{% endtab %}
{% endtabs %}
## Community themes
Everyone in the droptop community can also create it's personalized themes, and share them with all of the people that might be interested. Those themes use popular color schemes or completely subjective palettes.
The list of all the community themes is on the website:
{% embed url="" %}
## Create your community theme
If you want to create a personalized community theme that isn't already made, head to [Make a Community Theme](/community-themes/introduction) to learn more.
# Behaviour
Change Droptop Four behaviour
Droptop can be configured to behave in different ways. You want to access droptop only in certains condition? You want to personalize the hot corners actions? Set up droptop the right way!
## Chapters
# Showing mode
Change the mode Droptop Four is shown
In `Droptop settings >> Options >> Change mode` you can change how droptop is shown and can be accessed.
## Always show
By choosing `Droptop settings >> Options >> Change mode >> Always show Droptop`, droptop will be always accessible on the top of your screen. All your windows won't overlap the bar as the usable desktop area is modified to reserve a top space only for droptop.
{% hint style="warning" %}
If windows starts to overlap or underlap the bar, right click on the bar and click `Refresh Droptop`.\
\
In rare instances, you may need to force close Explorer.exe, reopen Explorer.exe, and Refresh Droptop. Or restart your PC. This may be caused by updating or restarting GPU Drivers.
{% endhint %}
## Autohide
By choosing `Droptop settings >> Options >> Change mode >> Autohide when not in use`, droptop will automatically hide out of your sight, and when you place your cursor on the top pixel of your screen it'll show again.
### Reveal delay
You can set the time after which droptop should appear in `Droptop settings >> Options >> Autohide settings >> Set autohide reveal delay`.
{% hint style="warning" %}
It's possible you have to leave your mouse on the top pixel for a couple of seconds to make droptop appear also if you selected the delay to be none.
{% endhint %}
### Fade speed
You can set the speed of the fade in/out of droptop in `Droptop settings >> Options >> Autohide settings >> Set autohide fade speed`.
## Hide menu bar
The `Droptop settings >> Options >> More options >> Hide menu bar` button will temporarily hide droptop until the cursor will touch the top pixel of the screen.
{% hint style="info" %}
The option is also present in the right click menu of the bar
{% endhint %}
## Change size
You can adjust the size of the bar by changing between the options in `Droptop settings >> Options >> Adjust size setting`.
{% hint style="info" %}
The option is also present in the right click menu of the bar
{% endhint %}
# Menu options
Change some Droptop Four behaviour options
## Hot corners
Droptop has 2 hot corners on the left and right side of the bar. You can change their behaviour in `Droptop settings >> Options >> Menu options >> Left hot corner action` and `Droptop settings >> Options >> Menu options >> Right hot corner action`. They can be also disabled.
Hot corner highlighted
## Bar centering
If you have a very wide screen, the lenght of the droptop bar can be quite annoying. Luckily you can shorten the bar in the center by adding a desired offset in `Droptop settings >> Options >> Menu options >> Top bar centering`.
Screenshot by ChiefPoko
## Fade effect when opening menus
WIth the `Droptop settings >> Options >> Menu options >> Fade effect when opening menus` option, you can toggle e nicer transition when opening menus.
## Accessibility in fullscreen apps
If you have a fullscreen window, droptop won't show on top of the open window. If you want to have access to droptop when using a fullscreen window, enable `Droptop settings >> Options >> Menu options >> Accessibility in fullscreen apps`.
{% hint style="warning" %}
Enabling this option can cause some problems while gaming, as the bar could appear and steal the focus of the cursor from your game. We suggest to set the [Rainmeter Gamemode](https://docs.rainmeter.net/manual/user-interface/manage/#GameModeTab) to be able to safely game also saving up on performances.
{% endhint %}
## Simplified home menu
If you want to use the droptop home menu as your main home menu, you might want to hide the settings tab and use a simple and clean version of the home menu that shows some useful buttons. To enable it, toggle `Droptop settings >> Options >> Menu options >> Simplified home menu`.
# General folders options
Droptop Four folder options
## Middle click behaviour
You can chose the action to perform when middle-clicking on an item of a folder. Go to `Droptop settings >> Options >> Menu options >> Middle-clicking on folder items...` and change the selected option.
You can choose between:
* Open file or folder
* Open file or folder properties
* Do nothing
## Show start button
If you want to show on the droptop bar a button to show the Windows Start menu, you can enable the option by right clicking on any folder you have enabled on the bar and toggle the `Show Start button` option.
Highlighted the Show Start button option
Droptop with option enabled
By clicking the  button, the Windows Start menu will appear
## Show application menu
If you want to display on droptop the name of your currently focused app, you have to have enabled the `Show application menu` option.
When you click on the name of the application, you'll find a list of actions you can perform, and if you have them, you'll find also the application commands you created for that app.
{% hint style="info" %}
If you want to know how to create your custom app commands, head to [Make Custom App Commands](/app-commands/create-custom-app-commands)
{% endhint %}
## Show application commands
if you want to show your application commands on your bar to be easy accessible, enable the `Show app commands` option.
{% hint style="info" %}
If you want to know how to create your custom app commands, head to [Make Custom App Commands](/app-commands/create-custom-app-commands)
{% endhint %}
## Add shortcut to a folder
If you want to add an app to a droptop folder, open the app, click on the app name and select the `Add shortcut to` button, then select the folder you want to have the shortcut in, and you're done!
Else you can drag & drop files and folders opening the `Documents\Rainmeter\Skins\Droptop Folders` directory, choosing the folder you want to add what you want to, and refreshing droptop.
# Folder settings
Per folder settings
For every droptop folder you can customize it's appereances and more! You can find the folder settings by right clicking on any folder on the bar or by going to `Droptop settings >> My folders`.
## Change the name
You can change the folder name by clicking `Rename`. You can also use the given emojis or any unicode emoji to rename the folder.
{% hint style="warning" %}
Changing the name of the droptop folder won't change the name of the real explorer folder.
{% endhint %}
You can also change the color of the folder highlighting on the droptop bar selecting one of the colors on the bottom part of the settings.
## Change folder location
You can change the location of the folder you want to access in the droptop folder, navigate to the folder you want to set, and click `Select this folder` on the bottom of the dialog. The new contents of the new folder will appear after a droptop refresh.
## Folder sorting
You can change the sorting used to show the contents inside of your droptop folder, as if the order has to be ascending or not.
## Showing items
You can chose what type of files to show in the droptop folder between
* files
* folders
* system files
* hidden items
You can also chose if to show the extension of the file or not.
## Show folder
The last item of the settings is the toggle to show the folder or not. If you want to disable the folder and not show it on the droptop bar, click the toggle.
# Advanced options
Droptop Four advanced options
## Enable Drag & Drop
Disabled in the latests droptop releases as was causing more harm than help.
## Use `.ahk` instead of `.exe`
If you have [AutoHotKey](https://www.autohotkey.com/) installed, and want to troubleshoot something in the `ahk` files, you can use this option to force droptop to use the not compiled `ahk` files instead of precompiled `exe`s.
Toggle at `Droptop settings >> Options >> Advanced >> Use .ahk instead of .exe`.
## Backlight compatibility mode
If the droptop brightness slider of your monitor doesn't work, you can see if enabling the `Droptop settings >> Options >> Advanced >> Backlight compatibility mode` can help.
## Disable DPI scaling
If you have problems with scaling between droptop and other Rainmeter skins, try to toggle the `Droptop settings >> Options >> Advanced >> Disable DPI scaling (Restart required)` option.
## Touchscreen mode
`Droptop settings >> Options >> Advanced >> Touchscreen mode` allows an easier navigation when using fingers as input instead of a mouse cursor.
## Disable hover actions
`Droptop settings >> Options >> Advanced >> Disable hover actions` allows you disable action performed while hovering on droptop components, for example to disable the automatic opening of submenus when hovering the mouse on them.
## Disable notifications
`Droptop settings >> Options >> Advanced >> Disable notifications` lets you disables all text notifications (Including song info) in the top bar.
# Apps
Customize Droptop Four with Apps
In the right side of the bar, droptop can have a lot of apps that might be useful, especially if they are reachable so easily.
## Default apps
Droptop comes with some basic apps preinstalled:
Alarm
A simple alarm
App Drawer
Shows the windows app drawer
Battery & Backlight
Shows infos about the battery and lets you change the brightness of your monitor
Desktop Navigator
Let's you move between virtual desktops
Downloads
Shows the content in the downloads folder
Mail
Connects to your Gmail inbox
Paperclip
Opens a tool that interfaces with the windows paperclip
Recent Files
Shows your recent files
Time
Shows time and calendar
Volume
Shows infos and lets you change medias
Weather
Shows weather informations about your location
WiFi & Bluetooth
Shows network and connectivity infos
## Community apps
Everyone in the droptop community can also create their personalized apps, and share them with all of the people that might be interested.
The list of all the community apps is on the website:
{% embed url="" %}
You can also install community apps using the `Droptop Store` app that is already installed in your Droptop: just enable it and search and download what you need!
## Create your community app
If you want to create a personalized community theme that isn't already made, head to [Make a Community App](/community-apps/introduction) to learn more.
# Languages
Droptop Four supported languages
## Available languages
Droptop is translated in the following languages ():
Arabic
๐ธ๐ฆ
Czech
๐จ๐ฟ
Danish
๐ฉ๐ฐ
Dutch
๐ณ๐ฑ
English
๐จ๐ฆ - ๐ฌ๐ง - ๐บ๐ธ
French
๐ซ๐ท
German
๐ฉ๐ช
Hindi
๐ฎ๐ณ
Indonesian
๐ฎ๐ฉ
Italian
๐ฎ๐น
Japanese
๐ฏ๐ต
Korean
๐ฐ๐ท
Latvian
๐ฑ๐ป
Persian
๐ฎ๐ท
Polish
๐ต๐ฑ
Portuguese
๐ต๐น
Russian
๐ท๐บ
Slovak
๐ธ๐ฐ
Spanish
๐ช๐ธ - ๐ฒ๐ฝ
Turkish
๐น๐ท
Ukrainian
๐บ๐ฆ
Vietnamese
๐ป๐ณ
*The language support could be partial. If you want to help translating or translate in another language, contact us on our Discord server.*
## Change language
If you want to change the droptop language, you have to go in `Droptop settings >> Change language` where you will find the available languages divided by continent.
## Contribute to the translations
If you want to contribute to the translation of droptop, head to and follow the guide.
# Create custom app commands
Create Droptop Four custom app commands
{% hint style="info" %}
To create custom commands you have to have a basic understanding of how [AutoHotKey](https://www.autohotkey.com/) works. Droptop uses `ahk` scripts to simulate hotkeys press to execute your command.
{% endhint %}
To create you app commands, click on the app menu you see on the bar (if you have that disabled check [General folders options](/setting-up/behaviour/general-folders-options#show-application-menu)) and if you still haven't created any app command, you have to click on the `Create app commands...` button.
If you already have some commands, go to `More options >> Define hotkeys`.
After clicking on the button, a pop-up will appear where you can set you app commands.
The Create commands tool
1. Select any row to put a command
2. Double click on the `Action name #` and put the name of the action that command will perform
3. Instead of the number you can put an unicode emoji to identify the command on the droptop bar if you enabled the [General folders options](/setting-up/behaviour/general-folders-options#show-application-commands) option
4. On the bottom chose if the action the command will perform is an hotkey or if it has to run a program, and select accordingly
* If you want to execute an hotkey, write the hotkey command to be sent by AutoHotKey. To help you with the configuration you can click on the keyboard icon that will display an interactive keyboard that will complete the hotkey easily
* If you want to run a program, paste the path of the program you want to launch
5. Chose a color of the command by clicking on the white dot and adjust the RGB values to reach the color you want
6. Click save commands to close the tool, and the commands will be available right away
{% hint style="info" %}
Remember to click enter when you finish writing
{% endhint %}
## Share your commands
If you want to share your commands for a specific app with someone, open the tool again and click on the share button. Your commands will be compiled and a folder with an `.rmskin` of your commands will open. Share that file to anyone that needs it!
{% hint style="info" %}
A Powershell window could appear during compiling, that's normal
{% endhint %}
# Introduction
How to create a Community App
{% hint style="warning" %}
**Tip:** If there is any part of this tutorial that does not explain something adequately, or does not explain it properly, please let us know.
{% endhint %}
## What is a Community App?
Users of Droptop can install Community Apps, small applications made by other Droptop users that enable some additional feature, shortcut, websites, information monitoring, or other functionality. These can be tailor made just for your own use, or made to share with other users.
## What can a Community App do?
A Community App can do anything that is possible with Rainmeter, including but not limited to, launching an application or URL, conveying system information such as hard drive space, network speed, parse and display data from the internet including weather information, server status, or even display a webpage, etc.\
\
Currently Droptop has Community Apps that can display your VPN status and IP location, music playback controls, play YouTube videos, your online music library, display the top stories on a news site, or launch games on your PC with cover art images.
## What can't a Community App do?
Community Apps cannot be used to execute commands on a user's PC that require administrator privileges, such as modify or remove system files. Community Apps are not meant to be complicated, and are most useful when they are designed to serve a very simple purpose.
## How are Community Apps installed?
Go to and browse from a list of available Community Apps other users have already created. All you need to do is download & install the app. When a new app is installed, a menu will appear asking which of Droptop's ten available Community App slots the app should go in. The Community App will appear automatically in the bar and immediately ready to use.
When a Community App is installed but is already active in the bar, it is treated as an Update. Users will instead see a menu with an option to update the app, preserving their user settings from the previous installation, or to reset all settings to their default values (Reinstall from scratch).
# Start making a new app
{% hint style="info" %}
If you don't know what editor to use, take a look at the [Rainmeter editor](/tips/editor) page.
{% endhint %}
## Create a new app
You can create 2 types of community apps:\
\
The `Droptop App` option is recommended if you intend for your app to read local files on the PC, control your PC's settings, open a file/folder, or display any system information, like volume control or CPU usage. A `WebView App` is recommended for displaying content from the web.
{% tabs %}
{% tab title="Droptop App" %}
A `Droptop app` is for creating an app using Rainmeter code, and can either be a simple button in the bar that launches a shortcut, or expands into a dropdown menu with various options when clicked.
1. Start off by going `Droptop settings >> Community apps >> Create new app`
2. A window will open. Select `Droptop App`
3. Choose a name for your app and the author's name, pressing `Enter` to confirm your entry
4. Select `Choose an icon for your app`. Select a `.png` image of your choice, preferably `32x32` pixels. This icon is what will appear in the bar. You can find icons for your app at [flaticon.com](https://flaticon.com), or you can make your own.
5. There are two options available to create your Droptop App, select an option based on the type of app you want to make:
* `App has a dropdown menu`: clicking on the button on droptop, the app will open a dropdown menu.
* `App is just a button`: clicking on the button no droptop, the app will perform an action.
6. Use the option `Use full color icon` if you want the icon in the bar to always be the same color as the image uploaded - Otherwise, the color of the icon will follow the user's current theme and color settings.
7. Select `Generate app` when ready.
{% endtab %}
{% tab title="WebView App" %}
A `WebView app` is for displaying a web page of your choice in a dropdown menu. This can already exists or you can create your own with some html & css!
1. Start off by going `Droptop settings >> Community apps >> Create new app`
2. A window will open. Select `Webview app`
3. Choose a name for your app and the author's name
4. Select `Choose an icon for your app`. Select a `.png` image of your choice, preferably `32x32` pixels. This icon is what will appear in the bar. You can find icons for your app at [flaticon.com](https://flaticon.com), or you can make your own.
5. Use the option `Use full color icon` if you want the icon in the bar to always be the same color as the image uploaded - Otherwise, the color of the icon will follow the user's current theme and color settings.
6. Select `Generate app` when ready.
7. **For the simplest way to make a WebView app**, use the google search page to get to your desired website, (or click the ๏ธ button, then "Google" in the dropdown) then click the โฐ hamburger button in the top-right corner and select "Set this page as default" - The website will now be the default website that opens when the app launches.
1. If you want to make a more advanced WebView app than something that just displays a specific website, you can edit the contents of the ๏ธor โฐ dropdown menus to display more options, like being able to navigate to a set of different websites.
2. Change `NumberOfActionIcons=` to anything from 0 to 5 to increase or decrease the number of dropdown menus available in the top-right corner.
3. Double right-click on each dropdown and select Edit Skin to make changes. Change `NumberOfItems=` to the number of dropdown items (Up to 10 for each dropdown menu).
{% endtab %}
{% endtabs %}
## Editing your new app
1. Your new app will now appear in the bar. If you selected `WebView app` or `Droptop app` with `App has a dropdown menu` enabled, clicking on the app icon will open your app.
2. Right-click twice (Double right-click) anywhere inside of your app to open a quick navigation menu. Here you can access the essential files and folders that make-up your app. Select `Edit skin (Custom app.ini)`
3. The code for your app's main dropdown menu will appear.
4. To change the icons in the dropdown menus, just change the value of `ItemIconFileNameX=` to the name of an icon file in the Icons folder (Double right-click >> Open Icons folder). You can find new icons at [flaticon.com](https://flaticon.com), or you can make your own.
1. Icons should be pure white - Use `Droptop settings >> Support >> Developer tools >> Create 32x32 button images` and select your icon file to convert your icons automatically. Your converted icon will be called `Button32.png` - Rename that file to your desired file name and move it to the Icons folder in your app's folder.\
## Understanding the basics
If you haven't already, refer to the Rainmeter Documentation () to familiarize yourself with concepts such as Bangs, Sections, Variables, and other essential parts of how Rainmeter works.
If another Droptop Community App has a similar feature or special function that you would like to include in your app, you can edit that app and see exactly how it was implemented. Use that knowledge to learn and assist in adding that feature to your app.
# Variables
The following list of variables can be used inside any Droptop Community App to relay the specified information:
## #NumberOfItems#
The NumberOfItems variable will determine the how many items will be present in the menu. These can either be individual items that launch a shortcut or perform some function, or they can be folders that open a submenu containing additional options. Each menu can contain up to a maximum of 10 items.
## #ItemText1# - #ItemText10#
The text that will appear for each item. These variables are labelled 1 through 10 in order as the items appear in the menu. (eg. To edit the text of the 5th item in the menu, edit the value for `ItemText5`)
## **#ItemIsFolderX#, #ItemIsToggleX#, #ItemIsCheckmarkX#**
Set the value of these variables to 1 to designate that item as either a folder (That opens a submenu), a toggle (That changes the value of a single key to either a 1 or 0, or a checkmark (That changes the value of a single key to one of many possible values)
## **#ItemAction1# - #ItemAction10#**
Here you enter the bangs (actions) that will take place when the item is clicked. `ItemIsFolder` must equal 0 for these actions to occur. Actions can be set to occur if `ItemIsToggle` or `ItemIsCheckmark` is used, but are not required.
## #NumberOfBoxes#
The NumberOfBoxes can be any number between 0 and 5. Boxes can be used to display additonal information, shortcuts, or separate functions from the rest of the app. Most apps will not require the use of Boxes, in which case, set the value of this variable to 0.
## #BoxHeight1# - #BoxHeight5#
Select the height in pixels for each respective box. The height of the box will automatically scale up or down depending on the size setting in Droptop.
## #DividerExists1# - #DividerExists9#
Set to 1 to enable a divider at that position - eg. DividerExists1=1 will enable a divider between item 1 and item 2. Add up to 9 dividers between up to 10 items.
## #CheckmarkKeyA#, #CheckmarkKeyB#, #CheckmarkKeyC#
Assign a key name (ie. a Variable name) to a Checkmark Key group A, B, or C. You can assign multiple items to associate with this key group. For example:\
\
`CheckmarkKeyA=MyKey`\
\
`ItemIsCheckmark1=1`\
`ItemCheckmarkGroup1=A`\
`ItemCheckmarkValue1=1`\
\
`ItemIsCheckmark2=1`\
`ItemCheckmarkGroup2=A`\
`ItemCheckmarkValue2=2`\
\
The above example assigned MyKey to Checkmark Group A. Items 1 and 2 are both designated as checkmarks (ItemIsCheckmarkX=1), and assigned to Group A (ItemCheckmarkGroupX=A). Clicking on Item 1 will assign the value of MyKey to 1 (ItemCheckmarkValue1=1) and clicking on Item 2 will assign the value of MyKey to 2 (ItemChekmarkValue2=2).\
\
A single menu can have up to 3 different checkmark groups.
## #ItemToggleKey1# - #ItemToggleKey10#
When using ItemIsToggleX=1, enter the name of the Key (ie. Variable name) of that clicking on that item will change. For example:
`ItemIsToggle1=1`\
`ItemToggleKey1=MyKey`
Clicking on Item 1 will toggle the value of MyKey between 1 and 0. This is useful for turning off a feature (0 or false) or turning on a feature (1 or true).
## #ItemIconFileName1# - #ItemIconFileName10#
Add .png icons to the `Documents\Rainmeter\Skins\App_Name-Author_Name\Icons` folder. In ItemIconFileNameX=, enter the filename of that icon you want to assign to the item. Eg. If you have a file in the Icons folder called "World.png" and you want to assign that icon to Item 5, use ItemIconFileName5=World.
## #MyAppID#
Can be used to return the folder name for your app (Eg. "`Sample_App-Cariboudjan`")\
\
You can also use `[##MyAppID#]` to return the app's current slot number (1 to 10).
{% hint style="warning" %}
This variable cannot be used in `BackgroundProcesses.inc` or `BarModifier.inc`
{% endhint %}
## #MyAppName#
Can be used to return the formatted name of your app (Eg. "`Sample App`")
{% hint style="warning" %}
This variable cannot be used in `BackgroundProcesses.inc` or `BarModifier.inc`
{% endhint %}
## #MyAppAuthor#
Can be used to return the formatted name of the author (Eg. "`Cariboudjan`")
{% hint style="warning" %}
This variable cannot be used in `BackgroundProcesses.inc` or `BarModifier.inc`
{% endhint %}
## #MyVariablesLoc#
Can be used to return the location of the Variables.inc file (Eg. "`C:\Users\%USERNAME%\Documents\Rainmeter\Skins\Droptop Community Apps\Apps\Sample_App-Cariboudjan\Variables\Variables.inc`")
{% hint style="warning" %}
This variable cannot be used in `BackgroundProcesses.inc` or `BarModifier.inc`
{% endhint %}
## #MyAppLoc#
Returns `"Droptop Community Apps\Apps\App_Name-Author_Name"`
{% hint style="warning" %}
This variable cannot be used in `BackgroundProcesses.inc` or `BarModifier.inc`
{% endhint %}
## **\[#CustomAppInstallDate\[##MyAppID#]]**
Returns the date the app was installed on the user's PC in `YY.MMDD` format.
{% hint style="warning" %}
This variable cannot be used in `BackgroundProcesses.inc` or `BarModifier.inc`
{% endhint %}
## #DroptopSize#
Returns the current scale multiplier of Droptop, from 0.8 (80%) to 2.5 (250%). More information on `#DroptopSize#` can be found in the "How to Scale w/ Examples" section of this tutorial.
## #DropdownMenuWidth#
Will return the current width of the app or submenu. You can also use `[#CURRENTCONFIGWIDTH]`. This variable does not need to be scaled with `#DroptopSize#`.
Add `DropdownMenuWidth=(999*#DroptopSize#)` to the `[Variables]` section of any of your menus to set any specific width. By default, your app's width is determined by the current theme the user has enabled.
## #DropdownItemHeight#
Will return the height of a single item in a dropdown or submenu. This variable does not need to be scaled with `#DroptopSize#`.
By default, your app's item height is determined by the current theme the user has enabled.
## \[#PlayerTitle\[#PlayerTypeNum]]
Returns the title of any song or media playing, if any.
## \[#PlayerArtist\[#PlayerTypeNum]]
Returns the artist of any song or media playing, if any.
# How to Scale w/ Examples
## How to scale your app with the Size setting
Droptop can scale anywhere between 80% to 300% of its original size. In order for your app's meters to be position on their X/Y axis and to be the correct Width/Height regardless of the scale Droptop is set to, you will need to include the `#DroptopSize#` variable in all X/Y and W/H parameters for each meter you create, as well as anything that has to do with a Meter's size, such as a string's `FontSize` parameter, padding, etc.
Included meters, such as the dropdown menu, items, and default text and shapes all automatically scale with Droptop - Only meters you create will need to include the `#DroptopSize#` variable.
## Using the `#DroptopSize#` variable, Examples
The value of `DroptopSize` is equal to 1.0 at 100%, 0.8 at 80%, 1.5 at 150%, and 3.0 at 300%. If you are creating an app for the first time, it's recommended that you build your app with Droptop set to 100% scale - This way you can add the `#DroptopSize#` variable to your Meters later on in the development process.
## Example 1
### Example 1A - Without scaling
{% code overflow="wrap" lineNumbers="true" %}
```ini
[StringMeter]
Meter=String
FontSize=12
X=8
Y=15
W=#DropdownMenuWidth#
H=#DropdownItemHeight#
Padding=5,0,5,0
```
{% endcode %}
### Example 1B - With scaling
{% code overflow="wrap" lineNumbers="true" %}
```ini
[StringMeter]
Meter=String
FontSize=(12*#DroptopSize#)
X=(8*#DroptopSize#)
Y=(15*#DroptopSize#)
W=#DropdownMenuWidth#
H=#DropdownItemHeight#
Padding=(5*#DroptopSize#),0,(5*#DroptopSize#),0
```
{% endcode %}
### Let's review
In the above example, we multiplied `FontSize`, `X`, `Y`, and `Padding` by `#DroptopSize#`. We did not multiply `#DropdownMenuWidth#` or `#DropdownItemHeight#` because these variables already scale automatically with Droptop. In padding, we only multiplied the sections of padding containing a value - We do not need to scale a value if it equals 0.
Let's try another example...
## Example 2
### Example 2A - Without scaling
{% code overflow="wrap" lineNumbers="true" %}
```ini
[ImageMeter]
Meter=Image
ImageName=#SKINSPATH#Droptop Community Apps\Apps\#MyAppID#\Images\MyImage.png
X=[StringMeter:X]
Y=([StringMeter:YH]+5)
W=100
H=100
```
{% endcode %}
### Example 2B - With scaling
{% code overflow="wrap" lineNumbers="true" %}
```ini
[ImageMeter]
Meter=Image
ImageName=#SKINSPATH#Droptop Community Apps\Apps\#MyAppID#\Images\MyImage.png
X=[StringMeter:X]
Y=([StringMeter:YH]+(5*#DroptopSize#))
W=(100*#DroptopSize#)
H=(100*#DroptopSize#)
```
{% endcode %}
### Let's review
In the above example, we set the X position to match the X position of `StringMeter` and the Y position to match the Y plus its Height of `StringMeter` - These do not need to be scaled as the `X`, `Y`, and `H` of `StringMeter` are already scaled. But the 5 in the `Y` parameter does need to be scaled. We also scaled the Meter's Width and Height.
# Parts of your app
There are a few key components of any app
## The main config
The main portion of your app is the first dropdown to appear when your app is clicked on. `CustomApp.ini` and `MainConfig.inc` handle this portion of the app.
In the main section of your app's folder you will also find the Icons folder. Inside you will find `1Icon.png` to `10Icon.png` representing items 1 through 10 in `CustomApp.ini` respectively. You can edit these files with a program such as GIMP to create your own icons, or use existing icons from the web.
**Note:** All icons should be white (255,255,255 or FFFFFF) in color and be 32x32 sized .png images.
## Submenus
Inside your app's folder is a folder aptly titled "`Folder`". Inside you will have `Folder1.ini` to `Folder10.ini`. `Folder1.ini` will be accessible when `ItemIsFolder1` in `CustomApp.ini` is equal to 1. `Folder2.ini` will be accessible when `ItemIsFolder2` in `CustomApp.ini` is equal to 1. etc.
Each submenu contains its own `#NumberOfItems#` and `#NumberOfDividers#` variables, similar to `CustomApp.ini`. Submenu items cannot be folders, only clickable items that perform some action, or display some information.
All 10 submenus share any meters or measures that are contained within `FolderConfig.inc`.
Icons for each submenu are located in the `Folder\Icons\` folder, with each numbered folder representing each `Folder1.ini` to `Folder10.ini` submenu respectively. Inside each Icons folder are `1Icon.png` to `10Icon.png`, representing the icon for each item in that specific submenu.
**Note:** All icons should be white (255,255,255 or FFFFFF) in color and be `32x32` sized .png images.
## Dividers
For mor informations about Dividers, see the [Broken mention](broken://pages/hwbw4VMZGt0Lw3z5keoR) section of this tutorial.
## Variables
For more informations about Variables, see the [Variables Files](/community-apps/parts-of-your-app/variables-files) section of this tutorial.
## Background Processes
For more informations about Background Processes, see the [Background Processes](/community-apps/parts-of-your-app/background-processes) section of this tutorial.
## BarModifier
For more informations about BarModifier, see the [BarModifier](/community-apps/parts-of-your-app/barmodifier) section of this tutorial.
## Settings menu
For more informations about the Settings menu, see the [Settings Menu](/community-apps/parts-of-your-app/settings-menu) section of this tutorial.
# Variables Files
## What is the difference between a .INI and a .INC?
An INI file is a config file that can contain Meters and Measures that can be opened by Rainmeter and visually displayed on your screen. Your app's dropdown menu, submenus, and the Droptop top bar are examples of an INI.
An INC is an @Include file. It can be used to add additional Meters and Measures to an INI file. Multiple INIs can use the same INC file simultaneously, and can include things like Variables you want multiple INI files to have access to. For example, if an INC file contains a variable `ExampleVariable=123` and two or more INIs @Include this INC file, all of those INIs will have a variable called `ExampleVariable` and it will equal `123`. Though they all share this same variable, it is important to note that they aren't then connected in any way. Modifying the value of the variable in one INI has no effect on the value of that same variable in another INI.
You can however use the bangs `[!SetVariableGroup ExampleVariable "456" "DroptopSuite"][!UpdateGroup "DroptopSuite"]` to modify the same variable to the same value to multiple Droptop skins simultaneously.
### VariablesDefault.inc
The `VariablesDefault.inc` should contain the same variables as `Variables.inc`, but with each variable's default setting. When your app is compiled, it removes the `Variables.inc` file from the install file. When your app is installed on a user's PC, the Variables.inc file is then created as a copy of the `VariablesDefault.inc` file.
After this occurs, `VariablesDefault.inc` acts only as a backup to restore the app to its default settings should the user need to.
### Variables.inc
The `Variables.inc` will be created automatically when the user installs your app for the first time. It is created as a copy of the `VariablesDefault.inc` file. All `[!WriteKeyValue]` bangs should be written to this file. Although both `VariablesDefault.inc` and `Variables.inc` both contain identical variables, the `Variables.inc` values will always supersede (take precedence) over the values in `VariablesDefault.inc`.
Variables in this file will exist inside of your app and all of its submenus, its settings menu, and inside of the Droptop bar and `BackgroundProcesses.ini`.
Values in this file will stay the same for the user even if you release an update for your app, allowing users to keep their settings. They will not need to reconfigure their settings each time they update your app.
### VariablesData.inc
`VariablesData.inc` is a convenient place to put any variables you want to create that are not set by the user. Using this file is convenient because unlike `Variables.inc`, the variables and values in this file will not be preserved by an update. This is a file to place any variable that the author uses for the general functionality of your app that can be subject to change as your app changes or improves. Like the other INC files, Variables placed in this file will also exist in the app, its submenus, app settings, the Droptop bar, and `BackgroundProcesses.ini`.
# Background Processes
## How BackgroundProcesses.inc works
`BackgroundProcesses.inc` can be used to run Measures in the background even when your app isn't open. This can be used to parse data from the web or monitor system information, and pre-write that data to your app's `VariablesData.inc` file, or dynamically update your app's icon in the bar to display new information on the fly.
Any measures that are created in this file will run inside of Droptop's `BackgroundProcesses.ini`. You can view the current values of your measures by right-clicking on the Rainmeter icon in the Windows system tray >> Selecting "About" >> "Skins" tab >> Select "Droptop\Other\BackgroundProcesses" from the side panel >> Scroll down to find your measure, or typing it to find the measure automatically.
## Example 1
The below example is used with the Recycle Bin app, created by Phan. Here, the `[PhanRecycleSize]` measure updates every 30 seconds (`UpdateDivider=30`), and checks the current size of the recycle bin. Depending on its size, it uses the !SetOption bang to dynamically adjust the Recycle Bin app's icon in the Top Bar.\
\
Notice that at the end of each `!SetOption` bang we include `"Droptop\DropdownBar"` to tell the bang which config we are sending this command to. If this parameter is not included, it will assume you are referring to the same config the bang exists in (`Droptop\Other\BackgroundProcesses`).
```ini
[Rainmeter]
[Variables]
;----------------------------------------------------
; # # ADD BACKGROUND PROCESSES BELOW # # # # # # # #
; # # Measures that run even when the app isn't open
;----------------------------------------------------
[PhanRecycleSize]
Measure=RecycleManager
RecycleType=Size
Drives=ALL
IfCondition=PhanRecycleSize <= 214748364
IfTrueAction=[!SetOption CustomApp#Recycle_Bin-Phan# ImageName "#SKINSPATH#Droptop Community Apps\Apps\Recycle_Bin-Phan\Button\#TopIconSize#\Button0[#TopIconShadows[#*TopBarFontShadow*][#*ChamLum1*][#LockTopBarShadow[#*LockTopBarShadowNum*]]].png" "Droptop\DropdownBar"]
IfCondition2=PhanRecycleSize > 214748364
IfTrueAction2=[!SetOption CustomApp#Recycle_Bin-Phan# ImageName "#SKINSPATH#Droptop Community Apps\Apps\Recycle_Bin-Phan\Button\#TopIconSize#\Button1[#TopIconShadows[#*TopBarFontShadow*][#*ChamLum1*][#LockTopBarShadow[#*LockTopBarShadowNum*]]].png" "Droptop\DropdownBar"]
IfCondition3=PhanRecycleSize > 429496729
IfTrueAction3=[!SetOption CustomApp#Recycle_Bin-Phan# ImageName "#SKINSPATH#Droptop Community Apps\Apps\Recycle_Bin-Phan\Button\#TopIconSize#\Button2[#TopIconShadows[#*TopBarFontShadow*][#*ChamLum1*][#LockTopBarShadow[#*LockTopBarShadowNum*]]].png" "Droptop\DropdownBar"]
IfCondition4=PhanRecycleSize > 644245094
IfTrueAction4=[!SetOption CustomApp#Recycle_Bin-Phan# ImageName "#SKINSPATH#Droptop Community Apps\Apps\Recycle_Bin-Phan\Button\#TopIconSize#\Button3[#TopIconShadows[#*TopBarFontShadow*][#*ChamLum1*][#LockTopBarShadow[#*LockTopBarShadowNum*]]].png" "Droptop\DropdownBar"]
IfCondition5=PhanRecycleSize > 858993459
IfTrueAction5=[!SetOption CustomApp#Recycle_Bin-Phan# ImageName "#SKINSPATH#Droptop Community Apps\Apps\Recycle_Bin-Phan\Button\#TopIconSize#\Button4[#TopIconShadows[#*TopBarFontShadow*][#*ChamLum1*][#LockTopBarShadow[#*LockTopBarShadowNum*]]].png" "Droptop\DropdownBar"]
IfCondition6=PhanRecycleSize > 1073741824
IfTrueAction6=[!SetOption CustomApp#Recycle_Bin-Phan# ImageName "#SKINSPATH#Droptop Community Apps\Apps\Recycle_Bin-Phan\Button\#TopIconSize#\Button5[#TopIconShadows[#*TopBarFontShadow*][#*ChamLum1*][#LockTopBarShadow[#*LockTopBarShadowNum*]]].png" "Droptop\DropdownBar"]
IfCondition7=1=1
IfTrueAction7=[!UpdateMeter CustomApp#Recycle_Bin-Phan# "Droptop\DropdownBar"][!Redraw "Droptop\DropdownBar"]
DynamicVariables=1
UpdateDivider=30
```
## Example 2
The below example is used with the Media Control app, created by Yaron. Here we reference measures such as `[MeasurePlayerWebTitle]`, `[MeasureWebArtist]`, and `[MeasureRepeatWeb]`. These measures exist in Droptop's BackgroundProcesses.ini config, and can be directly referenced inside your app's BackgroundProcesses.inc file. Any measure in BackgroundProcesses.ini can be directly referenced in the .inc file.\
\
Here we have measures that monitor the current value of the Song Title, Artist Name, and the status of the Repeat function in the currently-playing music or video. When these values change, it triggers the `OnChangeAction` in \[MediaControlCheckChange] measure, which changes the text of the Media Control app in the Top Bar to display the current Song and Artist information.
```ini
[Rainmeter]
;----------------------------------------------------
; # # ADD BACKGROUND PROCESSES BELOW # # # # # # # #
; # # Measures that run even when the app isn't open
;----------------------------------------------------
;----------------------------------------------------------------------
; Example # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
; Updates the top bar when CPU temperature changes
;
; UpdateDivider=10 rechecks the temperature every 10 seconds
; Recommended this number be no lower than 10 to prevent high CPU usage
;----------------------------------------------------------------------
[MediaControlCheckChange]
Measure=String
String=[MeasurePlayerWebTitle] - [&MeasureWebArtist]
OnChangeAction=[!SetOption CustomApp#Media_Control-Yaron# Text " [MediaControlCheckChange] " "Droptop\DropdownBar"][!SetVariable PlayerTitle1 "[&MeasurePlayerWebTitle]" "Droptop Community Apps\Apps\Media_Control-Yaron"][!SetVariable PlayerArtist1 "[&MeasureWebArtist]" "Droptop Community Apps\Apps\Media_Control-Yaron"][!UpdateMeter CustomApp#Media_Control-Yaron# "Droptop\DropdownBar"][!UpdateMeterGroup SysTray "Droptop\DropdownBar"][!UpdateMeterGroup HL "Droptop\DropdownBar"][!UpdateMeterGroup NotificationBar "Droptop\DropdownBar"][!Redraw "Droptop\DropdownBar"][!UpdateMeasure MeasureSongArtistName "Droptop Community Apps\Apps\Media_Control-Yaron"][!UpdateMeterGroup SongText "Droptop Community Apps\Apps\Media_Control-Yaron"][!Redraw "Droptop Community Apps\Apps\Media_Control-Yaron"]
RegExpSubstitute=1
Substitute="^ - $":" ... ","^(.{40})(.{0,})":"\1..."
DynamicVariables=1
[MediaControlCheckRepeat]
Measure=String
String=[MeasureRepeatWeb]
DynamicVariables=1
```
# BarModifier
## Making special changes to your app's icon
By default, your app is designed to open a dropdown menu containing your app or just be a simple button in the bar, but depending on how you want your app to work, you might want your app button in the Top Bar to have multiple icons, each with their own unique action when clicked, or display text, change color, or even change the settings of the bar itself, or any combination of these and more.
`BarModifier.inc` will allow you to make modification to the code of the top bar, including the button of your app and how it behaves. In your app folder, you will have a folder called `BarModifier`. Inside, you will find `BarModifier.inc`.
To make more advanced changes to BarModifier, it's recommended you take a look at some other apps other users have already made, copy the code to your BarModifier file, and make any adjustments you choose from there. For example, if you want to have an app that displays multiple icons in the bar, see the `BarModifier.inc` file for the [`Functions` app](https://www.droptopfour.com/community-apps/?id=41).
If you selected `"App is just a button"` when making your app, the action for what will happen when your app is clicked in found in BarModifier. Enter any bangs you would like clicking the app icon to perform on line `LeftMouseDownAction=`.
Tip: For meters/measures in BarModifier.inc that need to be updated every second or longer invervals, just add the following to the respective meters/measures:\
\
Every 1 Second: `Group=UpdateMeter1S` or `Group=UpdateMeasure1S`\
Every 10 Seconds: `Group=UpdateMeter10S` or `Group=UpdateMeasure10S`\
Every 5 Minutes: `Group=UpdateMeter5M` or `Group=UpdateMeasure5M`\
Every 20 Minutes: `Group=UpdateMeter20M` or `Group=UpdateMeasure20M`\
Every 1 Hour: `Group=UpdateMeter1H` or `Group=UpdateMeasure1H`\
Every 3 Hours: `Group=UpdateMeter3H` or `Group=UpdateMeasure3H`\
Every 1 Day: `Group=UpdateMeter1D` or `Group=UpdateMeasure1D`
# Settings Menu
## How to create a settings menu for your app
Right-click on your app and select `Options`. Here you will see your app's options. When you're ready to start adding any user-configurable options to your app, edit this settings menu in the same fashion as you would the primary app.
Generally, you should work on your settings menu last so you know exactly what you what options you want to be user-configurable (if any). But you can work on the Settings Menu at any point in your app's development.
If you do not want to include any user-configurable options in your app, set `#NumberOfItems#` to 1 and set the value of `ItemText1` to `#SettingsNoAppOptions#` (eg. `ItemText1=#SettingsNoAppOptions#`) and remove the dividers if necessary as described in the [Dividers](broken://pages/hwbw4VMZGt0Lw3z5keoR) section of this tutorial.
For an explanation of what each Item variable does, please review the [Variables](/community-apps/variables) section of this tutorial. Remember, you can also edit other Community Apps to use as reference.
## How variables are written to Variables.inc
Variables are written to `"#MyVariablesLoc#"`, which returns the path to your app's `Variables.inc` file. Go ahead and play with the toggles and checkmarks in the menu. Afterwards, open or reload your `Variables.inc` file and see how these values are changing.
Remember, all of these variables and their values exist in all other parts of your app, including in Droptop itself. Add or modify the existing variable names, values, and how those variables are used to modify the conditions of your app. You're on your way to making a settings menu!
# Compile & Share the App
## How can I share a Community App?
Once you're happy with your app and ready to share it, go to `Droptop settings >> Community apps >> Share creation` and select your app. An installer for your app will be generated and after a few seconds, the containing folder will open on your screen.
{% hint style="info" %}
Before you do this, it's recommend making sure your Variables.inc and VariablesDefault.inc files contain the same variables, with `VariablesDefault.inc` having the default values for each variable.
{% endhint %}
Go to the Droptop Discord Server () and in any chat box type `/community_app new_release` and press enter. The Discord Bot will prompt you to drag the app install file into the box, then press `Enter`. A window will appear after a few seconds. Enter a short description for your app, your Github links if you have them, and continue.
Your app will then be uploaded to our Github, posted to the [Droptop website](https://droptopfour.com/community-apps), and a new thread for your app will be created in the [#๐โapp-releases](https://discord.gg/droptop-four-800124057923485728) channel on Discord.
## Releasing an update for your app
If you added more content to your app, or fixed a bug. Just use the `/community_app new_release` Discord Bot command again and follow the same steps as above with the new install file for your app. The new install file will then replace your previous entry. Only the original author (You), an Administrators of the Droptop Server or any user you authorize to manage your app (using the `/community_app edit` command) can remove or make changes to your app.
## Letting other people know you've updated your app
*This is done automatically!* When you update your app via the Discord Bot command, it'll automatically timestamp that update. The update notification gets pushed to all Droptop users connected to the internet. A green dot will then appear next to your app's icon in the Top Bar, and when right-clicked, an option will be available to download your app's latest update.
# README
How to use the default readme
When you create a community app, a README.md file will be created, as a template that can be used to standardize the possible [GitHub](https://github.com) repositories.
To edit the file you need to know about markdown and how to use it. Check this [guide](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax).
## The default file
{% tabs %}
{% tab title="Preview" %}
## Key Features
## How to use
## Download
## Credits
## License
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Header
Header
<h1 align="center">
<br>
<a href="#"><img src="Images/Logo.png" alt="Logo" width="200"></a>
<br>
Your App Name - Author Name
<br>
</h1>
The logo of the readme is taken from the local files of you repository, in the `Images` folder.
Below you set the *App Name* and the *Author Name*.
### Description
Description
{% code overflow="wrap" %}
```markdown
Small description of your app.
```
{% endcode %}
Put here a small description of your app, but not every little detail, there will be space for that below.
### Badges
The badges are the most difficult and important part of the readme: since they appear immediately to the eye, it's crucial they are set correctly.
1. **Version Badge**: this badge is dynamic, and it syncs automaticaly with the infos of the droptop website. It's important to replace `'Sample%20App'` with the name of the actual app on the website. (Instead of spaces you need to use `%20`) (Example: `My%20Beautiful%20App`)
2. **Website Badge**: static badge for the Droptop website.
3. **Discord Server Badge**: static badge for the Discord server.
4. **Downloads Badge**: this badge is dynamic, and it syncs automatically with the infos of the repo of the app.
{% hint style="info" %}
If the Downloads Badge errors, it might be because you hit GitHub's rate limits. You can increase Shields.io's rate limit by [adding the Shields GitHub application](https://img.shields.io/github-auth) using your GitHub account.
{% endhint %}
### Table of contents
```
{% endcode %}
You need to add here every header to make users able to navigate to that section faster. You can add, remove and modify the existing ones.
### Screenshot
Screenshot
```markdown
```
You can embed a screenshot of your app, from the local files of you repository, in the `Images` folder.
### Content
Content
{% code overflow="wrap" lineNumbers="true" %}
```markdown
## Key Features
## How to use
## Download
## Credits
## License
```
{% endcode %}
Here you'll put every information regarding your app, from features to licenses. If you add, remove, modify the headers, remember to edit the [#table-of-contents](#table-of-contents "mention") too.
[^1]: Replace with your app name (ex: `My%20App`)
# Introduction
How to create a Community Theme
{% hint style="warning" %}
**Tip:** If there is any part of this tutorial that does not explain something adequately, or does not explain it properly, please let us know.
{% endhint %}
## What is a Community Theme?
Standard themes are fine, if you [buy the supporter version](https://gumroad.droptopfour.com) you still have more options to choose from, but no theme is yours like the one you create yourself.
A Community Theme is a theme created by Droptop users to have a better experience of Droptop. Those themes can also be compiled and shared between Droptop users, and published on the [Droptop Four website](https://droptopfour.com/community-themes).
# Start making a new theme
How to create a Community Theme
## Open the Theme Builder
Navigate to `Droptop settings >> Themes >> (Community Theme) >> Launch Theme Builder`.
In the Theme Builder you can:
1. Use the provided dropdown menu to navigate between editing various different categories of your theme (eg. color, font, size, shape, spacing, etc.)
2. Use the side bar to choose from a list of available options for that category.
3. Use the slider to adjust the option.
Take your time, jump around on all the options and configure the theme how you like it!
# Compile & Share the Theme
When you finished setting up your theme, you have to click `Save & share`.
The process will now be different if you have to create a new theme or you have to update an existing one:
{% tabs %}
{% tab title="Create new theme" %}
If you are creating a new theme, click on the `New theme` button, choose the name of the theme and insert the name of the creator (you). Then put an image of the theme to show other users how the final result will be after installing your theme.\
Then click on the `Generate theme` button and wait for the compiling to end.
{% endtab %}
{% tab title="Update existing theme" %}
If you want to update an existing theme, click on the `Update theme` button.\
You won't be able to change the theme name or the author name, but you can change the image of the theme. If you want to use the same image that you choosed previously, tick the box `Re-use existing image`.\
Then click on the `Generate theme` button and wait for the compiling to end.
{% endtab %}
{% endtabs %}
When finished, an .rmskin file will be generated. Go to the [Droptop Discord](https://discord.gg/droptop-four-800124057923485728) server and type the command `/community_theme new_release` in any chat box. Drag & drop the .rmskin file to the box that appears in the chat, or click the box to select a `.rmskin` file from Windows Explorer. Press enter to submit.
Your app will then be uploaded to our Github, posted to the [Droptop website](https://droptopfour.com/community-themes), and a new thread for your app will be created in the [#๐โtheme-releases](https://discord.gg/droptop-four-800124057923485728) channel on Discord.
# Rainmeter editor
Set up an editor to work on your Rainmeter projects
It's recommended you install an **advanced editor** instead of using the Windows Notepad to work on your Rainmeter projects and files, since they usually offers a lot of useful functions, like **syntax highlighting** or **errors recognition**.
The two editors we recommend are:
[#notepad++](#notepad++ "mention")
[#visual-studio-code](#visual-studio-code "mention")
## Notepad++
You can download **Notepad++** from its official website here: . Set **Notepad++** as your official editor for Rainmeter by following these steps:
1. In the system tray, right-click on the Rainmeter icon
2. Select `Manage`
3. Go to the `Settings` tab
4. Next to `Editor`, select the `...` button
5. Navigating to the Notepad++ executable in `C:\Program Files\Notepad++\notepad++.exe` *(The installation path could change from user to user)*
Enable Notepad++ as default Rainmeter editor
6. It's also recommended you install the addon for Notepad++ called **RainLexer**.
7. Restart Notepad++ and in the Notepad++ menu bar, go to `Language` and select `Rainmeter`
Enable the Rainmeter linguage syntax highlighting
## Visual Studio Code
You can download **VSCode** from its official website here:[ ](https://code.visualstudio.com/download). Set **VSCode** as your official editor for Rainmeter by following these steps:
1. In the system tray, right-click on the Rainmeter icon
2. Select `Manage`
3. Go to the `Settings` tab
4. Next to `Editor`, select the `...` button
5. Navigating to the VSCode executable in `C:\Program Files\Microsoft VS Code\Code.exe` *(The installation path could change from user to user)*
Enable VSCode as default Rainmeter editor
6. It's also recommended you install the extension for VSCode called **Rainmeter Support**.
7. Restart **VSCode**
# FAQs
Find the most frequently asked questions for Droptop
{% hint style="danger" %}
## We value your feedback!
If you cannot find what you were looking for, or there is something wrong about this page, please let us know!\
Drop us an email at or send us a message in our [Discord server](https://discord.droptopfour.com)!
{% endhint %}
## I paid for the Supporter Version, but lost it.
**Problem:** Need to restore Supporter Version purchase.
{% tabs %}
{% tab title="Solution" %}
**Check your email for the download link**
1. Go to your email provider (Gmail, Outlook, etc.)
2. Search your inbox for "Droptop" or "Gumroad", and see if you have a download link
* If you have only an invoice of the payment, send it to an administrator of the [discord server](https://discord.droptopfour.com) and you'll be added to a channel where you'll find the supporter version
{% hint style="info" %}
Note: Droptop's core (basic version) needs to be installed prior to applying the "Supporter Version" upgrade
{% endhint %}
{% endtab %}
{% endtabs %}
## I can't install the update
**Problem:** Receiving an error when installing the update
{% tabs %}
{% tab title="Solution 1" %} **Close any programs that may be accessing any files inside Droptop, and try the installer again. If this doesn't solve the problem, simply log off of your Windows account, log back in, and try the installer again.**
{% endtab %}
{% endtabs %}
## I want to change the name of an application in the bar
**Problem:** An application I'm using isn't the name I want displayed on the bar
{% tabs %}
{% tab title="Solution" %} **Create your own substitution**
To rename a program name in Droptop, open that program. It's name will appear in the top-left corner of the Droptop bar. Click on it, go to `More Options >> Change app name`. Use the text box to set a new name, press enter when finished, and select "Set new name" to finish.
{% endtab %}
{% endtabs %}
## Droptop is running slowly
**Problem:** Droptop is slow
Solution: Try...
{% tabs %}
{% tab title="Solution 1" %} **Enable Hardware Acceleration**
1. Right-click on the Rainmeter icon in the Windows system tray (it's rain drop shaped)
2. Select "Manage"
3. Select the "Settings" tab
4. Check box "Use hardware acceleration (Requires restart)"
5. Right click on an empty portion of the Droptop bar. Select More options >> Restart Rainmeter.
{% hint style="info" %}
Some PCs may have issues with hardware acceleration turned on, including slower performance and graphical glitches. If these occur, disable hardware acceleration
{% endhint %}
{% endtab %}
{% tab title="Solution 2" %} **Disable**** ****`Use heavy blur`**
1. Go to Droptop settings >> Options >> Blur effects
2. Disable "Use heavy blur effect"
3. Note: This setting is theme-specific. You may need to re-disable this setting if you switch to another theme.
{% hint style="info" %}
Some PCs may have issues with hardware acceleration turned on, including slower performance and graphical glitches. If these occur, disable hardware acceleration
{% endhint %}
{% endtab %}
{% tab title="Solution 3" %} **Disable**** ****`Log to file`**
1. Right-click on the Rainmeter icon in the Windows system tray (it's rain drop shaped)
2. Select `Manage`
3. Select the `Settings` tab
4. De-select `Log to file`
{% endtab %}
{% tab title="Solution 4" %} **Close the "About Rainmeter" window**
1. If you have a window open titled "About Rainmeter", having this window open can substantially slow the program down
2. Close the window or select a skin in the window that isn't Droptop
{% endtab %}
{% endtabs %}
## How do I optimize Droptop for good battery life?
{% hint style="info" %}
Although Droptop uses very few resources when sitting idle in the background, you may want to optimize Droptop for extended laptop battery life. Here are some solutions:
{% endhint %}
**Problem:** I need to maximize my battery life
{% tabs %}
{% tab title="Solution 1" %} **Disable unused system tray apps**
1. Right-click on a system tray app in the top-right corner
2. De-select any apps you don't frequently use. Apps can be re-enabled later at any time.
{% endtab %}
{% tab title="Solution 2" %} **Enable**** ****`Game mode`**
1. When not using Droptop for an extended period of time, you can go to the Windows system tray, right-click on the Rainmeter icon (the rain drop icon), and select "Game mode". Droptop will deactivate completely
2. To reactivate Droptop, de-select the "Game mode" option.
{% endtab %}
{% endtabs %}
## My Music & videos aren't showing up in the Volume app or on the top bar
**Problem:** Not displaying song title & artist in the Volume app
{% tabs %}
{% tab title="Solution 1" %} **Install the latest version of WNPRedux for your players**
* **Chrome/Edge**: [Chrome Web Store](https://chrome.google.com/webstore/detail/webnowplaying-redux/jfakgfcdgpghbbefmdfjkbdlibjgnbli)
* **Firefox**: [Mozilla Addon Store](https://addons.mozilla.org/en-US/firefox/addon/webnowplaying-redux)
* **Desktop players**: Works out of the box
{% hint style="info" %}
Spotify doesn't need Spicetify to work with Rainmeter, as long you have installed a version of the WNP plugin > 2.0.0
{% endhint %}
{% hint style="info" %}
For further informations about supported players and websites visit
{% endhint %}
{% endtab %}
{% tab title="Solution 2" %} **Restart Rainmeter or restart your PC.**
{% endtab %}
{% endtabs %}
## My weather, browser media, or email aren't updating
**Problem:** Web-based info (Like weather info) or plugins aren't retrieving data
{% tabs %}
{% tab title="Solution 1" %} **Exit and re-open Rainmeter**
1. Go to the Droptop "Home" button in the top-left corner >> select `Restart Rainmeter` >> Restart Rainmeter now
{% endtab %}
{% tab title="Solution 2" %} **Check your internet connection and/or restart your PC.**
{% endtab %}
{% endtabs %}
## Gmail isn't working
**Problem**: Unread email isn't appearing in the Gmail app
{% tabs %}
{% tab title="Solution 1" %} **Using 2-Step Verification? Create an app password for use with Rainmeter & Droptop**
1. In Security settings of your Gmail account, navigate to "App passwords"
2. Under the "App" dropdown menu, select "Other"
3. Type "Droptop" and press enter
4. Google will generate a password for you. Copy the password
5. In `Droptop settings >> Options >> Apps >> Mail` menu, paste the password into the password field and press enter
{% endtab %}
{% tab title="Solution 2" %} **Check your Gmail account settings**
1. In the `Droptop settings >> Options >> Apps >> Mail` menu, set your Gmail username and paste the app password provided in Solution 1.
2. Press enter to confirm your entry after typing
{% endtab %}
{% endtabs %}
## My game detects a violation
**Problem:** My game doesn't start cause it detects a security violation
{% tabs %}
{% tab title="Solution 1" %} **Use Rainmeter Game Mode**
Take a look at the documentation for the [Rainmeter Game Mode](https://docs.rainmeter.net/manual/user-interface/manage/#GameModeTab), and configure it the way you like
{% embed url="" %}
Rainmeter Gamemode documentation
{% endembed %}
{% endtab %}
{% endtabs %}
%5D.app.version&prefix=v&label=Version&color=43ff64){kind=icon}
