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.
@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
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.
@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;
}
Dear Author,
I have center aligned the download link but am unable to center the title. Any suggestions?
Thanks,
Zach
@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)?
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
The plugin can be translated to your language.
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.
@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;
}
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
@Mary, Center the download button? Try something like the following CSS tweak maybe:
.sdm_download_link{
text-align: center;
}
Is there a way to center it? I tried putting the shortcode with center tags but it doesn’t do anything.
@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.
Can i skip any formatting with this and just use my default link classes and no buttons?
@Jay, You can add a “margin-left” CSS property to the “.sdm_download_description” class and make that field align with the title field.
I’m wondering how I can get the description of the download to sow up directly under the Title.
@Peter, What do you mean by the “result of the plugin”? The output from a shortcode? Which shortcode are you using?
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