• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Изменить вид материала на сайте
Изменить вид материала на сайте
trem200
Понедельник, 26 Сентября 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Всем привет дорогие друзья. Мне нужна помощь в изменение вида материала, просто увидев данный вид материала, мне он сразу же понравился. Но к сожалению, тёмный вид материала не осталось, а изменить у меня ни как не получается.

Вот ссылка на материал /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 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
patogenych, что придется опять ставить и выводить стили. biggrin
Страна: (RU)
Angerfist
Понедельник, 26 Сентября 2016 | Сообщение 3
Оффлайн
Vip
Сообщений:767
Награды: 21
patogenych, в коде на участке которого хочешь поменять цвет, ищёшь какой блок является оболочкой-родителем, имя стиля класса этого блока diva находишь в стилях, там уже знакомый background-color меняешь на свой

No regrets

Сообщение отредактировал
Angerfist - Понедельник, 26 Сентября 2016, 18:23
Страна: (RU)
Angerfist
Понедельник, 26 Сентября 2016 | Сообщение 4
Оффлайн
Vip
Сообщений:767
Награды: 21
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)
trem200
Понедельник, 26 Сентября 2016 | Сообщение 5
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Цитата Angerfist ()
в коде на участке которого хочешь поменять цвет, ищёшь какой блок является оболочкой-родителем, имя стиля класса этого блока diva находишь в стилях, там уже знакомый background-color меняешь на свой


Это поменять я могу, я не знаю как добиться удаления рейтинга кто добавил материал, просто при удаление, о вид портится.
Страна: (RU)
Kosten
Понедельник, 26 Сентября 2016 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
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 | Сообщение 7
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Kosten, Спасибо огромное. Что же я делал бы, если этого сайта не было?
Страна: (RU)
Kosten
Понедельник, 26 Сентября 2016 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
patogenych, еще не все, сейчас немного его доработаю.
Страна: (RU)
Kosten
Понедельник, 26 Сентября 2016 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
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 и заменяем ее на нет изображение тоже картинку, к примеру на эту.



Это когда на материал не будет залито изображение, эта появится автоматически.
Прикрепления: 5990625.png (20.6 Kb) · 1594783.png (261.3 Kb)
Страна: (RU)
Angerfist
Понедельник, 26 Сентября 2016 | Сообщение 10
Оффлайн
Vip
Сообщений:767
Награды: 21
patogenych, просто вопрос был не сформулирован чётко и пришлось догонять что ты имел ввиду )

No regrets
Страна: (RU)
Angerfist
Понедельник, 26 Сентября 2016 | Сообщение 11
Оффлайн
Vip
Сообщений:767
Награды: 21
Kosten, что ты имел ввиду под
Цитата Kosten ()
стилями некоторые элементы запретил

?)


No regrets

Сообщение отредактировал
Angerfist - Понедельник, 26 Сентября 2016, 19:19
Страна: (RU)
Kosten
Понедельник, 26 Сентября 2016 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, но там пробел под рейтинг, не стал его просто вид материала убирать, а отключил на стилях, чтоб не показывался, это как пример.
Страна: (RU)
trem200
Понедельник, 26 Сентября 2016 | Сообщение 13
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Цитата Angerfist ()
просто вопрос был не сформулирован чётко и пришлось догонять что ты имел ввиду )


Да я знаю, что мастер задавать вопросы smile
Страна: (RU)
Kosten
Понедельник, 26 Сентября 2016 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
patogenych, но увеличил название материала, и фото нет материала нужно поставить, все выше описано.
Страна: (RU)
Kosten
Понедельник, 26 Сентября 2016 | Сообщение 15
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Angerfist, вот бы его адаптировать под мобильные устройства, как на это смотришь?
Страна: (RU)
Форум » Веб-разработка » Вопросы про uCoz » Изменить вид материала на сайте
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: