» »

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

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

Сразу код со стилями идет у этого вида материалов новостей сайта под серый дизайн для ucoz, также на светлых дизайн сайтах будит смотреться шикарно. Ярко выраженное окно, которое при нажатие увеличивается картинка. И отключается с правой стороны вверху крестик. Но смотря если у вас стоит яхо окно то картинка будит в нем.
Приступаем к установке:
Все стандартно, заходим в П.К - Новости - Вид материалов, там все убираем и ставим наш код.
Код
Код
<style>  
  .viewn_loop {margin-bottom:7px;}  
  .viewn_t,  
  .viewn_t2 {padding:0 10px 0 0; background:url(http://zornet.ru/zornet_ru1/viewn_t_bg.png) no-repeat right -34px;}  
  .viewn_t_in {height:34px; background:url(http://zornet.ru/zornet_ru1/viewn_t_bg.png) no-repeat 0 0;}  
  .viewn_title {height:16px; padding:9px 0 0 12px; overflow:hidden; font-size:13px; font-weight:bold; color:#009900;}  
  .viewn_title a {color:000000; text-decoration:none;}  
  .viewn_title a:hover {text-decoration:underline;}  
  .viewn_c {background:url(http://zornet.ru/zornet_ru1/viewn_c_bg.png) repeat-y 0 0;}  
  .viewn_c_in {padding:0 3px; overflow:hidden; background:url(http://zornet.ru/zornet_ru1/viewn_c_bg.png) repeat-y right 0;}  
  .viewn_c_in2 {padding:5px; background:#ededed;}  
  .viewn_detail {overflow:hidden; padding:0 2px; margin:-3px 0 0 0; color:#232323; text-shadow:1px 1px 1px #fff;}  
  .viewn_detail a {text-shadow:1px 1px 1px #fff; text-decoration:none;}  
  .viewn_detail a:hover {text-decoration:underline;}  
  .v_detail_b {margin-bottom:-5px;}  
  .right {float:right;}  
  .hr_v {height:3px; margin:3px 0; border-left:1px solid #7c7c7c; border-right:1px solid #7c7c7c; background:url(http://zornet.ru/zornet_ru1/punktir_x_grey.png) repeat-x 0 1px;}  
  .viewn_cont {overflow:hidden; padding:0 2px;}  
  .viewn_cont img {max-width:100%;}  
  .viewn_cont img[align="left"] {display:block; float:left; margin:0 10px 10px 0;}  
  .viewn_cont img[align="right"] {display:block; float:right; margin:0 0 10px 10px;}  
  .viewn_l {width:172px; height:136px; padding:5px; float:left; margin:0 10px 0 0; overflow:hidden; background:url(http://zornet.ru/zornet_ru1/posterbg2.png) no-repeat 0 0;}  
  .viewn_l img {width:150px !important; height:128px !important; vertical-align:top;}  
  .viewn_r {overflow:hidden; color:#232323; text-shadow:1px 1px 1px #fff;}  
  .hr_v2 {height:1px; margin:5px -6px; border-top:1px solid #fff;border-bottom:1px solid #fff; background:#7c7c7c;}  
  .viewn_b {height:6px; display:block; padding:0 10px 0 0; background:url(http://zornet.ru/zornet_ru1/viewn_b_bg.png) no-repeat right -6px;}  
  .viewn_b b {height:6px; display:block; background:url(http://zornet.ru/zornet_ru1/viewn_b_bg.png) no-repeat 0 0;}  

  .viewn_b2 {height:6px; display:block; padding:0 10px 0 0; background:url(http://zornet.ru/zornet_ru1/viewn_b2_bg.png) no-repeat right -6px;}  
  .viewn_b2 b {height:6px; display:block; background:url(http://zornet.ru/zornet_ru1/viewn_b2_bg.png) no-repeat 0 0;}  
  </style>  
  <div class="viewn_loop">  
  <div class="viewn_t">  
  <div class="viewn_t_in">  
  <h4 class="viewn_title"> <a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</h4>  
  </div>  
  </div>  
  <div class="viewn_c">  
  <div class="viewn_c_in">  
  <div class="viewn_c_in2">  
  <div class="viewn_detail">  
  <div class="right">Добавил: <a href="$PROFILE_URL$" target="_blank"><b>$USERNAME$</b></a> » Дата: <span title="$TIME$">$DATE$</span></div>  
  Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>  
  </div>  
  <div class="hr_v"></div>  
  <div class="viewn_cont">  
  <div class="viewn_l"> <img id="img$ID$" src="$IMG_URL1$" width="150px" height="128px" align="left" alt="$TITLE$" />  
   
<script type="text/javascript">  
  $(function(){  
  $('#img$ID$').click(function(){var s="'sc'";  
   
   
  new _uWnd('Et','Реальный размер изображения $TITLE$',70,70,{autosize:1,shadow:1,autosizeonimages:1,header:1},'<img src="'+$(this).attr('src')+'" align="center" alt="" onclick="_uWnd.close('+s+')" style="max-width:900px;max-height:700px;cursor:pointer;">');});  
  });  
</script> </div>  
  <div class="viewn_r">  
  $MESSAGE$  
  </div>  
  </div>  
  <div class="hr_v2"></div>  
  <div class="viewn_detail v_detail_b">  

  <div class="right"> <div> </div></div>  
  Просмотров: $READS$ | Загрузок: $LOADS$ | Комментариев: $COMMENTS_NUM$  
  </div>  
  </div>  
  </div>  
  </div>  
  <b class="viewn_b"><b></b></b>  
  </div>


Кому нужно поменять цвет окна, оставляйте здесь заявку, создадим другой цвет под ваш дизайн.

17.05.2012 Просмотров: 1370 Комментарий: (12)

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

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

Комментарий: 12
avatar
oleg37646 17.01.2017 20:541
0
Здравствуйте, а есть у вас вот такой вид новостей? Смотрите тут
Уточняю, потому что ни на одном сайте, не объясняют как изменить размер вида новостей под свой сайт. Помогите кто хорошо разбирается в этом. Буду очень благодарен!
waak
waak 17.01.2017 21:482
0
Здравствуйте! уточните конкретнее что именно ван нужно изменить ширину всего блока или картинки может шрифт или ещё что-то.
Если вы не нашли нужный материал на сайте вы всегда можете создать тему на форуме с просьбой о создании для вас того или иного материала предоставив информацию о нём описание скриншоты пример если есть короче говоря подробности что и как должно быть и мы обязательно её рассмотрим и если нам покажется ваша просьба интересной мы её выполним
Kosten
Kosten 17.01.2017 21:585
0
waak, здесь полностью согласен, если делать, нужно учитывать мобильную адаптацию сразу. Если рисовать и дизайн будет на ссылках, то очень трудно адаптацию под мобильные аппараты сделать и тогда только ставить придется мобильный шаблон.
Сопрано
Сопрано 17.01.2017 21:483
0
Этот вид только под один размер, и его не как не сделать, разве что все только с начало рисовать и верстать.
waak
waak 17.01.2017 21:514
0
С чего это вы так решили? немного поправить стили и всё.
Так же при необходимости можно адаптировать под моб устройства
avatar
oleg37646 17.01.2017 21:596
0
Ширину блока.
Kosten
Kosten 17.01.2017 21:597
0
Сейчас вообще редко кто рисует и верстает. Это можно сделать на вид материала форума, но на модуль файлы как сказал это не просто.
avatar
oleg37646 17.01.2017 22:038
0
Если бы я знал, нарисовал бы как-то. Там ширина 501, а мне нужно 540.
waak
waak 17.01.2017 22:219
0
Я не знаю где вы нашли ограничения такие в данном коде но это ладно просто дайте ссылку на сайт где стоит такой вид и нужно исправить ширину блока и я вам помогу чем смогу
Kosten
Kosten 17.01.2017 22:2610
0
Тема идет не про этот вид материал, а про этот, что ссылку в первом посту привели.



Вообще то если нужно. то создавайте тему на форуме, там есть специальная категория ЗДЕСЬ.
waak
waak 18.01.2017 00:1911
+1
Тут всё просто меняем размер в цсс и редактируем картинку вот и всё

Код
<div class="viewn_loop">  
  <h4 class="viewn_title"><a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</h4>  
  <div class="viewn_cont">  
  <div class="viewn_detail">  
  <div class="viewn_date"><span>$DATE$,$TIME$</span></div>  
Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>  
  </div>  
  <?if($IMG_URL1$)?> <div class="viewn_pict" ><span><img id="img$ID$" src="$IMG_URL1$" width="100" height="100" alt="$TITLE$" />  
  
  <script type="text/javascript">  
  $(function(){  
  $('#img$ID$').click(function(){var s="'sc'";  
  
  
  new _uWnd('Et','Реальный размер изображения $TITLE$',70,70,{autosize:1,shadow:1,autosizeonimages:1,header:1},'<img src="'+$(this).attr('src')+'" align="center" alt="" onclick="_uWnd.close('+s+')" style="max-width:900px;max-height:700px;cursor:pointer;">');});  
  });  
  </script> </span></div><?endif?>  
  <div class="viewn_text">  
  <div style="display:inline;">$MESSAGE$</div>  
  </div>  
  </div>  
  <div class="viewn_bottom">  
  
  <div class="viewn_link"><a href="$ENTRY_URL$">Подробнее</a></div>  
  Комментарии <b>($COMMENTS_NUM$)</b> Просмотры: <b>$READS$</b> добавил: <b><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></b>  
  </div>  
</div>  
<style>h4 {font-size:16px;}  
.viewn_loop {width:540px; color:#969696; margin:20px 20px 18px 20px; }  
.viewn_title {height:32px; line-height:32px; overflow:hidden; margin:0; padding:0 0 0 14px; font-size:14px; font-weight:bold; color:#fff; text-shadow:1px 1px 1px #2384a0; background:#40a9c3 url(/img/viewn_bg.png) no-repeat -501px 0;}  
.viewn_title a {color:#fff; text-decoration:none;}  
.viewn_title a:hover {text-decoration:underline;}  
.viewn_cont {padding:7px 4px 6px 4px; overflow:hidden; line-height:1.6; background:url(/img/viewn_bg.png) no-repeat -501px -32px;}  

.viewn_detail {width:543px; overflow:hidden; padding:2px 8px 3px 8px; margin:0 0 3px -3px; background:url(/img/viewn_bg.png) no-repeat -1743px bottom;}  
.viewn_detail a {font-weight:bold; color:#969696; text-decoration:none;}  
.viewn_detail a:hover {text-decoration:underline;}  
.viewn_date {float:left; padding:0 4px 0 0; margin:-2px 6px 0 0; background:url(/img/viewn_bg.png) no-repeat right 0;}  
.viewn_date span {min-width:70px; height:22px; line-height:22px; display:block; padding:0 0 0 33px; float:left; color:#929292; background:url(/img/viewn_bg.png) no-repeat -2283px 0;}  

.viewn_pict {width:226px; padding:7px 0 0 0; float:left; margin:0 -5px 0 0; background:url(/img/viewn_bg.png) no-repeat 0 0;}  
.viewn_pict span {padding:0 22px 16px 6px; display:block; overflow:hidden; background:url(/img/viewn_bg.png) no-repeat -246px bottom;}  
.viewn_pict img {width:198px; min-height:140px; vertical-align:top;}  
.viewn_pict img:hover {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); filter: alpha(opacity=80); opacity:0.8;}  

.viewn_text {padding:0 0 0 4px; }  

.viewn_bottom {height:24px; padding:12px 0 0 28px; overflow:hidden; font-size:10px; color:#f6f6f6; text-shadow:1px 1px 1px #818181; background:#979797 url(/img/viewn_bg.png) no-repeat -1044px bottom;}  
.viewn_bottom b {margin:0 8px 0 0;}  
.viewn_bottom a {color:#f6f6f6; text-shadow:1px 1px 1px #818181; text-decoration:none;}  
.viewn_bottom a:hover {text-decoration:underline;}  
.viewn_link {width:101px; height:21px; float:left; margin:-3px 26px 0 0;}  
.viewn_link a {width:93px; height:21px; line-height:21px; padding:0 0 0 8px; display:block; font-size:10px; color:#6e6e6e; text-shadow:none; text-decoration:none; background:#fefefe url(/img/viewn_bg.png) no-repeat -1525px 0;}  
.viewn_link a:hover {text-decoration:none; background-position:-1505px -23px;}  
</style>

Вот код вставьте его вместо своего
Теперь скачайте вот эту картинку и залейте в папку img и будет вам счастье 540px
waak
waak 18.01.2017 00:2412
0
Могут быть мелкие не точности так как я его не устанавливал но их можно будет поправить в цсс стилях
avatar