• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать вид материалов для модуля uCoz
Создать вид материалов для модуля uCoz
Kosten
 		Воскресенье, 19 Ноября 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Приветствую всех, здесь тема, давайте создадим, а точнее переделаем вид материалов на каталог файлов или блог. Точнее, что вы добавили, если можно сразу код или стили пропишите, и так все месте перестроим в оригинальный материал.

Вот так по умолчанию идет, на сайте можно посмотреть - http://pluton.clan.su/

Что бы вы убрали или добавили!



Код


css
Прикрепления: 4674643.jpg (90.7 Kb)
Страна: (RU)
Kosten
 		Воскресенье, 19 Ноября 2017 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Думаю, первым делом убрать ссылки в CSS и в место их прописать шрифтовые иконки, и сделать немного оригинальнее, хотя по сути схожи почти будут.
Страна: (RU)
Kosten
 		Воскресенье, 19 Ноября 2017 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
1. Все ссылки убрал и поставил шрифтовые иконки.

2. Выставил горизонтальную черту, между функционалом и кратким описанием.

Код
border-bottom: 1px solid #dbe1e8;


3. И чтоб красивый переход был с каркаса на изображение, то выше кнопок выставил тени.

Код
box-shadow: 0px 8px 20px 0px rgba(146, 139, 139, 0.83), 0px 10px 30px -15px rgba(154, 150, 150, 0.32);
    border-bottom: 2px solid #5d6165;


4. Сам каркас, что повер на углы на 5 пикселей закруглил, а нижнее на 3 пикселя.

Код
border-radius: 5px 5px 3px 3px;


5. Немного темнее сделал.

Код
background: #242527;


6. Чтоб все коректно смотрелось, а это отступы, то прописал класс и выставил в ручную.

Код
padding: 15px 5px 10px 1px;


Вот можно заменить уже есть небольшое изменение.
Прикрепления: 3259799.jpg (98.7 Kb)
Страна: (RU)
Kosten
 		Воскресенье, 19 Ноября 2017 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Сам каркас тенями обвел, просто с ними можно больше вариантов создать.

Код
box-shadow: 0px 0px 0px 1px rgba(99, 95, 95, 0.59), 0px 0px 3px 1px rgba(113, 107, 107, 0.88);


Некоторые просто делают, где только можно выставить пиксели, а вот тени нет.

Код
border: 1px solid #597AB9;


И вот немного уже изменяется, основной каркас по тени, где можно немного темнее сделать, но это кому как.
Прикрепления: 1906776.jpg (70.4 Kb)
Страна: (RU)
Kosten
 		Воскресенье, 19 Ноября 2017 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Вообщем не чего не стал придумывать, поставил рейтинг с правой стороны и весь ыункционал. это комментарий, в каком разделе материал, был установлен на один клас, чтоб потом под мобильные даджеты легче запретить вывод их, что на скрине показано.

В заголовке, был прописан эффект под длинные название, чтоб при просмотре на гаджете или на узком формате экране, не было несколько строк, а все красиво смотрелось.

Может у какго есть какие то задумки, то плиз отпишите.

1.



2.



3.



Код:

Код
<div class="kapetuleroz_govur clr">
<div class="kapetuleroz_govur-title">
<a href="$ENTRY_URL$" class="dkimadetun">$TITLE$</a>
</div>
<img src="$IMG_URL1$" alt="$TITLE$">
<div class="detalis"><span class="dates-short"><i class="fa fa-clone"></i> $DATE$</span>
<span><a href="$CATEGORY_URL$"><i class="fa fa-folder-open"></i> $CATEGORY_NAME$</a></span>
<span><i class="fa fa-eye"></i> $READS$</span>
<span><a href="$COMMENTS_URL$"><i class="fa fa-comments-o"></i> Комментарии ($COMMENTS_NUM$)</a></span>
<span><i class="fa fa-thumbs-o-up"></i> $RATING$</span></div>
<div class="kapetuleroz_govur-img-text">
<div class="kapetuleroz_govur-text">
$MESSAGE$
</div>
</div>


