Изменить вид материала на сайте - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 2 1 2 »
Модератор форума: -SAM-

Изменить вид материала на сайте

trem200

Понедельник, 26 Сентября 2016, 18:10 | Сообщение 1

Проверенные

Сообщений:433

Награды: 4

« 85 »

Всем привет дорогие друзья. Мне нужна помощь в изменение вида материала, просто увидев данный вид материала, мне он сразу же понравился. Но к сожалению, тёмный вид материала не осталось, а изменить у меня ни как не получается.

Вот ссылка на материал /load/vid_materialov_na_fajly_sajta_ucoz/81-1-0-7025

Мне хочется получить вот такой вид, но у меня этого сделать не получилось. Так как изменив немного кода по моему мнению, и посмотрев, что из этого вышло. А вышло то, что весь вид просто испортился

Прошу прощение, за мои нелепые объяснения. Надеюсь у читающих не взорвётся мозг при прочтение smile

Добавлено (26.09.2016, 18:10)
---------------------------------------------

Прикрепления: 8471627.jpg (96.9 Kb)

Страна: (RU)

Kosten

Понедельник, 26 Сентября 2016, 18:17 | Сообщение 2

Администраторы

Сообщений:44490

Награды: 70

« 557 »

patogenych, что придется опять ставить и выводить стили. biggrin

Страна: (RU)

Angerfist

Понедельник, 26 Сентября 2016, 18:21 | Сообщение 3

Vip

Сообщений:767

Награды: 21

« 253 »

patogenych, в коде на участке которого хочешь поменять цвет, ищёшь какой блок является оболочкой-родителем, имя стиля класса этого блока diva находишь в стилях, там уже знакомый background-color меняешь на свой

No regrets

Сообщение отредактировал
Angerfist - Понедельник, 26 Сентября 2016, 18:23

Страна: (RU)

Angerfist

Понедельник, 26 Сентября 2016, 18:31 | Сообщение 4

Vip

Сообщений:767

Награды: 21

« 253 »

patogenych, в данном случае цвет применён ко всему блоку-родителю

Код

ищём стиль, вот он

Код

.news-content-block{ font-family: 'PTSans';
height: 191px;
float: left;
margin: 20px 0 15px;
padding-right: 13px;
background-color: rgba(231, 231, 231, 0.91);}

цвет #E7E7E7 в rgba он 231, 231, 231, можешь менять на свой

No regrets

Страна: (RU)

trem200

Понедельник, 26 Сентября 2016, 18:46 | Сообщение 5

Проверенные

Сообщений:433

Награды: 4

« 85 »

Цитата Angerfist (

)

в коде на участке которого хочешь поменять цвет, ищёшь какой блок является оболочкой-родителем, имя стиля класса этого блока diva находишь в стилях, там уже знакомый background-color меняешь на свой

Это поменять я могу, я не знаю как добиться удаления рейтинга кто добавил материал, просто при удаление, о вид портится.

Страна: (RU)

Kosten

Понедельник, 26 Сентября 2016, 18:50 | Сообщение 6

Администраторы

Сообщений:44490

Награды: 70

« 557 »

patogenych, вообщем рейтинг убрал и стилями некоторые элементы запретил. При наведение немного цвет будет меняться, оставил этот эффект.

Так выйдет по цвету:

В CSS

Код

.news-content-block{font-family: 'PTSans';height: 191px;float: left;margin: 10px 0 5px;padding-right: 13px;background-color: rgba(107, 107, 107, 0.91);border-radius: 5px;}
.news-content-block:hover{
opacity: 0.9;
-moz-opacity: 0.9;
filter: alpha(opacity=90) white;
-khtml-opacity: 0.9;
background-color: #525252;
padding-right:13px;}
.dnner2{
width:289px;
height:175px;display:block;position:relative;
overflow:hidden;border: 8px solid #756D6D;border-radius: 5px;}
.dnner2 img{
width:289px;
min-height:175px;
position:relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.dnner2:hover img {
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);}
.news-content-block-rg{
width: 367px;
height: 157px;
margin: -190px 0 0 320px;}
.news-content-block-data a{
font-size:13px;
color:#1bd0d7;}
.news-content-block-title {
margin-top:10px;
}
.news-content-block-title {
font-size:18px;
color:#2e2e2e;
}
.news-content-block-title a{
font-size:18px;color: #EAEAEA;}
.news-content-block-title a:hover{
color: #1bd0d7;
}
.news-content-block-text{text-align: justify;height: 85px;overflow: hidden;margin-top:10px;font-size:14px;color: #DADADA;}
.news-content-block-cnop {
float: right;
}
.news-content-block-cnop a {
padding: 2px 10px 4px;
font-weight:normal;
font-style:normal;
text-decoration:none;
font-size:16px;
color:#ffffff;
background: transparent;background-color: rgb(49, 173, 218);
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-ms-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;}
.news-content-block-cnop a:hover{
background: transparent;
background-color: rgb(45,45,45);
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-ms-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
}
.ratebox-sh {margin: -1px -13px 0 0;/* border: solid 1px #fff; */border-radius: 0 0 0 9px;/* padding: 1px 4px 0 4px; *//* float: right; */
height: 19px;/* text-align: center; *//* background: #fff; */}
.rate {
text-align: left;
width: 85px;
height: 17px;
margin: 0 auto;
overflow: hidden;
}
.cover-stat-wrap {
background: #fff;
margin: 0 0 0 325px;
float: left;
height: 19px;
line-height: 14px;
border-radius: 9px;
border: solid 1px #D8D8D8;
padding: 0px 4px 3px 4px;
}
.cover-stat {
margin-right: 8px;
}
.cover-stat .stat-label {
text-shadow: 1px 1px 0 white;
}
.be-font-pre:before,
.be-font-inline {
vertical-align: baseline;
font-size: 26px;
line-height: 0;
font-weight: normal;
text-transform: none;
text-rendering: optimizeLegibility;
margin-right: 5px;
position: relative;
top: 4px;
display: inline-block;
line-height: 0;
height: 15px;
color: #757575;
}
.be-font-pre:before, .be-font-inline1 {
font-size: 32px;
line-height: 0;
font-weight: normal;
text-transform: none;
text-rendering: optimizeLegibility;
margin-right: 10px;
position: relative;
top: 1px;
display: inline-block;
line-height: 0;
height: 15px;
color: #FFF;
}
.cover-stat .stat-value {
font-size: 14px;
text-shadow: 1px 1px 0 white;
color: #757575;
}
.cover-stat .stat-value a{
font-size: 14px;
text-shadow: 1px 1px 0 white;
color:#898989;
}
.category-cnop {
top: 15px;
position: absolute;
}
.category-cnop a {
padding: 2px 10px 4px;
font-weight:normal;
font-style:normal;
text-decoration:none;
font-size:16px;
color:#ffffff;
background: rgba(26, 207, 216, 0.5);
border-radius: 0 2px 2px 0;
}
.category-cnop a:hover{
background: transparent;
background-color: rgb(45, 45, 45);
}

.cover-stat .stat-label-full {
cursor: pointer;
text-shadow: 0 1px 0 #fff;
font-size: 40px;
margin-right: 2px;
}
.cover-stat .stat-label-full {
text-shadow: none;
color: white;
}
.cover-stat .stat-label-full:hover {
color: #ccc;
}
.cover-stat .stat-label-full1 {
color: #fff;
text-shadow: 0 1px 0 #fff;
font-size: 30px;
margin-right: 2px;
}
.cover-stat .stat-label-full1 {
text-shadow: none;
}
.cover-stat .stat-value-full {
font-size: 20px;
text-shadow: none;
color: white;
}
.baseinfo {
padding: 0 8px 0 18px;
font-size: 14px;
color: #1bd0d7;
float: left;
height: 21px;
background: #f1f5f7 url("http://zornet.ru/Ajaxoskrip/Abaveg/baseinfo.png") no-repeat 5px 50%;
}

@font-face {
font-family: 'PTSans';
src: url('http://zornet.ru/Ajaxoskrip/Abaveg/ptn57f.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Вид материала:

Код

<div class="news-content-block">
<div class="dnner2">
<a href="$ENTRY_URL$" ><img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://zornet.ru/Ajaxoskrip/Abaveg/OohSq3Z.png<?endif?>" alt="$TITLE$" title="$TITLE$" border="0"/></a>
<div class="category-cnop"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>
</div>
<div class="news-content-block-rg">
<div class="news-content-block-data">
<div class="ratebox-sh"><div class="rate"></div></div></div>
<div class="news-content-block-title"><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?><a href="$ENTRY_URL$">$TITLE$</a><?if($DATE$='Сегодня' or $DATE$='Вчера')?><img src="http://zornet.ru/Ajaxoskrip/Abaveg/news.png" align="absmiddle" title="$DATE$" border="0"><?endif?></div>
<div class="news-content-block-text">$MESSAGE$</div>
</div>
<div class="cover-stat-wrap">
<span class="cover-stat cover-stat-views" title="Просмотров: $READS$">
<span class="stat-label be-font-inline"><img src="http://zornet.ru/Ajaxoskrip/Abaveg/views.png" border="0"></span>
<span class="stat-value">$READS$</span>
</span>
<span class="cover-stat cover-stat-views" title="Комментариев: $COMMENTS_NUM$">
<a href="$COMMENTS_URL$">
<span class="stat-label be-font-inline"><img src="http://zornet.ru/Ajaxoskrip/Abaveg/comment.png" border="0"></span>
<span class="stat-value">$COMMENTS_NUM$</span>
</a>
</span>
</div>
<div class="news-content-block-cnop"><a href="$ENTRY_URL$">ПОДРОБНЕЕ</a></div>
</div>

Прикрепления: 7649100.png (158.8 Kb)

Страна: (RU)

trem200

Понедельник, 26 Сентября 2016, 18:54 | Сообщение 7

Проверенные

Сообщений:433

Награды: 4

« 85 »

Kosten, Спасибо огромное. Что же я делал бы, если этого сайта не было?

Страна: (RU)

Kosten

Понедельник, 26 Сентября 2016, 18:59 | Сообщение 8

Администраторы

Сообщений:44490

Награды: 70

« 557 »

patogenych, еще не все, сейчас немного его доработаю.

Страна: (RU)

Kosten

Понедельник, 26 Сентября 2016, 19:14 | Сообщение 9

Администраторы

Сообщений:44490

Награды: 70

« 557 »

patogenych, вообщем этот доработан, название материала выше поднято, лишние коды убраны с вид материала.

CSS

Код

.news-content-block{font-family: 'PTSans';height: 191px;float: left;margin: 10px 0 5px;padding-right: 13px;background-color: rgba(107, 107, 107, 0.91);border-radius: 5px;}
.news-content-block:hover{
opacity: 0.9;
-moz-opacity: 0.9;
filter: alpha(opacity=90) white;
-khtml-opacity: 0.9;
background-color: #525252;
padding-right:13px;}
.dnner2{
width:289px;
height:175px;display:block;position:relative;
overflow:hidden;border: 8px solid #756D6D;border-radius: 5px;}
.dnner2 img{
width:289px;
min-height:175px;
position:relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.dnner2:hover img {
-webkit-transform: scale(1.2) rotate(-7deg);
-moz-transform: scale(1.2) rotate(-7deg);
-ms-transform: scale(1.2) rotate(-7deg);
-o-transform: scale(1.2) rotate(-7deg);
transform: scale(1.2) rotate(-7deg);}
.news-content-block-rg{width: 367px;height: 147px;
margin: -190px 0 0 320px;}
.news-content-block-data a{
font-size:13px;
color:#1bd0d7;}
.news-content-block-title {
margin-top:10px;
}
.news-content-block-title {
font-size:18px;
color:#2e2e2e;
}
.news-content-block-title a{font-size: 21px;color: #EAEAEA;}
.news-content-block-title a:hover{
color: #1bd0d7;
}
.news-content-block-text{text-align: justify;height: 85px;overflow: hidden;margin-top:10px;font-size:14px;color: #DADADA;}
.news-content-block-cnop {
float: right;
}
.news-content-block-cnop a {padding: 2px 10px 4px;
font-weight:normal;
font-style:normal;
text-decoration:none;font-size:16px;
color:#ffffff;
background: transparent;background-color: rgb(49, 173, 218);-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 2px 2px 2px 2px;
-ms-border-radius: 2px 2px 2px 2px;/* border-radius: 2px 2px 2px 2px; */}
.news-content-block-cnop a:hover{
background: transparent;
background-color: rgb(45,45,45);
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-ms-border-radius: 2px 2px 2px 2px;border-radius: 5px 5px 5px 5px;}
.ratebox-sh {margin: -1px -13px 0 0;/* border: solid 1px #fff; */border-radius: 0 0 0 9px;/* padding: 1px 4px 0 4px; *//* float: right; */
height: 19px;/* text-align: center; *//* background: #fff; */}
.rate {
text-align: left;
width: 85px;
height: 17px;
margin: 0 auto;
overflow: hidden;
}
.cover-stat-wrap {background: #fff;margin: 0 0 0 325px;
float: left;height: 19px;line-height: 14px;border-radius: 5px;border: solid 1px #5F5A5A;padding: 0px 4px 3px 4px;}
.cover-stat {
margin-right: 8px;}
.cover-stat .stat-label {
text-shadow: 1px 1px 0 white;
}
.be-font-pre:before,
.be-font-inline {vertical-align: baseline;font-size: 26px;
line-height: 0;font-weight: normal;
text-transform: none;
text-rendering: optimizeLegibility;
margin-right: 5px;
position: relative;top: 4px;
display: inline-block;
line-height: 0;height: 15px;
color: #757575;}
.be-font-pre:before, .be-font-inline1 {
font-size: 32px;
line-height: 0;
font-weight: normal;
text-transform: none;
text-rendering: optimizeLegibility;
margin-right: 10px;
position: relative;
top: 1px;
display: inline-block;
line-height: 0;
height: 15px;
color: #FFF;
}
.cover-stat .stat-value {
font-size: 14px;
text-shadow: 1px 1px 0 white;
color: #757575;
}
.cover-stat .stat-value a{
font-size: 14px;
text-shadow: 1px 1px 0 white;
color:#898989;
}
.category-cnop {
top: 15px;
position: absolute;
}
.category-cnop a {
padding: 2px 10px 4px;
font-weight:normal;
font-style:normal;
text-decoration:none;
font-size:16px;
color:#ffffff;
background: rgba(26, 207, 216, 0.5);
border-radius: 0 2px 2px 0;
}
.category-cnop a:hover{
background: transparent;
background-color: rgb(45, 45, 45);
}

.cover-stat .stat-label-full {
cursor: pointer;
text-shadow: 0 1px 0 #fff;
font-size: 40px;
margin-right: 2px;
}
.cover-stat .stat-label-full {
text-shadow: none;
color: white;
}
.cover-stat .stat-label-full:hover {
color: #ccc;
}
.cover-stat .stat-label-full1 {
color: #fff;
text-shadow: 0 1px 0 #fff;
font-size: 30px;
margin-right: 2px;
}
.cover-stat .stat-label-full1 {
text-shadow: none;
}
.cover-stat .stat-value-full {
font-size: 20px;
text-shadow: none;
color: white;
}
.baseinfo {
padding: 0 8px 0 18px;
font-size: 14px;
color: #1bd0d7;
float: left;
height: 21px;
background: #f1f5f7 url("http://zornet.ru/Ajaxoskrip/Abaveg/baseinfo.png") no-repeat 5px 50%;
}

@font-face {
font-family: 'PTSans';
src: url('http://zornet.ru/Ajaxoskrip/Abaveg/ptn57f.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Вид материала

Код

<div class="news-content-block">
<div class="dnner2">
<a href="$ENTRY_URL$" ><img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://zornet.ru/Ajaxoskrip/Abaveg/OohSq3Z.png<?endif?>" alt="$TITLE$" title="$TITLE$" border="0"/></a>
<div class="category-cnop"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>
</div>
<div class="news-content-block-rg">
<div class="news-content-block-data">
</div>
<div class="news-content-block-title"><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?><a href="$ENTRY_URL$">$TITLE$</a><?if($DATE$='Сегодня' or $DATE$='Вчера')?><img src="http://zornet.ru/Ajaxoskrip/Abaveg/news.png" align="absmiddle" title="$DATE$" border="0"><?endif?></div>
<div class="news-content-block-text">$MESSAGE$</div>
</div>
<div class="cover-stat-wrap">
<span class="cover-stat cover-stat-views" title="Просмотров: $READS$">
<span class="stat-label be-font-inline"><img src="http://zornet.ru/Ajaxoskrip/Abaveg/views.png" border="0"></span>
<span class="stat-value">$READS$</span>
</span>
<span class="cover-stat cover-stat-views" title="Комментариев: $COMMENTS_NUM$">
<a href="$COMMENTS_URL$">
<span class="stat-label be-font-inline"><img src="http://zornet.ru/Ajaxoskrip/Abaveg/comment.png" border="0"></span>
<span class="stat-value">$COMMENTS_NUM$</span>
</a>
</span>
</div>
<div class="news-content-block-cnop"><a href="$ENTRY_URL$">ПОДРОБНЕЕ</a></div>
</div>

В вид материала находим эту ссылку /Ajaxoskrip/Abaveg/OohSq3Z.png и заменяем ее на нет изображение тоже картинку, к примеру на эту.