CSS Tweaks for The WordPress Download Monitor Plugin

I will share a few CSS tweaks for the download monitor plugin in this tutorial (a few users have asked for it).

You should use the Custom CSS plugin to insert these CSS tweaks in your site if you want to use it.

The following code examples will give you a really good idea of how to go about making these changes/tweaks. You may need to tweak it a little depending on the WordPress theme you are using.

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;
}

Make the Download Item Title Larger

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

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

.sdm_download_item {
    background-color: grey;
}

Make the Download Now Button Huge

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

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

.sdm_download_item .sdm_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.

Comments (14 responses)

  1. admin says:

    @Bev, You should be able to customize the download button text color without any issue. Please share a link to the page where you have the button so I can inspect it. Did you make sure to empty your site and browser cache after you added the CSS tweak (so the new CSS can take effect)?

  2. Bev says:

    I can not change the button text at all it stays the same in white I am trying to change the button text color to #bf186e I have the button background set to black want the text in #bf186e to match the colors I am using the code below I even tried changing the text-shadow & box-shadow

    .sdm_download{
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: none !important;
    color: #bf186e !important;
    text-shadow: none !important;
    }

    I just love this plugin I tried all the download plugins this is the best and easiest with a counter only thing I do not like it is devil if you do not use code allot to change the default button colors and text and button sayings to custom to match your site plus tried all the colors that comes with the plugin and they did not blend with the site would love to see the option in settings to change default to custom colors & custom saying for the button or use your own image for button to match site

  3. admin says:

    The plugin can be translated to your language.

  4. Roos says:

    Dear Author,
    I would like to set up a custom error page. I use the option of a password before download. My public are more Dutch old ladies, so they get panic with an English text without any link to go back. Is there a way to customize the error page.

  5. admin says:

    @Steffan, Lets say, you have selected the green colored button in the settings. Use the following CSS to target the green colored button and make the button text color black

    .sdm_download.green {
    color: black !important;
    }

  6. Dear Author, how can I make the button textcolor black?

    .sdm_download{color:black;font-size:14px!important;font-family:Verdana!important;font-weight:400!important;border-color:#0000ff!important;}
    does not work in version 3.4.3.

    Thanks
    Steffen

  7. admin says:

    @Mary, Center the download button? Try something like the following CSS tweak maybe:

    .sdm_download_link{
    text-align: center;
    }

  8. Mary says:

    Is there a way to center it? I tried putting the shortcode with center tags but it doesn’t do anything.

  9. admin says:

    @espo74, yeah. Just create a simple button and watch the link it creates. Then use that download URL to create your own link with your own style.

  10. espo74 says:

    Can i skip any formatting with this and just use my default link classes and no buttons?

  11. admin says:

    @Jay, You can add a “margin-left” CSS property to the “.sdm_download_description” class and make that field align with the title field.

  12. Jay El says:

    I’m wondering how I can get the description of the download to sow up directly under the Title.

  13. admin says:

    @Peter, What do you mean by the “result of the plugin”? The output from a shortcode? Which shortcode are you using?

  14. Peter Fabri says:

    Dear Author,

    Could you please tell me what to do to get the result of the plugin to align to the centre? It is always left-aligned.

    Many thanks,
    Peter

Speak Your Mind

*