Вид материалов с всплывающим окном для сайтов uCoz

Предлагаю Вашему вниманию вид материалов для модуля Каталог сайтов платформы uCoz.Особенность: все материалы открываются во всплывающем окне, а не на отдельной странице.

✪ DEMO ⇊ СКАЧАТЬ

HTML

Панель управления – Дизайн – Управление дизайном (шаблоны) – Модуль “Каталог сайтов” – Вид материалов
Необходимо удалить все содержимое этого шаблона и вставить следующий код:

<div class="dir opacity">  
  <div class="dir_logo">  
   
  <div> 
  <center><img src="$SCREEN_URL$" width="60"></center> 
  </div>  
  </div>  
   
  <div class="dir_title"> 
  <a href="javascript:void(0)" onClick="javascript:window.open('$ENTRY_URL$', 'participant', 'width=950,height=600,status=no,toolbar=no, menubar=no,scrollbars=yes,resizable=yes');"> 
  $TITLE$</a> 
  </div> 
   
  <div class="dir_bottom">  
  <div class="dir_category">  
  <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>  
  </div>  
  <ul class="dir_statistics">  
  <li><span>$READS$</span><img src="https://stepfor.top/vid_mat/ico_Eye.png" alt="просмотров"></li>  
  <?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="https://stepfor.top/vid_mat/ico_comment.png" alt="комментарий"></li> <?endif?>  
  <?if($MODER_PANEL$)?><li>$MODER_PANEL$</li><?endif?>  
  </ul>  
  </div>  
  </div>

<div>

</div>

$TITLE$</a>

</div>

<a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>

</div>

<li><span>$READS$</span><img src="https://stepfor.top/vid_mat/ico_Eye.png" alt="просмотров"></li>

<?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="https://stepfor.top/vid_mat/ico_comment.png" alt="комментарий"></li> <?endif?>

<?if($MODER_PANEL$)?><li>$MODER_PANEL$</li><?endif?>

</ul>

</div>

Больше статей: Продвижение сайта - белые каталоги сайтов

CSS

Теперь нужно добавить стили CSS.
Перейти: Панель управления – Дизайн – Управление дизайном (CSS)
В самом конце всех стилей ставим следующие:

/*---Вид-материалов-Dir--*/  

  .dir {  
  width: 700px; 
  height: 55px; 
  margin: 10px;  
  border: 2px solid #ACACAC;  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  color:#888;  
  text-shadow: 1px 1px 1px #fff;  
  border-radius:3px;  
  }  

.dir_title a{  
  height: 20px;  
  float:left;  
  width: 617px; 
  background:#f4f4f4;  
  padding: 4px 4px;  
  font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700;  
  color: #737272;  
  text-decoration: none; 
}  

.dir_title a:hover {  
  color: #c9c4c4; 
  text-decoration: none; 
}  

.dir_logo 
{float: left;  
  display: block;  
  width: 60px;  
  height:40px; 
  background:#f4f4f4;  
  padding: 7px;  
  border-right: 1px solid #d1d1d1;  
  }  

.dir_logo div  
{height:40px; 
  overflow: hidden;} 
   
.dir_bottom {  
  float: left;  
  width: 620px;  
  border-top: 1px solid #d1d1d1;  
}  

.dir_category {  
  float:left;  
  margin-left: 5px;  
  }  

.dir_category a {  
  float:left;  
  font-weight: 700;  
  margin: 3px 3px 2px 3px;  
  color: #737272;  
  text-decoration: none;  
}  
.dir_statistics{  
  float:right;  
  margin:0;  
  padding: 0;  
  margin-right: -2px;  
  list-style:none;  
  border-left: 1px solid #d1d1d1;  
}  

.dir_statistics li {  
  float:left;  
  height:20px;  
  padding: 3px 3px 2px 3px;  
  border-right: 1px solid #d1d1d1;  
  border-left: 1px solid #fff;  
}  

.dir_statistics span{  
  float:left;  
  margin: 0px 5px 0px 0px;  
}  

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);} 
/*---END-Вид-материалов-Dir--*/

/*---Вид-материалов-Dir--*/

.dir {

width: 700px;

height: 55px;

margin: 10px;

border: 2px solid #ACACAC;

font:11px Verdana,Arial,Helvetica, sans-serif;

color:#888;

text-shadow: 1px 1px 1px #fff;

border-radius:3px;

}

.dir_title a{

height: 20px;

float:left;

width: 617px;

background:#f4f4f4;

padding: 4px 4px;

font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700;

color: #737272;

text-decoration: none;

}

.dir_title a:hover {

color: #c9c4c4;

text-decoration: none;

}

.dir_logo

{float: left;

display: block;

width: 60px;

height:40px;

background:#f4f4f4;

padding: 7px;

border-right: 1px solid #d1d1d1;

}

.dir_logo div

{height:40px;

overflow: hidden;}

.dir_bottom {

float: left;

width: 620px;

border-top: 1px solid #d1d1d1;

}

.dir_category {

float:left;

margin-left: 5px;

}

.dir_category a {

float:left;

font-weight: 700;

margin: 3px 3px 2px 3px;

color: #737272;

text-decoration: none;

}

.dir_statistics{

float:right;

margin:0;

padding: 0;

margin-right: -2px;

list-style:none;

border-left: 1px solid #d1d1d1;

}

.dir_statistics li {

float:left;

height:20px;

padding: 3px 3px 2px 3px;

border-right: 1px solid #d1d1d1;

border-left: 1px solid #fff;

}

.dir_statistics span{

float:left;

margin: 0px 5px 0px 0px;

}

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

/*---END-Вид-материалов-Dir--*/

Больше статей: Управление сайтом uCoz. Первое редактирование

В данном варианте CSS стилей использованы следующие цветовые решения:

#ACACAC; – цвет внешней рамки блока;

#f4f4f4; – цвет фона;

#d1d1d1; – цвет разделительных линий фона;

Цветовые решения вида материалов модуля Каталог сайтов

В зависимости от дизайна вашего сайта, вы можете подобрать свои цветовые решения. Для этого Вам нужно:

Скопировать данные мною CSS стили в блокнот;

С помощью команды заменить, заменить все выше указанные мною цвета на ваши.

Чтобы подобрать цвета Вы можете воспользоваться Палитрой цветов или любым удобным вам редактором.

Голубая палитра

#6EAFB1; – цвет внешней рамки блока;

#E7F3F3; – цвет фона;

#AFDCDD; – цвет разделительных линий фона;

Розовая палитра

#d38992; – цвет внешней рамки блока;

#f7f2f3; – цвет фона;

#eddadc; – цвет разделительных линий фона;

380

Вид материалов с всплывающим окном для сайтов uCoz

HTML

CSS

Цветовые решения вида материалов модуля Каталог сайтов

Leave a Reply Cancel reply