1. Dodamies: CP -> Customize design -> $MODULE_NAME$ -> Appearance of entries -> kur doto kodu aizstājam ar šo:
Code
<div class="short">
<div class="short1"><a href="$ENTRY_URL$"><img src="$IMG_URL1$"></a></div>
<div class="short3">
<div class="short2"><h2><a href="$ENTRY_URL$"><?substr($TITLE$,0,30)?>...</a></h2><span><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span></div>
<span>$MESSAGE$</span>
</div>
<div class="short4">
<span class="short5"><a href="$ENTRY_URL$">Skatīties</a></span>
<span class="short6"></span>
<span class="short7">7.500</span>
<span class="short8">HDTVRip</span>
<span class="short9">Latviešu valoda</span>
<span class="short155">2014</span>
</div>
</div>
2. Iekš CSS ievietojam šo kodu:
Code
/* short story */
.short { overflow: hidden; padding: 0 19px 25px 21px; }
.short1 { position: relative; float: left; width: 175px; height: 202px; overflow: hidden; }
.short1 img { position: absolute; width: 175px; min-height: 202px; /* margin: auto; */ top: 0; right: 0; left: 0; bottom: 0; }
.short2 { background: url(../images/short.png) repeat-x bottom; overflow: hidden; padding-bottom: 27px; margin-bottom: 2px; }
.short2 h2 { position: relative; float: left; font-family: 'Open Sans Condensed', sans-serif; font-size: 22px; color: #212121; font-weight: bold; line-height: 22px; }
.short2 h2 a { text-decoration: none; color: #212121; }
.short2 h2 a:hover { text-decoration: underline; }
.short2 h2:before { content: ''; position: absolute; top: 0; right: -17px; width: 9px; height: 9px; background: #d14f4f;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.short2 span { display: block; clear: left; font-size: 13px; color: #259c6a; font-style: italic; padding-top: 6px; }
.short2 span a { color: #259c6a; text-decoration: none; }
.short2 span a:hover { text-decoration: underline; }
.short3 { margin-left: 192px; height: 202px; overflow: hidden;}
.short4 { height: 60px; background: #1a1e21; clear: left; }
.short5 { float: right; }
.short5 a { width: 60px; height: 60px; display: block; overflow: hidden; line-height: 500px; background: #47abc8 url(../images/short1.png) no-repeat center; }
.short5 a:hover { background: #74d4d3 url(../images/short1.png) no-repeat center; }
.short6 { float: left; }
.short7 { float: left; width: 116px; height: 60px; display: block; background: #13171a url(../images/short2.png) no-repeat 23px 22px; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: bold; color: #cf4a4a; text-indent: 46px; line-height: 54px; }
.short8 { float: left; height: 60px; display: block; border-right: 1px solid #25292c; background: url(../images/short3.png) no-repeat 19px 18px; font-family: 'Open Sans Condensed', sans-serif; font-size: 14px; color: #efefef; font-weight: bold; line-height: 60px; padding: 0 17px 0 58px; }
.short9 { float: left; height: 60px; display: block; border-right: 1px solid #25292c; background: url(../images/short4.png) no-repeat 17px 18px; font-family: 'Open Sans Condensed', sans-serif; font-size: 14px; color: #efefef; font-weight: bold; line-height: 60px; padding: 0 20px 0 44px; }
.short10 { display: none; }
.short155 {float: left; height: 60px; display: block; border-right: 1px solid #25292c; background: url(../images/year_icon.png) no-repeat 17px 18px; font-family: 'Open Sans Condensed', sans-serif; font-size: 14px; color: #efefef; font-weight: bold; line-height: 60px; padding: 0 20px 0 44px;}
Vajadzīgās bildes lejuplādējam no pielikuma!
Iznākums ir pielikumā.