Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Многостраничный виджет "Новости" [Pun] Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Многостраничный виджет "Новости" [Pun] Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях
Важная информация!

Правила форума

для обязательного прочтения!

Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Не корректное отображение картинок
автор Luz Сегодня в 12:40

» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Сегодня в 12:13

» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31

» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37

» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26

» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28

» Помощь в нескольких вопросах по форуму
автор лексей2222 Февраль 22nd 2024, 13:21

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani Февраль 14th 2024, 00:54

» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09

Многостраничный виджет "Новости" [Pun]

Перейти вниз

Многостраничный виджет "Новости" [Pun] Empty Многостраничный виджет "Новости" [Pun]

Сообщение автор Dana Domirani Февраль 5th 2014, 14:29

Многостраничный виджет "Новости" [Pun] Image_26

Живое демо:



Вариант отображения виджета "Новости" на портале. Выводится девять последних новостей, которые можно последовательно пролистать + еще одна ссылка на общий новостной раздел (кнопка "Все новости"). Из каждой новости можно быстро перейти в тему с обсуждениями (кнопка "Читать целиком").

Подразумевается, что у Вас уже включен портал и на нем установлен виджет "Новости".
Укажите в его настройках:
Число новостей: 9
Длина новостей: 500

Сохраните эти изменения.

Вариант для Pun.

1. Откройте ПА > Оформление > Шаблоны — Портал > шаблон mod_news (Новости)
Замените все его содержимое на этот код:
Код:
<div id="example-content-container">

   <div id="example-links">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <a class="allnews" href="/f1-forum">все новости</a>
   </div>

   <div style="clear: both;"></div>
   
    <div id="example-content">
      <!-- BEGIN post_row -->

<div class="module main">
   <a name="news_{post_row.ID}"></a>

   <div class="module mod_news">
      <div class="main-head" style="text-align:{LEFT};">{post_row.TITLE}</div>
      <div class="main-content" style="padding:0;">
         <p class="author">{post_row.TIME} {BY} <strong>{post_row.POSTER}</strong></p>
         <div class="body">
            {post_row.TEXT}<br /><br />
            
            <div class="clear"></div>
            [ {L_COMMENTS}: {post_row.REPLIES} ] [ <a class="fullnews" href="{post_row.U_VIEW_COMMENTS}">Читать целиком</a> ]
         </div>
      </div>
   </div>

</div>
<!-- END post_row -->
    </div>   
            
</div>   



<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.mod_news', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

В строке
Код:
<a class="allnews" href="/f1-forum">все новости</a>
замените /f1-forum на ссылку на ваш новостной раздел.

Сохраните и опубликуйте (!) шаблон.

2. Добавьте в CSS настройки для обновленного виджета:

Код:
/* блок с кнопками и новостями */
#example-content-container {
width: 550px;
height: 460px;
margin: 0 auto 0;
border: none;
overflow: hidden;
}

/* внутренний блок новостей, ширина = сумма всех новостных блоков */
#example-content {
display: block;
width: 5000px;
overflow: hidden;
}


/* кнопки 1-9 и 'все новости' */
#example-links p, #example-links a.allnews {
display: block;
border: 1px solid #18405e;
float: left;
text-align: center;
line-height: 20px;
margin: 0 5px 10px 0;
cursor: pointer;
background-color: #18405e;
color: #fff;
text-decoration: none !important;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

#example-links p {
height: 20px;
width: 20px;
}

#example-links a.allnews {
height: 20px;
width: 90px;
}

/* кнопки 1-9 и 'все новости' при наведении */
#example-links p:hover, #example-links a.allnews:hover {
background-color: #ddd;
color: #18405e;
}

/* выстраиваем новости в линию */
#example-content .module.main {
display: block;
float: left;
width: 548px;
padding-right: 2px;
}

/* максимальная ширина и высота картинок в новостях */
#example-content .module.main img {
max-width: 535px !important;
max-height: 300px;
}

/* кнопки 'читать целиком' */
.module.main .fullnews {
color: #DB0C1B !important;
text-decoration: none !important;
}

Сохраните.

3. В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, новостной виджет
Расположение: на портале
Код:
Код:
jQuery(document).ready(function() {

jQuery('#example-links p').click(function(){
var index = jQuery("#example-links p").index(this);
jQuery('#example-content').animate({"marginLeft" : -index*550 + "px"});
return false;
});

});

Сохраните.


Многостраничный виджет "Новости" [Pun] Userba12

Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


Dana Domirani
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22994
Возраст : 39
Регистрация : 2008-04-18
Благодарности : 9286

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения