|
Изменить вид материала на сайте
|
|
trem-200 |
Понедельник, 26 Сентября 2016, 18:10 | Сообщение 1 |
|
Всем привет дорогие друзья. Мне нужна помощь в изменение вида материала, просто увидев данный вид материала, мне он сразу же понравился. Но к сожалению, тёмный вид материала не осталось, а изменить у меня ни как не получается.
Вот ссылка на материал /load/vid_materialov_na_fajly_sajta_ucoz/81-1-0-7025
Мне хочется получить вот такой вид, но у меня этого сделать не получилось. Так как изменив немного кода по моему мнению, и посмотрев, что из этого вышло. А вышло то, что весь вид просто испортился
Прошу прощение, за мои нелепые объяснения. Надеюсь у читающих не взорвётся мозг при прочтение 
Добавлено (26.09.2016, 18:10)
---------------------------------------------
|
| [ RU ] |
|
|
Kosten |
Понедельник, 26 Сентября 2016, 18:17 | Сообщение 2 |
|
patogenych, что придется опять ставить и выводить стили. 
|
| [ RU ] |
|
|
Angerfist |
Понедельник, 26 Сентября 2016, 18:21 | Сообщение 3 |
|
patogenych, в коде на участке которого хочешь поменять цвет, ищёшь какой блок является оболочкой-родителем, имя стиля класса этого блока diva находишь в стилях, там уже знакомый background-color меняешь на свой
No regrets
Сообщение отредактировал
Angerfist - Понедельник, 26 Сентября 2016, 18:23 |
| [ RU ] |
|
|
Angerfist |
Понедельник, 26 Сентября 2016, 18:31 | Сообщение 4 |
|
|
patogenych, в данном случае цвет применён ко всему блоку-родителю
Код <div class="news-content-block">
ищём стиль, вот он
Код
.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 ] |
|
|
trem-200 |
Понедельник, 26 Сентября 2016, 18:46 | Сообщение 5 |
|
|
Цитата Angerfist (  ) в коде на участке которого хочешь поменять цвет, ищёшь какой блок является оболочкой-родителем, имя стиля класса этого блока diva находишь в стилях, там уже знакомый background-color меняешь на свой
Это поменять я могу, я не знаю как добиться удаления рейтинга кто добавил материал, просто при удаление, о вид портится.
|
| [ RU ] |
|
|
Kosten |
Понедельник, 26 Сентября 2016, 18:50 | Сообщение 6 |
|
|
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("https://zornet.ru/Ajaxoskrip/Abaveg/baseinfo.png") no-repeat 5px 50%;
}
@font-face {
font-family: 'PTSans';
src: url('https://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?>https://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="https://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="https://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="https://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> |
| [ RU ] |
|
|
trem-200 |
Понедельник, 26 Сентября 2016, 18:54 | Сообщение 7 |
|
|
Kosten, Спасибо огромное. Что же я делал бы, если этого сайта не было?
|
| [ RU ] |
|
|
Kosten |
Понедельник, 26 Сентября 2016, 18:59 | Сообщение 8 |
|
|
patogenych, еще не все, сейчас немного его доработаю.
|
| [ RU ] |
|
|
Kosten |
Понедельник, 26 Сентября 2016, 19:14 | Сообщение 9 |
|
|
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("https://zornet.ru/Ajaxoskrip/Abaveg/baseinfo.png") no-repeat 5px 50%;
}
@font-face {
font-family: 'PTSans';
src: url('https://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?>https://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="https://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="https://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="https://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 и заменяем ее на нет изображение тоже картинку, к примеру на эту.
Это когда на материал не будет залито изображение, эта появится автоматически.
|
| [ RU ] |
|
|
Angerfist |
Понедельник, 26 Сентября 2016, 19:16 | Сообщение 10 |
|
|
patogenych, просто вопрос был не сформулирован чётко и пришлось догонять что ты имел ввиду )
No regrets
|
| [ RU ] |
|
|
Angerfist |
Понедельник, 26 Сентября 2016, 19:17 | Сообщение 11 |
|
|
Kosten, что ты имел ввиду под Цитата Kosten ( ) стилями некоторые элементы запретил
?)
No regrets
Сообщение отредактировал
Angerfist - Понедельник, 26 Сентября 2016, 19:19 |
| [ RU ] |
|
|
Kosten |
Понедельник, 26 Сентября 2016, 19:24 | Сообщение 12 |
|
|
Angerfist, но там пробел под рейтинг, не стал его просто вид материала убирать, а отключил на стилях, чтоб не показывался, это как пример.
|
| [ RU ] |
|
|
trem-200 |
Понедельник, 26 Сентября 2016, 19:27 | Сообщение 13 |
|
|
Цитата Angerfist ( ) просто вопрос был не сформулирован чётко и пришлось догонять что ты имел ввиду )
Да я знаю, что мастер задавать вопросы
|
| [ RU ] |
|
|
Kosten |
Понедельник, 26 Сентября 2016, 19:29 | Сообщение 14 |
|
|
patogenych, но увеличил название материала, и фото нет материала нужно поставить, все выше описано.
|
| [ RU ] |
|
|
Kosten |
Понедельник, 26 Сентября 2016, 19:31 | Сообщение 15 |
|
|
Angerfist, вот бы его адаптировать под мобильные устройства, как на это смотришь?
|
| [ RU ] |
|
|
