User Interface Settings - WordPress Download Manager

The User Interface settings tab allows you to customize the visual appearance of WordPress Download Manager throughout your site. Access these settings from Downloads > Settings > User Interface.

Typography

Font Family

Select the font family for WPDM elements:

Theme Default – Uses your theme’s font settings
System Font Stack – Uses system fonts for optimal performance
Custom – Specify a custom Google Font

Font Sizes

Element	Default Size	Range
Headings	18px	14px – 24px
Body Text	14px	12px – 18px
Button Text	14px	12px – 16px
Small Text	12px	10px – 14px

Google Fonts

Search fonts: This allows you to search and select a Google font for your site. You can type the name of a font in the search bar to find and apply it.
Preview: It shows a sample text with the selected font, so you can preview the appearance of the font before applying it.
Font Size and Style: There are options to adjust the font style (like Bold, Italic, etc.) and size for different text elements. These settings are useful for personalizing the appearance of your website.

Colors

Configure the primary colors used across all WPDM elements:

Setting	Description	Default
Primary Color	Main accent color used for buttons, links, and key elements.	#3B82F6
Secondary Color	Supporting color for secondary elements, such as backgrounds or borders.	#64748B
Success Color	Color used to highlight successful actions, like successful downloads or positive messages.	#10B981
Danger Color	Color for error states, warnings, and actions like delete buttons.	#EF4444
Info Color	Color for informational messages or details, often used for tooltips or informational pop-ups.	#2CA8FF
Warning Color	Color used for warning messages or alerts, often used to draw attention to potential issues or cautions.	#FFB236

Customize the color in three states for each element (default, hover when users hover over it, and active when clicked).

Use case:

Align the website’s color scheme with your brand’s color palette or make design elements stand out with contrasting colors.
Improve user experience with dynamic color changes, making your site feel interactive and providing visual feedback for user actions.

Color Scheme

System: Follows the user’s operating system settings for dark or light mode.
Light: Forces the Download Manager’s content background and font colors to always use the light mode.
Dark: Forces the Download Manager’s content background and font colors to always use the dark mode.

Download Button

You can customize the appearance of the download buttons across both the Details Page and any pages using shortcodes. The settings allow you to select the button’s color, size, and border radius, and preview how it will look before applying.

Button Color: Use the radio buttons to select the button color. Options include None, Primary, Secondary, Success, Danger, Info. Each style changes the button’s color to reflect different action types (e.g., success or danger) for a clear visual hierarchy.
Button Size: Choose from various sizes, such as Extra Small, Small, Regular, or Large, depending on how prominent you want the button to appear on the page.
Border Radius: Adjust the roundness of the button’s corners to make them more modern and rounded, or keep them square for a more traditional look. You can customize this by setting the radius value, with the default being 4.
Preview: As you customize the button settings, a live preview is displayed, allowing you to see exactly how your changes will look on the page before saving them.

Front-end UI

Disable FontAwesome: Turn off FontAwesome icons on the front-end.
Disable front-end stylesheet: Turn off the WPDM default front-end styles, allowing you to apply your custom CSS.

Use case:

Use custom icons or avoid loading FontAwesome for a cleaner or more lightweight design.
For advanced users who want complete control over the site’s appearance and design by applying their own styles.

Image and Previews

Crop thumbnails: Enables the cropping of preview image thumbnails on the front-end to ensure consistent size.

Use case: Maintain a clean and uniform look for all images on your site by ensuring thumbnails are cropped to the same dimensions.

Admin UI

Left aligned settings page: Align the admin settings page to the left side of the screen.

Use case: Choose a layout that works better for your workflow or personal preference, offering a more compact admin interface.

Package Display

Default Template

Select the default link template for packages when none is specified:

Choose from installed link templates
Can be overridden per-package

Icon Settings

Setting	Description
Show File Type Icons	Display icons based on file extension
Icon Size	Small (16px), Medium (24px), Large (32px)
Custom Icon Pack	Upload custom SVG icon set

Dashboard Styling

User Dashboard Theme

Customize the appearance of the user dashboard:

Light – White background with dark text
Dark – Dark background with light text
Auto – Follows user’s system preference

Dashboard Layout

Sidebar – Navigation on the left (default)
Top Navigation – Tabs across the top
Minimal – Simplified single-column layout

Advanced CSS

Custom CSS

Add custom CSS rules that apply to all WPDM elements:

/* Example: Custom button styling */
.wpdm-download-link {
    border-radius: 8px;
    font-weight: 600;
}

CSS Class Prefix

By default, WPDM uses the wpdm- prefix for CSS classes. You can change this to avoid conflicts with other plugins.

Responsive Settings

Mobile Breakpoint

Set the screen width at which mobile styles apply:

Default: 768px
Range: 480px – 1024px

Mobile-Specific Options

Setting	Description
Stack Buttons	Stack buttons vertically on mobile
Reduce Padding	Use tighter spacing on mobile
Simplify Icons	Use simpler icons on mobile

Tips

Preview changes using the live preview button before saving
Use browser developer tools to test responsive settings
Custom CSS overrides take precedence over theme settings
Clear your cache after making changes for them to take effect