Display direct download link as bootstrap button

[pastoweb]

Hi, I'm using direct download and when I insert a download link in an article, I'd like to display as bootstrap button it with my template styling.

How can I do?

[ColinM]

Hi
There is no simple way to do this!  But it is feasible to do and you need to be modestly proficient at css.  It means quite a lot of effort at this time.

The active code generated by jDownloads for the button is typically as shown below.  Note I have removed the ccss like webkit needed for older devices.

Code Select Expand

<a target="_blank" href="/jdx38/index.php/list-all-jd-cats?task=download.send&amp;id=2&amp;catid=2&amp;m=0" title="Download" class="jdbutton jorange jsmall">Download[/url]

The important part is the three CSS class references "jdbutton jorange jsmall"  The jorange and jsmall will change dependant on which colour and size you have selected in the 'CSS Buttons Settings' section of Config - Pictures tab.Presently in jD all the styling for buttons is in jdownloads_buttons.css which would be useful to study.

So you need to set the .jdbutton .jorange and .jsmall classes to what you need from the css stying of the appropriate bootstrap button and put that in the jdownloads_custom.css file
Presently the .jdbutton class is

Code Select Expand

.jdbutton {
   vertical-align: baseline;
   margin: 0 2px;
   outline: none;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font: 14px/100% Arial, Helvetica, sans-serif;
   padding: .5em 2em .55em;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   border-radius: .5em;
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
The equivalent bootstrap .btn class is

Code Select Expand

.btn {
    font-size: 14px;
    padding: 6px 12px;
    margin-bottom: 0;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}
So in jdownloads_custom.css one would put

Code Select Expand

.jdbutton {
    font-size: 14px;
    padding: 6px 12px;
    margin-bottom: 0;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}

You then need to put in the equivalent css for classes .jdbutton:focus  .jdbutton:hover  .jdbutton:active 
The present bootstrap ones are

Code Select Expand

.btn:focus,
.btn:active:focus {
    outline: thin dotted;
    outline-offset: -2px;
}
.btn:hover,
.btn:focus {
    color: #333;
    text-decoration: none;
}
.btn:active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

You also need to put in css for .jorange and .jsmall to get the colour and size you want

Colin

[pastoweb]

Thanks, but can't I simply override the html output with my code?

[ColinM]

Hi
You are wanting this in the jD Content Plugin.  The structure of that plugin does not fit the nature of Joomla! overrides.You could take the plugin code and generate your own content plugin with a different name but that is fraught with challenges relating to the language files and other things.  Also the Content plugin changes when new features are added into jD so you would be in a constant state of change.  Also we would not be able to assist.
One solution would be to use a layout that does not have a Download button and use the Download name as the link.  That is avoid the problem!!

In future releases of jDownloads I anticipate greater integration with Bootstrap. The forthcoming jD3.9 includes an ability to load Bootstrap css but it is not yet being used by jDownloads.
Colin