CSS Tweaks for the Simple Download Monitor Plugin

This page has a collection of CSS tweaks for the simple download monitor plugin.

You could use a plugin like the Custom CSS plugin to insert these CSS tweaks into your site (without modifying the plugin’s code). Your theme may also have a tool to insert CSS tweaks.

Bigger Thumbnail Image for Fancy 1 Template

Add the following CSS code to make the thumbnail size 150 x 150.

.sdm_download_thumbnail_image{
width: 150px !important;
height: 150px !important;
}

You can use any number value you want instead of 150.

Hide Download Count Value in Fancy 1 Template

Add the following CSS code to hide the download counter value of the item:

.sdm_download_item .sdm_download_item_count{
display: none;
}

Hide Description Value in Fancy 1 Template

Add the following CSS code to hide the description of the item:

.sdm_download_item .sdm_download_description{
display: none;
}

Make the Download Item Title Larger in Fancy 1

Add the following CSS code to make the download item title bigger

.sdm_download_item .sdm_download_title{
font-size: 32px;
}

Use a Background Color for the Download Display in Fancy 1

Add the following CSS code to use a grey background color:

.sdm_download_item {
    background-color: grey;
}

Make the Download Now Button Huge in Fancy 1

Add the following CSS code to use a grey background color:

.sdm_download_item .sdm_download {
    font-size: 24px;
    padding: 10px 20px;
}

Hide the Downloadable Item Title in Fancy 1

Add the following CSS code to hide the downloadable item title in fancy 1 display:

.sdm_download_item .sdm_download_title{
    display: none;
}

Hide the Downloadable Item Title in Fancy 2

Add the following CSS code to hide the downloadable item title in fancy 2 template:

.sdm_fancy2_download_title{
    display: none;
}

Customize the Button Color to Something Custom

Add the following CSS code to customize the button with a red border color and black text (it is just an example so you can change the color to whatever you want):

.sdm_download{
    background: none !important;
    background-color: none !important;
    border-color: red !important;
    box-shadow: none !important;
    color: black !important;
    text-shadow: none !important;
}

Center Align the Download Now Buttons

Add the following CSS code to make the download buttons have a center alignment:

.sdm_download_link{
    text-align: center;
}

Alternatively, you could wrap the download now button shortcode with a center align code. See example below:

<div style="text-align: center;">
[download-shortcode-goes-here]
</div>

If you need another tweak for it, then let me know by leaving a comment below and I will try to add it here.

Create Your Own Download Link So You Can Customize the Appearance

If you want to create a download link of an item using the download URL then use this option. This allows you to customize how the link or button looks.

Use the following format to create the download URL

http://www.your-site.com/?smd_process_download=1&download_id=X

X is the ID of the download item (you can get it from the “Downloads” menu of the plugin). Also, replace “your-site.com” with your actual site URL.