Если вам не нравиться у своего шаблона стандартный вид материала, или же не можете найти. То предлагаю вашему вниманию установить этот вид. Данный вид отлично подойдет под игровую тематику сайта, смотрится очень красиво, вид выводит скриншот, название материала, и кнопку скачать. Внизу вы сможете увидеть в какой категории было добавлено. Этот вид материала не будет нагружать ваш сайт, единственное при установке вам нужно будет его подгонять.
Приступим к установке:
В таблицу стилей CSS вставляем этот код:
Код
.modsvidmat {margin-bottom: 20px;}
.fileimg { width: 100%;height: 400px; background: center center no-repeat; background-size: cover; overflow: hidden; text-align: center;}
.fileimg2 { width: 100%;height: 200px; background: center center no-repeat; background-size: cover; position: relative; background-color: #ddd;}
.fileimg3 { width: 100%;height: 350px; background: center center no-repeat; background-size: cover; position: relative;}
.randommods .fileimg2 {box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
.fileimg {height: 250px;}
.titlemod {padding: 10px; background-color: rgba(0, 0, 0, 0.4);}
.titlemod a, .addMod a {color: #fff;}
.downloadmod {position: absolute; bottom: 15px; right: 15px; padding: 5px 10px; font-size: 14px; background: rgba(0, 0, 0, 0.5);}
.downloadmod a {color: #fff;}
.botinfomod {padding: 10px; font-size: 12px; background: #eee;}
Код HTML:
Код
<div class="modsvidmat">
<div class="fileimg2" style="background-image: url('$IMG_URL1$');">
<div class="titlemod"> <a href="$ENTRY_URL$">$TITLE$ </a></div>
<div class="downloadmod"><a href="$ENTRY_URL$">Скачать мод</a></div>
</div>
<div class="botinfomod"> <a href="$SECTION_URL$">$SECTION_NAME$</a> › <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> </div>
</div>
Если вы хотите вид сделать в две колонки как на скрине:
Вам нужно поставить вот этот код в вид материала:
Код HTML [Две колонки]
Код
<div style="width:50%; float:left;">
<div class="modsvidmat">
<div class="fileimg2" style="background-image: url('$IMG_URL1$');">
<div class="titlemod"> <a href="$ENTRY_URL$">$TITLE$ </a></div>
<div class="downloadmod"><a href="$ENTRY_URL$">Скачать мод</a></div>
</div>
<div class="botinfomod"> <a href="$SECTION_URL$">$SECTION_NAME$</a> › <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> </div>
</div>
</div>