CSS

Код
.kapetuleroz_govur {
padding: 15px;
margin-bottom: 17px;
background: #242527;
border-radius: 5px 5px 3px 3px;
box-shadow: 0px 0px 0px 1px rgba(132, 130, 130, 0.59), 0px 0px 3px 1px rgba(167, 161, 161, 0.86);
}

.kapetuleroz_govur-title {
padding: 0 0 15px 0;
}

.kapetuleroz_govur-title a {
display: block;
font-size: 18px;
text-transform: uppercase;
line-height: 1.25;
color: #FFFFFF;
}

.detalis {
padding: 15px 5px 10px 1px;
border-bottom: 1px solid #414446;
}

.detalis span {
letter-spacing: .1em;
font-size: 12px;
display: inline-block;
padding-right: 5px;
margin-right: 7px;
color: #d1f4ff;
}

.detalis > span:last-child {
float:right;
background-color: rgba(0, 0, 0, 0.76);
margin: -7px 5px 0 0;
padding: 4px 12px;
border-radius: 30px;
border: 1px solid rgba(63, 63, 64, 0.89);
}

.detalis span a {
letter-spacing: .1em;
font-size: 13px;
display: inline-block;
color: #d1f4ff;
}

.kapetuleroz_govur-text {
text-align: justify;
height: 75px;
overflow: hidden;
line-height: 135%;
font-size: 15px;
padding: 5px 0;
color: #c9cece;
}

.kapetuleroz_govur img {
width: 99.5%;
height: 270px;
box-shadow: 0px 5px 20px 0px rgba(132, 126, 126, 0.55), 0px 10px 30px -15px rgba(154, 150, 150, 0.59);
border-bottom: 2px solid rgba(110, 116, 121, 0.75);
border: 1px solid rgba(118, 120, 123, 0.43);
border-radius: 5px 5px 3px 3px;
}

.dkimadetun {
white-space: nowrap;
overflow: hidden;
padding: 3px;
background: #242527;
position: relative;
margin: 0px 0px 0px 0px;
}
.dkimadetun::after {
content: '';
position: absolute;
right: 0; top: 0;
width: 70px;
height: 100%;
background: linear-gradient(to right, rgba(36, 37, 39, 0.29), rgb(36, 37, 39) 100%);
}

@media only screen and (max-width: 680px){
.detalis {display: none;}
}
Прикрепления: 5194240.jpg (117.2 Kb) · 5584365.jpg (79.8 Kb) · 0613301.jpg (44.5 Kb)
Страна: (RU)
Kosten
 		Воскресенье, 19 Ноября 2017 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Если хотите сделать в 2 колонки, то все очень просто.

Полностью копируется скрипт в дивы.

Код
<div class="osnovanie_karkasa">

Здесь вид материала.

</div>


В стили нужно прописать.

Код
.osnovanie_karkasa{
width: 49%;
float:left;
margin: 3px 9px 3px 0px;
}


Где 49% - это на 2 колонки, но все редактируется, также под 3 колонки ставим 33% процента.

Код
margin: 3px 9px 3px 0px;


Здесь также выставляем по своему, чтоб все корректно было.

Вот несколько минут и поставил этот вид материалов на 2 колонки, что пришлось одну функцию убрать. Хотя можно было оставить, и прикрепить к иконкам.
Прикрепления: 9827042.jpg (101.9 Kb)
Страна: (RU)
Kosten
 		Вторник, 21 Ноября 2017 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Полностью доработанный и адаптивный вид материала в 2 колонки расположен в каталоге файлов, что будут представлены 2 версий на выбор. Так, что на выбор, на 1 колонку здесь, на 2 колонки можно посмотреть файлах.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать вид материалов для модуля uCoz
  • Страница 1 из 1
  • 1
Поиск: