• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

CSS Tweaks for The WordPress Download Monitor Plugin

You are here: Home / Web Development / CSS Tweaks for The WordPress Download Monitor Plugin

Last updated: April 26, 2016 by Ruhul Amin





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.

Related Posts

  • How to Create a Password Protected Download in WordPress
  • How to Show File Downloads in a Nice Grid Display
  • Simple Download Monitor – A Great Way to Offer Files to Visitors
  • How to Use the FileZilla FTP Client for Your WordPress Site

Web Development,  Wordpress Plugin CSS,  CSS Usage,  digital downloads,  media file in wordpress,  sell digital downloads

Reader Interactions

Comments (18 responses)

  1. admin says:
    September 23, 2018 at 12:53 am

    @George, Use the create your own download link option to create your own link (instead of using a shortcode). This way you will be able to position the download link yourself and customize it how you want to.
    https://simple-download-monitor.com/css-tweaks-for-the-simple-download-monitor-plugin/#create_own_download_link

  2. George Young says:
    September 22, 2018 at 9:49 pm

    I’ve finally found the download counter/monitor plugin the I’ve been looking for. But … I would like to have the download link presented as simply the text of the Title – no button.
    Alternatively, I would like to be able to have the button displayed on the same line as the title (I’m ok with entering the title manually). Presently, the button is always forced to a line by itself.

    Thanks for this really great plugin.

  3. admin says:
    January 19, 2018 at 7:46 pm

    @Zach, The fancy1 template has a float left property applied to the title. Use something like the following to remove it:

    .sdm_download_title{
    float: none !important;
    }

  4. Zach Prive says:
    January 19, 2018 at 4:35 pm

    Dear Author,

    I have center aligned the download link but am unable to center the title. Any suggestions?

    Thanks,
    Zach

  5. admin says:
    September 12, 2017 at 9:21 am

    @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)?

  6. Bev says:
    September 12, 2017 at 5:17 am

    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

  7. admin says:
    August 15, 2017 at 10:00 pm

    The plugin can be translated to your language.

  8. Roos says:
    August 15, 2017 at 3:37 am

    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.

  9. admin says:
    July 29, 2017 at 7:42 pm

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

  10. Steffen Polster says:
    July 29, 2017 at 8:06 am

    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

  11. admin says:
    April 26, 2016 at 4:31 am

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

    .sdm_download_link{
    text-align: center;
    }

  12. Mary says:
    April 26, 2016 at 4:20 am

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

  13. admin says:
    February 2, 2016 at 8:19 pm

    @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.

  14. espo74 says:
    February 2, 2016 at 3:16 pm

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

  15. admin says:
    August 28, 2015 at 9:29 pm

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

  16. Jay El says:
    August 27, 2015 at 6:03 pm

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

  17. admin says:
    February 22, 2015 at 7:00 pm

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

  18. Peter Fabri says:
    February 22, 2015 at 3:39 pm

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2023 | Tips and Tricks HQ