Lappuse 1 no 11
Forums » uCoz sistēma » Lietotāju materiāli » Materiālu izkats v2 (Filmu mājaslapām)
Materiālu izkats v2 (Filmu mājaslapām)
DalVeR
Datums: Otrdiena, 11.08.2015, 14:58 | Ziņa # 1
Grupa: Bloķēts
Foruma posti: 24
Reputācija: 11
1. Dodamies: CP -> Customize design -> $MODULE_NAME$ -> Appearance of entries -> kur doto kodu aizstājam ar šo:

Code
<div class="box-news"> <div>    
    <div class="image"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" title="$TITLE$" alt="$TITLE$"></a></div>    
    <div class="description-image">$TITLE$ - <?substr($MESSAGE$,0,300)?>...</div>    
    <div class="name"><a href="$ENTRY_URL$">$TITLE$</a></div>    
    <div class="data-news"><a href="$ENTRY_URL$" class="poshytips button-more" title="Skatīties"></a><div class="info"><span class="date-available">Datums: $DATE$</span><span class="poshytips viewed" title="Skatījumi: $READS$"></span><span class="poshytips comments" title="Komentāri: $COMMENTS_NUM$"></span></div></div>    
    </div> </div>


2. Iekš CSS ievietojam šo kodu:

Code
/* News */    
.news-info {    
     overflow: hidden;    
}    
.news-info > .left {    
     float: left;    
     margin-right: 15px;    
}    
.news-info > .left + .right {    
     margin-left: 265px;    
}    
.news-info .image {    
     float: left;    
     padding: 10px 10px 0 10px;    
     margin: 0 0 -4px 0;    
     text-align: center;    
     position: relative;    
     z-index: 0;    
     border-left: 1px solid #d2d2ce;    
     border-top: 1px solid #d2d2ce;    
     border-right: 1px solid #d2d2ce;    
}    
.news-info .image img {    
     border: 1px solid #d2d2ce;    
     padding: 0;    
}    
.news-info .data-news {    
     clear: both;    
     border-left: 1px solid #d2d2ce;    
     border-right: 1px solid #d2d2ce;    
     border-bottom: 1px solid #d2d2ce;    
     margin: -8px 0 20px 0;    
}    
.news-info .data-news .info-news {    
     margin: 0 10px 10px 10px;    
     text-align: right;    
     overflow: auto;    
     background: #f8f8f8;    
     border-left: 1px solid #d2d2ce;    
     border-right: 1px solid #d2d2ce;    
     border-bottom: 1px solid #d2d2ce;    
}    
.data-news .info-news .date-available {    
     background: url('http://i.imgur.com/ldrtVuz.png') right top no-repeat;    
     padding: 8px 38px 0 0;    
     font-size: 10px;    
     height: 20px;    
     float: right;    
}    
.data-news .info-news .viewed {    
     background: url('http://i.imgur.com/KgfcaWK.png') left top no-repeat;    
     width: 30px;    
     height: 28px;    
     float: right;    
}    
.data-news .info-news .comments {    
     background: url('http://web-novichok.ru/ucoz_importal/exercise-files/images/comment-grid-icon.png') left top no-repeat;    
     width: 30px;    
     height: 28px;    
     float: right;    
}    
.news-info .description {    
     padding: 0;    
     margin-bottom: 15px;    
     line-height: 20px;    
     color: #3333333;    
}    
.news-info .review {    
     color: #4D4D4D;    
     border: 1px solid #d2d2ce;    
     padding: 8px;    
     line-height: 20px;    
}    
.box-news-images {    
     width: 100%;    
     overflow: hidden;    
     text-align: center;    
}    
.box-news-images > div {    
     position: relative;     
     width: 170px;    
     display: inline-block;    
     vertical-align: top;    
     margin: 0;    
     text-align: center;    
     background: #eee;    
     padding: 7px;    
     overflow: hidden;    
     border: 1px solid #d2d2ce;    
     margin: 13px 4px 0 4px;    
}    
.box-news-images > div:hover {    
     background: #e2e2e2;    
}    
.box-news-images .image {    
     width: 100%;    
     border: 1px solid #d2d2ce;    
     background: #FFFFFF;    
}    
.box-news-images .image img {    
     opacity: .8;    
     -webkit-transition: all 0.3s ease-in 0s;    
     -moz-transition: all 0.3s ease-in 0s;    
     transition: all 0.3s ease-in 0s;    
}    
.box-news-images .image img:hover {    
     opacity: 1;    
}    
#box-search-top {    
     float: right;    
     position: relative;    
     margin-top: -2px;    
}    
#box-search-top .button_search {    
     position: absolute;    
     top: 2px;    
     right: 4px;    
     background: url('http://i.imgur.com/Hqb5LfQ.png') center center no-repeat;    
     width: 24px;    
     height: 24px;    
     border-left: 1px solid #CCCCCC;    
     cursor: pointer;    
}    
#box-search-top input {    
     background: #FFF;    
     font-size: 12px;    
     padding: 2px 30px 1px 2px;    
     width: 125px;    
     height: 21px;    
     border: 1px solid #CCCCCC;    
     -webkit-border-radius: 3px 3px 3px 3px;    
     -moz-border-radius: 3px 3px 3px 3px;    
     -khtml-border-radius: 3px 3px 3px 3px;    
     border-radius: 3px 3px 3px 3px;    
}    
#box-search {    
     position: relative;    
     border-bottom: 1px solid #d2d2ce;    
     height: 49px;    
     padding: 0;    
}    
#box-search-bottom {    
     position: relative;    
     margin: 13px 0 -2px 0;    
     border-top: 1px solid #d2d2ce;    
     height: 40px;    
     padding: 1px 0 0 0;    
}    
#box-search .button_search, #box-search-bottom .button_search {    
     position: absolute;    
     top: 7px;    
     right: 5px;    
     width: 35px;    
     height: 33px;    
     display: block;    
     cursor: pointer;    
     z-index: 1;    
}    
#box-search input, #box-search-bottom input {    
     background: url('http://i.imgur.com/Hqb5LfQ.png') right top no-repeat;    
     padding: 3px 40px 0 10px;    
     color: #444444;    
     text-shadow: 1px 1px 0 #FFFFFF;    
     box-shadow: none;    
     position: relative;    
     border: 0;    
     width: 205px;    
     height: 35px;    
     float: right;    
     right: 2px;    
     top: 5px;    
}    
.product-list .top {    
     padding-top: 10px;    
}    
.product-list .data-news {    
     height: 28px;    
     border-left: 1px solid #d2d2ce;    
     border-right: 1px solid #d2d2ce;    
     border-bottom: 1px solid #d2d2ce;    
     margin-bottom: 0;    
     background: #f8f8f8;    
     float: left;    
     clear: both;    
}    
.product-list .data-news .info {    
     float: right;    
}    
.product-list a.button-more {    
     background: #f8f8f8 url('http://i.imgur.com/neR1bF4.png') no-repeat right center;    
     width: 30px;    
     height: 28px;    
     display: inline-block;    
     float: right;    
}    
.product-grid .data-news {    
     height: 28px;    
     border: 1px solid #d2d2ce;    
     background: #f8f8f8;    
}    
.product-grid .data-news .info {    
     float: right;    
}    
.data-news .info .date-available {    
     background: url('http://i.imgur.com/ldrtVuz.png') right top no-repeat;    
     padding: 8px 38px 0 0;    
     font-size: 10px;    
     height: 20px;    
     float: left;    
}    
.data-news .info .viewed {    
     background: url('http://i.imgur.com/KgfcaWK.png') left top no-repeat;    
     width: 30px;    
     height: 28px;    
     float: left;    
}    
.data-news .info .comments {    
     background: url('http://i.imgur.com/tASYcGx.png') left top no-repeat;    
     width: 30px;    
     height: 28px;    
     float: left;    
}    
.product-grid a.button-more, .box-news a.button-more {    
     background: #f8f8f8 url('http://i.imgur.com/neR1bF4.png') no-repeat right center;    
     width: 30px;    
     height: 28px;    
     display: block;    
     float: right;    
}    
/* box-news */    
.box-news {    

}    
.box-news > div {    
     position: relative;     
     width: 224px;    
     display: inline-block;    
     vertical-align: top;    
     margin: 0;    
     text-align: center;    
     background: #eee;    
     padding: 7px;    
     overflow: hidden;    
     border: 1px solid #d2d2ce;    
     margin: 13px 4px 0 4px;    
     float: left;    
}    
.box-news > div:hover {    
     background: #e2e2e2;    
}    
#column-left .box-news > div {    
     width: 224px;    
     margin: 13px 0 0 0;    
}    
#column-right .box-news > div {    
     width: 224px;    
     margin: 13px 0 0 0;    
}    
#column-left + #content .box-news > div {    
     width: 224px;    
}    
#column-right + #content .box-news > div {    
     width: 224px;    
}    
#column-left + #column-right + #content .box-news > div {    
     width: 224px;    
}    
.box-news .image {    
     display: block;    
     margin-bottom: 0px;    
     position: relative;    
     border: 1px solid #d2d2ce;    
     background: #FFFFFF;    
}    
.box-news .image img {    
     width: 222px;    
     height: 222px;    
     position: relative;    
     padding: 0;    
     z-index: 5;    
     -webkit-transition: all 0.3s ease-in 0s;    
     -moz-transition: all 0.3s ease-in 0s;    
     transition: all 0.3s ease-in 0s;    
}    
.box-news .image img:hover {    
     opacity: 0.1;    
}    
.box-news .description-image{    
     position: absolute;    
     margin: 7px;    
     padding: 10px;    
     text-align: left;    
     color: #222222;    
     top: 0;    
     left: 0;    
     z-index: 1;    
}    
.box-news .description {    
     height: 150px;    
     background: #F3F3F3;    
     padding: 7px;    
     overflow: hidden;    
     border: 1px solid #d2d2ce;    
     text-align: left;    
     color: #222222;    
}    
.box-news .name {    
     border-left: 1px solid #d2d2ce;    
     border-right: 1px solid #d2d2ce;    
     height: 30px;    
     padding: 5px;    
}    
.box-news .name a {    
     color: #333;    
     text-shadow: 1px 1px 1px #fff;    
     font-weight: bold;    
     text-decoration: none;    
     display: block;    
     clear: both;    
}    
.box-news .data-news {    
     height: 28px;    
     border: 1px solid #d2d2ce;    
     background: #f8f8f8;    
}    
.box-news .data-news .info {    
     float: right;    
}


Iznākums pielikumā.



Pielikumi: 1564672.png(102Kb)
Antikrists
Datums: Otrdiena, 11.08.2015, 18:14 | Ziņa # 2
Grupa: Lietotājs+
Foruma posti: 53
Reputācija: 14
OO noderēs smile
Forums » uCoz sistēma » Lietotāju materiāli » Materiālu izkats v2 (Filmu mājaslapām)
Lappuse 1 no 11
Meklēšana: