» »

Вид материала 2 колонки на сайт uCoz


Вид материала 2 колонки на сайт uCoz

Стильно смотрится вид материала в 2 колонки на материал сайта uCoz. Который стильно подходит на темный фон сайта а также можно поставить на светлый ресурс. Также у него все данные проявляются, это когда вы наведете на его клик, а точнее на изображение. И будет вам вся информация по нему. Краткое описание появится и кто его загрузил на сайт и по каким датам. Что по тематической теме, так его можно установить почти на все тематики, но кроме онлайн просмотр, но если немного доработать и там можно установить. Все очень красиво сделано, а главное нет не каких ошибок.

И с ним идут стили, что безусловно добавит ему стильности, если смотреть визуально на его. Вообщем если ставить на ресурс, то и сам он почти полностью с этим видом изменится. В css можете немного сами поработать и к примеру закруглить углы на 3 - 5 пикселей, если портал у вас в таком стиле, вообщем если решили поставить, то будет видно, что как он будет смотреться и что доработать. хотя идет идеально, но всегда нужно смотреть отлично сел в каркас сайта или что то редактировать.

Сама установка:

Первое нужно сделать, это стили поставить в CSS:

Код
.main-block {
width: 100%;
}
.block {
display: block;
float: left;
width: 49%;
margin: 0.5%;
}
.cover {
display: block;
position: relative;
padding-bottom: 62%;
border: 2px solid #363636;
border-radius: 3px;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.name {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 5px;
background: rgba(0,0,0,0.85);
height: 22px;
overflow: hidden;
}
.font-name {
color: #FFFFFF;
font-family: Arial;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
margin: 2px 2px 2px 5px;
}
.fogging {
z-index: 1;
opacity: 0;
overflow: hidden;
cursor: pointer;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.fogging:hover {
opacity: 1;
}
.text {
position: absolute;
top: 35px;
bottom: 62px;
right: 5px;
left: 5px;
color: #FFFFFF;
text-shadow: 1px 1px black, 2px 2px black, -1px -1px black, -2px -2px black, -1px 1px black, 1px -1px black, -2px 2px black, 2px -2px black, -3px -3px 4px #000000, -3px 3px 4px #000000, 3px 3px 4px #000000, 3px -3px 4px #000000;
font-size: 14px;
overflow: hidden;
}
.reads {
position: absolute;
top: 5px;
left: 5px;
background: rgba(0,0,0,0.85);
height: 22px;
color: #FFFFFF;
font-size: 14px;
}
.category {
position: absolute;
top: 5px;
right: 5px;
background: rgba(0,0,0,0.85);
height: 22px;
color: #FFFFFF;
font-size: 14px;
}
.category a {
color: #FFFFFF;
text-decoration: none;
}
.user {
position: absolute;
bottom: 30px;
left: 5px;
background: rgba(0,0,0,0.85);
height: 22px;
color: #FFFFFF;
font-size: 14px;
}
.user a {
color: #FFFFFF;
text-decoration: none;
}
.date {
position: absolute;
bottom: 30px;
right: 5px;
background: rgba(0,0,0,0.85);
height: 22px;
color: #FFFFFF;
font-size: 14px;
}
@media only screen and (max-width: 480px) {
.block {float: none; width: 99%; margin: 0.5%;}
}


Остается вид материалов:

Код
<div class="main">
<div class="block">
<?if($MODER_PANEL$)?><div style="float:right; margin: 5px 5px 0 0;">$MODER_PANEL$</div><?endif?>
<div class="cover" style="background-image: url('$IMG_URL1$')">
<div class="name"><span class="font-name">$TITLE$</span></a></div>
<div class="fogging" onclick="location.href='$ENTRY_URL$'">
<span class="text"><p>$MESSAGE$</p></span>
<span class="reads"><b style="margin: 0 5px;">Просмотры: $READS$</b></span>
<span class="category"><b style="margin: 0 5px;"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</b></a></span>
<span class="user"><b style="margin: 0 5px;">Добавил: <a href="$PROFILE_URL$">$USERNAME$</b></a></span>
<span class="date"><b style="margin: 0 5px;">$DATE$</b></span>
</div>
</div>
</div>
</div>


Там смотрится в один ряд:

Вид материала в две колонки на сайт

Не забываем все сохранить.
20.09.2016 Просмотров: 480 Комментарий: (15)

Поделиться в социальных сетях

Материал разместил

Комментарий: 15
tsakonter
tsakonter 20.09.2016 20:471
0
Нормальный вид материала, просто нравится когда выводит название в Caps, что делает здесь автоматически. И точно не скажу, просто могу догадываться по стилям, что он адаптирован под мобильные устройства.
trem200
trem200 20.09.2016 21:552
0
Ещё один красивый вид материала, жду ещё классных материалов на ucoz smile
ucozmental
ucozmental 20.09.2016 22:365
0
Этот вид материала как видно не первый, и только на этом сайте он есть, пока.
Kvint
Kvint 20.09.2016 22:487
0
Здесь ключевое слово пока, растащат и еще поставят свои источник, что то поправят или сделают кнопку, и все будут требовать ссылку.
Brung
Brung 20.09.2016 22:313
0
Да, не чего так смотрится, скоро смотришь на сайтах появиться.
Kosten
Kosten 22.09.2016 00:0110
0
Но так то для этого и делалось, чтоб на сайте появлялся, но только как дизайн, но что поделаешь, каждый что то берет из материала у другого, и где то плюс есть и минус. Это распространяется, и больше могут его поставить, но удержать на сайте все не возможно, идет круговорот.
Сафрон
Сафрон 20.09.2016 22:344
0
В 2 колонки, это как на софт идет, в самый раз будет, и не чего лишнего, под каталог файлов.
Kosten
Kosten 20.09.2016 22:466
0
Но две колонки, это как то стандартно, есть и в три колонки, но больше на кино сайт видел, такие сейчас заметил ставят. И что главное, это тематика разнообразная, что софт или те же скрипты можно выстроить.
Angerfist
Angerfist 20.09.2016 23:578
0
biggrin выложил таки, я думал не стоит от того что пока ничего конкретно нового я тут не придумал.
Kosten
Kosten 21.09.2016 12:479
+1
Все нормально, отличный вид материала и ему место в каталоге файлов.
FeStemBer
FeStemBer 22.09.2016 15:3611
0
Описание только с темными тенями выводит, что на каком то изображение не очень смотрится.
Kosten
Kosten 22.09.2016 15:4012
0
Здесь все правильно сделано, тени нужны для того, что не все же картинки будут под один цвет, и если попадется светлая, здесь как раз они и будут выводить описание.
FeStemBer
FeStemBer 22.09.2016 15:4414
0
Это точно, об этом не подумал, просто другие идут с темным фоном, где описание светлое.
Angerfist
Angerfist 22.09.2016 15:4313
0
Описание делалось под определённый сайт, и без теней не видно было текста, просто материал вывели из форума. А так можно затемнить общий фон если вообще не видно и убрать тени у текста.
FeStemBer
FeStemBer 22.09.2016 15:4615
0
Но так лучше будет, когда темный фон и светлое на нем описание. Это только чтоб было при наведение курсора.
avatar