WP-Filebase Pro

The Wordpress Downloads Manager with Cloud support

File & Category Template v2

Here’s the Template and CSS code for the new default File and Category Template:

HTML

File Template:

<div class="wpfilebase-file-default" onclick="if('undefined' == typeof event.target.href) document.getElementById('wpfb-file-link-%uid%').click();">
<div class="icon"><a href="%file_url%" target="_blank" title="Download %file_display_name%"><img align="middle" src="%file_icon_url%" alt="%file_display_name%" /></a></div>
<div class="filetitle">
<a href="%file_url%" title="Download %file_display_name%" target="_blank" id="wpfb-file-link-%uid%">%file_display_name%</a>
<!-- IF %file_post_id% AND %post_id% != %file_post_id% --><a href="%file_post_url%" class="postlink">ยป %'Post'%</a><!-- ENDIF -->
<br />
%file_name%<br />
<!-- IF %file_version% -->%'Version:'% %file_version%<br /><!-- ENDIF -->
</div>
<div class="info">
%file_size%<br />
%file_hits% %'Downloads'%<br />
<a href="#" onclick="return wpfilebase_filedetails(%uid%);">%'Details'%</a>
</div>
<div class="details" id="wpfilebase-filedetails%uid%" style="display: none;">
<!-- IF %file_description% --><p>%file_description%</p><!-- ENDIF -->
<table border="0">
<!-- IF %file_languages% --><tr><td><strong>%'Languages'%:</strong></td><td>%file_languages%</td></tr><!-- ENDIF -->
<!-- IF %file_author% --><tr><td><strong>%'Author'%:</strong></td><td>%file_author%</td></tr><!-- ENDIF -->
<!-- IF %file_platforms% --><tr><td><strong>%'Platforms'%:</strong></td><td>%file_platforms%</td></tr><!-- ENDIF -->
<!-- IF %file_requirements% --><tr><td><strong>%'Requirements'%:</strong></td><td>%file_requirements%</td></tr><!-- ENDIF -->
<!-- IF %file_category% --><tr><td><strong>%'Category:'%</strong></td><td>%file_category%</td></tr><!-- ENDIF -->
<!-- IF %file_license% --><tr><td><strong>%'License'%:</strong></td><td>%file_license%</td></tr><!-- ENDIF -->
<tr><td><strong>%'Date'%:</strong></td><td>%file_date%</td></tr>
</table>
</div>
<div style="clear: both;"></div>
</div>

Category Template:

<div class="wpfilebase-cat-default">
<h3>
<!-- IF %cat_has_icon% || true -->%cat_small_icon%<!-- ENDIF -->
<a href="%cat_url%" title="Go to category %cat_name%">%cat_name%</a>
<span>%cat_num_files% <!-- IF %cat_num_files% == 1 -->file<!-- ELSE -->files<!-- ENDIF --></span>
</h3>
</div>

CSS

Add this to your Stylesheet Code, WP-Filebase/Edit Stylesheet.

/* #################### DEFAULT FILE TEMPLATE #################### */
.wpfilebase-file-default {
width: 420px;
padding: 5px;
margin: 10px auto 25px auto;
border: 1px solid #999;
color: #333;
text-align: left;
line-height: normal;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor:pointer;
box-shadow: 1px 1px 1px #CCC;
background: #EEE;
/* gradient */
background: -moz-linear-gradient(top, #EEE 0%, #CCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EEE), color-stop(100%,#CCC));
background: -webkit-linear-gradient(top, #EEE 0%,#CCC 100%);
background: -o-linear-gradient(top, #EEE 0%,#CCC 100%);
background: -ms-linear-gradient(top, #EEE 0%,#CCC 100%);
background: linear-gradient(to bottom, #EEE 0%,#CCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
}

.wpfilebase-file-default .icon { float: left; }

.wpfilebase-file-default .icon img {
margin: 2px 0 2px 2px;
padding: 2px;
background-color: #FFF;
border: 1px solid #999;
}

.wpfilebase-file-default .filetitle {
float: left;
font-size: 10px;
margin: 0 0 4px 8px;
height: 40px;
}

.wpfilebase-file-default .filetitle a {
font-size: 18px;
text-decoration: none;
line-height: 29px;
text-shadow: 1px 1px 1px white;
}

.wpfilebase-file-default .filetitle a.postlink, .wpfilebase-file-default .info a {
text-decoration: none;
padding: 1px 4px 1px 4px;
background-color: #bbb;
border-radius: 3px;
text-shadow: none;
}

.wpfilebase-file-default .filetitle a.postlink {
margin-left: 4px;
font-size: 10px;
text-shadow: 0px 1px 1px #eee;
vertical-align: bottom;
background-color: #ccc;
}

.wpfilebase-file-default .info a {
text-transform: uppercase;
line-height: 18px;
text-shadow: 0px 1px 1px #ddd;
}

.wpfilebase-file-default .info {
float: right;
text-align: right;
font-size: 10px;
margin: 12px 8px 0 auto;

height: 50px;
padding-right: 60px;
padding-top: 3px;

background-image: url('images/down-green.png'); /* change this to ... down-gray.png ... for gray arrow */
background-repeat: no-repeat;
background-position: top right;
}

.wpfilebase-file-default .details {
clear: both;
font-size: 12px;
padding: 8px 18px 0 18px;
overflow: hidden;
}

.wpfilebase-file-default .details table, .wpfilebase-file-default .details table tr, .wpfilebase-file-default .details table tr th, .wpfilebase-file-default .details table tr td {
border: none;
border-collapse: collapse;
background: none;
}

.wpfilebase-file-default .details table {
width: 100%;
margin: 20px 0 0 0;
}

.wpfilebase-file-default .details table tr { border-top: 1px solid #bbb; }

/* #################### DEFAULT FILE TEMPLATE END #################### */
/* #################### DEFAULT CATEGORY TEMPLATE #################### */
.wpfilebase-cat-default {
width: 420px;
margin: 10px auto 25px auto;
text-align: left;
}

.wpfilebase-cat-default h3 {
font-size: 18px;
}

.wpfilebase-cat-default h3 img {
margin-left: -45px;
}

.wpfilebase-cat-default h3 a {
margin-left: 10px;
text-decoration: none;
text-shadow: 1px 1px 1px white;
}

.wpfilebase-cat-default h3 span {
font-size: 12px;
text-transform: uppercase;
font-weight: normal;
margin-left: 7px;
}
/* #################### DEFAULT CATEGORY TEMPLATE END #################### */
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Leave a Reply

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


3 × seven =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Put code inside <code>...</code>.