info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ Сообщений: 27 ]  Просмотры: 1082

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Небольшой интересный скриптик открытия. Простой

На основе этого скрипта реализованы блоки здесь, внизу страницы.

Можно посмотреть демо (в "голом" варианте - без оформления):

демо

А это демо со встроенным оформлением анимированных кнопок:

демо с css

Никаких файлов на сервер загружать не надо - только код.

Пример:

Код: Выделить всё

<script type="text/JavaScript">
$(document).ready(function() {
 
   //Действие по умолчанию
   $(".tab_content").hide(); //Скрыть все содержимое
   $("ul.tabs span:first").addClass("active").show(); //Активировать первую вкладку
   $(".tab_content:first").show(); //Показать первые содержание вкладке
   
   //По щелчку события
   $("ul.tabs span").click(function() {
      $("ul.tabs span").removeClass("active"); //Удалите все "active" класс
      $(this).addClass("active"); //Добавить "active" класса выбранной вкладки
      $(".tab_content").hide(); //Скрыть вкладку Все содержание
      var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки + содержание
      $(activeTab).fadeIn(); //Fade в активного содержимого
      return false;
   });
 
});
</script>
<div>
<div style="border:1px solid #b5b5b5;padding:1px">
<ul class="tabs">
<span><a class="" href="#tab1"><b>1</b></a></span>
<span><a class="" href="#tab2"><b>2</b></a></span>
<span><a class="" href="#tab3"><b>3</b></a></span>
<span><a class="" href="#tab4"><b>4</b></a></span>
<span><a class="" href="#tab5"><b>5</b></a></span>
</ul>
</div>
 
<div style="border:1px solid #b5b5b5;padding:5px;text-align:center">
<div id="tab1" class="tab_content">
первый контейнер
</div>
 
<div id="tab2" class="tab_content">
второй контейнер
</div>
 
<div id="tab3" class="tab_content">
третий контейнер
</div>
 
<div id="tab4" class="tab_content">
четвёртый контейнер
</div>
 
<div id="tab5" class="tab_content">
пятый контейнер
</div>
 
</div>
</div>


где

Код: Выделить всё

<span><a class="" href="#tab1"><b>1</b></a></span>


- ссылка на открытие первого блока

Код: Выделить всё

<div id="tab1" class="tab_content">
первый контейнер
</div>


- сам первый блок с информацией...

Для работы скрипта у вас должна быть подключена библиотека .
Если у вас её нет - подключить можно примерно так:

В "шапке" сайта найти



Вставить перед найденным

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


Кому удобнее разбираться самостоятельно у себя на компе - можно скачать демо-версию скрипта:

"голый" вариант:

Скачать из файлового архива сайта

вариант со стилем:

Скачать из файлового архива сайта



трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
javascript
Не в сети
(Дмитрий)  
2019-07-07 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


В целом мне понятно как работает данный скрипт.
Но как грамотно им воспользоваться, не очень :?

Я так понимаю, что все изменения должны быть сделаны в файле overall_footer.html

В этом файле вывод информации содержится в этом коде:

Код: Выделить всё

<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
            <!-- IF not S_IS_BOT -->
               <!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
               <!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
               <!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
               <!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
            <!-- ENDIF -->
         <li class="rightside"><!-- IF not S_IS_BOT --><a href="{U_MOBILE_ON}">{L_MOBILE_ON}</a> &bull; <!-- ENDIF --><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>


Хотелось бы понять, что есть что, для начала. Буду сюда писать свои мысли, если нет возражений.
<!-- IF S_WATCH_FORUM_LINK --> это Список форумов
<!-- IF U_WATCH_TOPIC --> - ? // КТО СЕЙЧАС НА КОНФЕРЕНЦИИ
<!-- IF U_BOOKMARK_TOPIC --> - ? // ТОПЛИСТ БЛАГОДАРНОСТЕЙ
<!-- IF U_BUMP_TOPIC --> - ? // СТАТИСТИКА
{U_MOBILE_ON}">{L_MOBILE_ON} - мобильная версия
<!-- IF U_TEAM --> это наша команда
{U_DELETE_COOKIES} - удалить куки
{S_TIMEZONE} - часовой пояс

Добавлено спустя 11 минут 33 секунды:
1. Теперь дальше. Допустим я хочу вывести несколько блоков.
| Кто сейчас на форуме || Статистика || Топлист Благодарностей || Инфо по форуму
2. Правлю файл overall_footer.html в соответствии с первым постом.
3. Составляю таблицу:
3.1 Первая вкладка: Кто сейчас на форуме
<span><a class="" href="#tab1"><b>Кто сейчас на форуме</b></a></span>
Какую ссылку прописывать? :?
<!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->

Блок с информацией:
<div id="tab1" class="tab_content">
первый контейнер
</div>


Не в сети
(Андрей)  
2019-07-07 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


1. в названии блока прописывается не ссылка, а именно название. то есть

Код: Выделить всё

{L_WHO_IS_ONLINE} - кто сейчас на конференции

{L_STATISTICS} - статистика

{L_BIRTHDAYS} - дни рождения


прописывается

Код: Выделить всё

<span><a class="" href="#tab1"><b>{L_WHO_IS_ONLINE}</b></a></span>


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

Код: Выделить всё

<!-- IF S_DISPLAY_ONLINE_LIST -->

   <table class="tablebg" width="100%" cellspacing="1">
   <tr>
      <td class="row1" colspan="2"><!-- IF U_VIEWONLINE --><h4><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h4><!-- ELSE --><h4>{L_WHO_IS_ONLINE}</h4><!-- ENDIF --></td>
   </tr>
   <tr>
   <!-- IF LEGEND -->
      <td class="row1" rowspan="2" align="center"><img src="{T_THEME_PATH}/images/network.png" alt="{L_WHO_IS_ONLINE}" /></td>
   <!-- ELSE -->
      <td class="row1" align="center"><img src="{T_THEME_PATH}/images/network.png" alt="{L_WHO_IS_ONLINE}" /></td>
   <!-- ENDIF -->
      <td class="row1" width="100%"><span class="genmed">{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /><br />{LOGGED_IN_USER_LIST}</span></td>
   </tr>
   <!-- IF LEGEND -->
      <!--<tr>
         <td class="row1"><b class="gensmall">{L_LEGEND} :: {LEGEND}</b></td>
      </tr>-->
   <!-- ENDIF -->
   </table>
<!-- ENDIF -->


то есть сам блок с этим выводом будет таким:

Код: Выделить всё

<div id="tab1" class="tab_content">
<!-- IF S_DISPLAY_ONLINE_LIST -->

   <table class="tablebg" width="100%" cellspacing="1">
   <tr>
      <td class="row1" colspan="2"><!-- IF U_VIEWONLINE --><h4><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h4><!-- ELSE --><h4>{L_WHO_IS_ONLINE}</h4><!-- ENDIF --></td>
   </tr>
   <tr>
   <!-- IF LEGEND -->
      <td class="row1" rowspan="2" align="center"><img src="{T_THEME_PATH}/images/network.png" alt="{L_WHO_IS_ONLINE}" /></td>
   <!-- ELSE -->
      <td class="row1" align="center"><img src="{T_THEME_PATH}/images/network.png" alt="{L_WHO_IS_ONLINE}" /></td>
   <!-- ENDIF -->
      <td class="row1" width="100%"><span class="genmed">{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /><br />{LOGGED_IN_USER_LIST}</span></td>
   </tr>
   <!-- IF LEGEND -->
      <!--<tr>
         <td class="row1"><b class="gensmall">{L_LEGEND} :: {LEGEND}</b></td>
      </tr>-->
   <!-- ENDIF -->
   </table>
<!-- ENDIF -->
</div>


как-то так...

добавлю:

условие для открытия можно прописывать как для всей ссылки, чтобы можно было показывать/не показывать её и информацию её блока. то есть (для дней рождения):

Код: Выделить всё

<!-- IF S_DISPLAY_BIRTHDAY_LIST --><span><a class="" href="#tab1"><b>{L_BIRTHDAYS}</b></a></span><!-- ENDIF -->


то есть вся ссылка обёрнута в условие. и при запрете показа дней рождения её просто никто не увидит...


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-08 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Я чего то вообще жестко туплю с этим скриптом. :?
Если я правильно понимаю, то первая ячейка для КТО СЕЙЧАС НА КОНФЕРЕНЦИИ для стиля просильвер будет выглядеть так:

Код: Выделить всё

<span><a class="" href="#tab1"><b><!-- IF U_WATCH_TOPIC --></b></a></span>


а блок вывода так:

Код: Выделить всё

<!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->


верно?

Добавлено спустя 3 минуты 2 секунды:
Хотелось бы еще обнаглеть и красивые кнопочки сделать. :) Странно, почему Вы их не сделали у себя, Андрей. ;) Смотрелось бы лучше чем просто ссылки, на мой взгляд. :idea:


Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


нет.

Код: Выделить всё

{L_WHO_IS_ONLINE} - кто сейчас на конференции


ссылка будет выглядеть так:

Код: Выделить всё

<span><a class="" href="#tab1"><b>{L_WHO_IS_ONLINE}</b></a></span>


эта строка

Код: Выделить всё

<!-- IF U_WATCH_TOPIC -->


- начало условия. и ещё оно без закрывающего тэга <!-- ENDIF -->.
сразу получится ошибка.

а в контейнер div надо прописать код

Код: Выделить всё

<!-- IF S_DISPLAY_ONLINE_LIST -->
   <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->


так как здесь есть условие - можно и ссылку "обернуть" в него. тогда ссылка будет выглядеть так:

Код: Выделить всё

<!-- IF S_DISPLAY_ONLINE_LIST --><span><a class="" href="#tab1"><b>{L_WHO_IS_ONLINE}</b></a></span><!-- ENDIF -->



Dmitry писал(а):

Странно, почему Вы их не сделали у себя, Андрей.


где не сделал? в этой теме? здесь предоставляется для обзора "голый" код перебора, каждый может оформить его вид как захочет.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-08 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Belk писал(а):

L_WHO_IS_ONLINE

У меня в файле overall_footer.html эта часть

Код: Выделить всё

L_WHO_IS_ONLINE
отсутствует :?

Код: Выделить всё

<!-- IF U_WATCH_TOPIC -->
эта часть кода что обозначает?
У меня и этого нет: IF U_VIEWONLINE и этого L_ONLINE_EXPLAIN :? и даже этого: <!-- IF LEGEND --> :bm:
Судя по всему на просильвере вывод отличается и название функций тоже
Belk писал(а):

где не сделал? в этой теме? здесь предоставляется для обзора "голый" код перебора, каждый может оформить его вид как захочет.

не, не. Я имею в виду на главной странице в вас вывод по вкладкам реализован в виде ссылок: | Кто сейчас на сайте || Статистика || Дни рождения || Кто сегодня был на сайте || Топ 5 Национальных флагов || Инфор по сайту |
А можно было бы сделать в виде кнопок. :idea:

Добавлено спустя 5 минут 37 секунд:
У меня вывод стандартный в просильвере такой:

Код: Выделить всё

<div id="page-footer">

   <div class="navbar">
      <div class="inner"><span class="corners-top"><span></span></span>

      <ul class="linklist">
         <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
            <!-- IF not S_IS_BOT -->
               <!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
               <!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
               <!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
               <!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
            <!-- ENDIF -->
         <li class="rightside"><!-- IF not S_IS_BOT --><a href="{U_MOBILE_ON}">{L_MOBILE_ON}</a> &bull; <!-- ENDIF --><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
      </ul>

      <span class="corners-bottom"><span></span></span></div>
   </div>


Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Dmitry писал(а):

У меня в файле overall_footer.html эта часть



:-D

вся эта лабуда находится и выводится в файле index_body.html

всё это у вас есть. я приводил примеры с чистого просилвера.

кстати, добавил в начало темы демо-версии скрипта с оформлением в виде анимированных кнопок.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-08 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


а, вон оно чего :-D Пошел разбираться. :)
За кнопочки отдельное спасибо :arigato: Класс! :idea:

Добавлено спустя 2 минуты 29 секунд:
Я правильно понимаю, что этот скрипт надо добавить в файл index_body.html, отредактировав его соответствующим образом

Добавлено спустя 4 минуты 36 секунд:
Ну вроде понятно, как то так:

Код: Выделить всё

<ul class="tabs">
<span><a class="button button-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span>
<span><a class="button button-blue" href="#tab2">вторая ссылка</a></span>
<span><a class="button button-blue" href="#tab3">третья ссылка</a></span>
<span><a class="button button-blue" style="float:right;" href="#tab4">четвёртая ссылка</a></span>
</ul>


<div id="tab1" class="tab_content">
<br /><!-- IF S_DISPLAY_ONLINE_LIST -->
 <!-- IF S_DISPLAY_ONLINE_LIST -->
   <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->
</div>


Добавлено спустя 2 минуты 2 секунды:
Пойду попробую. На всякий оставлю тут свой файл, ДО: :-D

Код: Выделить всё

<!-- INCLUDE overall_header.html -->
<!-- new info block on -->
<table width="100%">
  <tr>
    <td width="30%" align="left">
    <!-- IF U_MCP --><a href="{U_MCP}" title="{L_MCP}"><img src="{T_THEME_PATH}/images/001.png" alt="{L_MCP}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
    <!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_ACTIVE_TOPICS}" title="{L_SEARCH_ACTIVE_TOPICS}"><img src="{T_THEME_PATH}/images/002.png" alt="{L_SEARCH_ACTIVE_TOPICS}" style="margin:0 20px 0 0;" /></a>
   <!-- IF S_USER_LOGGED_IN or S_LOAD_UNREADS --><!-- IF S_LOAD_UNREADS --><a href="{U_SEARCH_UNREAD}" title="{L_SEARCH_UNREAD}"><img src="{T_THEME_PATH}/images/004.png" alt="{L_SEARCH_UNREAD}"  style="margin:0 20px 0 0;" /></a><!-- ENDIF --><!-- ENDIF -->
   <!-- ENDIF -->
    <!-- IF not S_IS_BOT and U_MARK_FORUMS --><a href="{U_MARK_FORUMS}" accesskey="m" title="{L_MARK_FORUMS_READ}"><img src="{T_THEME_PATH}/images/003.png" alt="{L_MARK_FORUMS_READ}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- ENDIF -->
    </td>
    <td width="30%" align="center" valign="middle"><p>{CURRENT_TIME}</p></td>
    <td width="30%">&nbsp;</td>
   </tr>
</table>
<!-- new info block off -->
<!-- IF RECENT_TOPICS_DISPLAY --><!-- INCLUDE recent_topics_body.html --><!-- ENDIF -->

<!-- INCLUDE gallery/imageblock_body.html -->
<!-- INCLUDE forumlist_body.html -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
   <form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
   <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
      <fieldset class="quick-login">
         <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
         <label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
         <!-- IF S_AUTOLOGIN_ENABLED -->
            | <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
         <!-- ENDIF -->
         <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
         {S_LOGIN_REDIRECT}
      </fieldset>
   </form>
<!-- ENDIF -->

<!-- IF S_DISPLAY_ONLINE_LIST -->
   <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
   <h3>{L_BIRTHDAYS}</h3>
   <p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF S_THANKS_LIST -->
   <h3>{L_TOP_THANKS_LIST}</h3>
   <p>{THANKS_LIST}</p>
<!-- ENDIF -->
<!-- IF NEWEST_USER -->
   <h3>{L_STATISTICS}</h3>
   <p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} <!-- IF TOTAL_IMAGES --> &bull; {TOTAL_IMAGES}<!-- ENDIF --> &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->

<!-- INCLUDE overall_footer.html -->


Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


можете кнопки тоже в условие обернуть. тогда они не будут выводиться, если эта функция будет выключена, то есть для вашей первой это будет

Код: Выделить всё

<!-- IF S_DISPLAY_ONLINE_LIST --><span><a class="button button-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span><!-- ENDIF -->


удачи.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-08 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Что то я намутил не то. Ошибка 500 и белый экран :-D
Сейчас попробую в блокноте сделать и покажу как это у меня выглядит

Добавлено спустя 5 минут 24 секунды:
Вот мой обновленный файл, который выдал ошибку 500 :o :?

Код: Выделить всё

<!-- INCLUDE overall_header.html -->
<!-- new info block on -->
<table width="100%">
  <tr>
    <td width="30%" align="left">
    <!-- IF U_MCP --><a href="{U_MCP}" title="{L_MCP}"><img src="{T_THEME_PATH}/images/001.png" alt="{L_MCP}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
    <!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_ACTIVE_TOPICS}" title="{L_SEARCH_ACTIVE_TOPICS}"><img src="{T_THEME_PATH}/images/002.png" alt="{L_SEARCH_ACTIVE_TOPICS}" style="margin:0 20px 0 0;" /></a>
   <!-- IF S_USER_LOGGED_IN or S_LOAD_UNREADS --><!-- IF S_LOAD_UNREADS --><a href="{U_SEARCH_UNREAD}" title="{L_SEARCH_UNREAD}"><img src="{T_THEME_PATH}/images/004.png" alt="{L_SEARCH_UNREAD}"  style="margin:0 20px 0 0;" /></a><!-- ENDIF --><!-- ENDIF -->
   <!-- ENDIF -->
    <!-- IF not S_IS_BOT and U_MARK_FORUMS --><a href="{U_MARK_FORUMS}" accesskey="m" title="{L_MARK_FORUMS_READ}"><img src="{T_THEME_PATH}/images/003.png" alt="{L_MARK_FORUMS_READ}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- ENDIF -->
    </td>
    <td width="30%" align="center" valign="middle"><p>{CURRENT_TIME}</p></td>
    <td width="30%">&nbsp;</td>
   </tr>
</table>
<!-- new info block off -->
<!-- IF RECENT_TOPICS_DISPLAY --><!-- INCLUDE recent_topics_body.html --><!-- ENDIF -->

<!-- INCLUDE gallery/imageblock_body.html -->
<!-- INCLUDE forumlist_body.html -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
   <form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
   <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
      <fieldset class="quick-login">
         <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
         <label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
         <!-- IF S_AUTOLOGIN_ENABLED -->
            | <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
         <!-- ENDIF -->
         <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
         {S_LOGIN_REDIRECT}
      </fieldset>
   </form>
<!-- ENDIF -->




<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function() {

   //Действие по умолчанию
   $(".tab_content").hide(); //Скрыть все содержимое
   $("ul.tabs span:first").addClass("active").show(); //Активировать первую вкладку
   $(".tab_content:first").show(); //Показать первые содержание вкладке
   
   //По щелчку события
   $("ul.tabs span").click(function() {
      $("ul.tabs span").removeClass("active"); //Удалите все "active" класс
      $(this).addClass("active"); //Добавить "active" класса выбранной вкладки
      $(".tab_content").hide(); //Скрыть вкладку Все содержание
      var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки + содержание
      $(activeTab).fadeIn(); //Fade в активного содержимого
      return false;
   });

});
</script>
</head>
<body>

<style>
.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button{float:left;margin:2px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;display:inline-block;text-align:center;_border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.button:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.button:active{position:relative;top:1px;}
a.button{color:#FFFFFF;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
</style>
<ul class="tabs">
<span><a class="button button-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span>
<span><a class="button button-blue" href="#tab2">{L_BIRTHDAYS}</a></span>
<span><a class="button button-blue" href="#tab3">{L_TOP_THANKS_LIST}</a></span>
<span><a class="button button-blue" style="float:right;" href="#tab4">{L_STATISTICS}</a></span>
</ul>


<div id="tab1" class="tab_content">
<br /> <!-- IF S_DISPLAY_ONLINE_LIST -->
   <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
 
<div id="tab2" class="tab_content">
<br /><!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
   <h3>{L_BIRTHDAYS}</h3>
   <p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
<div id="tab3" class="tab_content">
<br /><!-- IF S_THANKS_LIST -->
   <h3>{L_TOP_THANKS_LIST}</h3>
   <p>{THANKS_LIST}</p>
<!-- ENDIF -->
</div>
 
<div id="tab4" class="tab_content">
<br /><!-- IF NEWEST_USER -->
   <h3>{L_STATISTICS}</h3>
   <p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} <!-- IF TOTAL_IMAGES --> &bull; {TOTAL_IMAGES}<!-- ENDIF --> &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->
</div>



<!-- INCLUDE overall_footer.html -->


Добавлено спустя 13 минут 24 секунды:
Или, все же, надо в обертку делать: :?

Код: Выделить всё

<ul class="tabs">
<!-- IF S_DISPLAY_ONLINE_LIST --><span><a class="button button-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span><!-- ENDIF -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST --><span><a class="button button-blue" href="#tab2">{L_BIRTHDAYS}</a></span><!-- ENDIF -->

<!-- IF S_THANKS_LIST --><span><a class="button button-blue" href="#tab3">{L_TOP_THANKS_LIST}</a></span><!-- ENDIF -->

<!-- IF NEWEST_USER --><span><a class="button button-blue" style="float:right;" href="#tab4">{L_STATISTICS}</a></span>
</ul><!-- ENDIF -->


Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


само собой. недо ведь код встраивать, а не целую html-страницу. для примера создана отдельная страница. c <html>, <body>... вам же нужен только код.

то есть:

проверьте, есть ли у вас в шапке (overall_header.html) код аодключения библотеки

Код: Выделить всё

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


если нет - пропишите его там перед </head>

дальше. этот код (самой кнопки) у вас уже точно есть и прописывать его заново смыла нет (будут совпадения и ошибки чтения)

Код: Выделить всё

.button{float:left;margin:2px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;display:inline-block;text-align:center;_border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.button:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.button:active{position:relative;top:1px;}
a.button{color:#FFFFFF;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}


теперь выкинув из кода перебора всё лишнее, получим ваш файл:

Код: Выделить всё

<!-- INCLUDE overall_header.html -->
<!-- new info block on -->
<table width="100%">
  <tr>
    <td width="30%" align="left">
    <!-- IF U_MCP --><a href="{U_MCP}" title="{L_MCP}"><img src="{T_THEME_PATH}/images/001.png" alt="{L_MCP}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
    <!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_ACTIVE_TOPICS}" title="{L_SEARCH_ACTIVE_TOPICS}"><img src="{T_THEME_PATH}/images/002.png" alt="{L_SEARCH_ACTIVE_TOPICS}" style="margin:0 20px 0 0;" /></a>
   <!-- IF S_USER_LOGGED_IN or S_LOAD_UNREADS --><!-- IF S_LOAD_UNREADS --><a href="{U_SEARCH_UNREAD}" title="{L_SEARCH_UNREAD}"><img src="{T_THEME_PATH}/images/004.png" alt="{L_SEARCH_UNREAD}"  style="margin:0 20px 0 0;" /></a><!-- ENDIF --><!-- ENDIF -->
   <!-- ENDIF -->
    <!-- IF not S_IS_BOT and U_MARK_FORUMS --><a href="{U_MARK_FORUMS}" accesskey="m" title="{L_MARK_FORUMS_READ}"><img src="{T_THEME_PATH}/images/003.png" alt="{L_MARK_FORUMS_READ}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- ENDIF -->
    </td>
    <td width="30%" align="center" valign="middle"><p>{CURRENT_TIME}</p></td>
    <td width="30%">&nbsp;</td>
   </tr>
</table>
<!-- new info block off -->
<!-- IF RECENT_TOPICS_DISPLAY --><!-- INCLUDE recent_topics_body.html --><!-- ENDIF -->

<!-- INCLUDE gallery/imageblock_body.html -->
<!-- INCLUDE forumlist_body.html -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
   <form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
   <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
      <fieldset class="quick-login">
         <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
         <label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
         <!-- IF S_AUTOLOGIN_ENABLED -->
            | <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
         <!-- ENDIF -->
         <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
         {S_LOGIN_REDIRECT}
      </fieldset>
   </form>
<!-- ENDIF -->





<script type="text/JavaScript">
$(document).ready(function() {

   //Действие по умолчанию
   $(".tab_content").hide(); //Скрыть все содержимое
   $("ul.tabs span:first").addClass("active").show(); //Активировать первую вкладку
   $(".tab_content:first").show(); //Показать первые содержание вкладке
   
   //По щелчку события
   $("ul.tabs span").click(function() {
      $("ul.tabs span").removeClass("active"); //Удалите все "active" класс
      $(this).addClass("active"); //Добавить "active" класса выбранной вкладки
      $(".tab_content").hide(); //Скрыть вкладку Все содержание
      var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки + содержание
      $(activeTab).fadeIn(); //Fade в активного содержимого
      return false;
   });

});
</script>

<style>
.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
</style>
<ul class="tabs">
<span><a class="button button-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span>
<span><a class="button button-blue" href="#tab2">{L_BIRTHDAYS}</a></span>
<span><a class="button button-blue" href="#tab3">{L_TOP_THANKS_LIST}</a></span>
<span><a class="button button-blue" style="float:right;" href="#tab4">{L_STATISTICS}</a></span>
</ul>


<div id="tab1" class="tab_content">
<br /> <!-- IF S_DISPLAY_ONLINE_LIST -->
   <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
 
<div id="tab2" class="tab_content">
<br /><!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
   <h3>{L_BIRTHDAYS}</h3>
   <p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
<div id="tab3" class="tab_content">
<br /><!-- IF S_THANKS_LIST -->
   <h3>{L_TOP_THANKS_LIST}</h3>
   <p>{THANKS_LIST}</p>
<!-- ENDIF -->
</div>
 
<div id="tab4" class="tab_content">
<br /><!-- IF NEWEST_USER -->
   <h3>{L_STATISTICS}</h3>
   <p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} <!-- IF TOTAL_IMAGES --> &bull; {TOTAL_IMAGES}<!-- ENDIF --> &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->
</div>



<!-- INCLUDE overall_footer.html -->


как-то так...


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-08 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Вот жеж. :dash3: Это надо понимать, где скрипт подключать надо. :bm:
Пошел пробовать :) Спасибо! :arigato:

Добавлено спустя 13 минут 36 секунд:
Почти получилось! :idea:
Выглядит это так:

Изображение

Почему то кнопочки не отобразились :? Хотя они у меня действительно прописаны и меню из них верхнее, и кнопки в постах :?

Еще пробел бы убрать, он явно лишний.

А скруглить этот блок можно же тут, да?

Код: Выделить всё

<style>
.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
</style>


а именно добавить border-radius: 5px; сюда

Код: Выделить всё

.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1; border-radius: 5px;}
Верно? :)


Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


кнопки отобразились. просто синие на синем фоне.

добавьте в код ссылок белый цвет:

Код: Выделить всё

<ul class="tabs">
<span><a class="button button-blue" href="#tab1" style="color:white;">{L_WHO_IS_ONLINE}</a></span>
<span><a class="button button-blue" href="#tab2" style="color:white;">{L_BIRTHDAYS}</a></span>
<span><a class="button button-blue" href="#tab3" style="color:white;">{L_TOP_THANKS_LIST}</a></span>
<span><a class="button button-blue" style="float:right;color:white;" href="#tab4">{L_STATISTICS}</a></span>
</ul>


Добавлено спустя 5 минут 31 секунду:
а можете просто другой код прописать этих кнопок (обозвать по другому). тогда они не будут конфликтовать с предыдущими выводами...

ваш полный код:

Код: Выделить всё

<!-- INCLUDE overall_header.html -->
<!-- new info block on -->
<table width="100%">
  <tr>
    <td width="30%" align="left">
    <!-- IF U_MCP --><a href="{U_MCP}" title="{L_MCP}"><img src="{T_THEME_PATH}/images/001.png" alt="{L_MCP}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
    <!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_ACTIVE_TOPICS}" title="{L_SEARCH_ACTIVE_TOPICS}"><img src="{T_THEME_PATH}/images/002.png" alt="{L_SEARCH_ACTIVE_TOPICS}" style="margin:0 20px 0 0;" /></a>
   <!-- IF S_USER_LOGGED_IN or S_LOAD_UNREADS --><!-- IF S_LOAD_UNREADS --><a href="{U_SEARCH_UNREAD}" title="{L_SEARCH_UNREAD}"><img src="{T_THEME_PATH}/images/004.png" alt="{L_SEARCH_UNREAD}"  style="margin:0 20px 0 0;" /></a><!-- ENDIF --><!-- ENDIF -->
   <!-- ENDIF -->
    <!-- IF not S_IS_BOT and U_MARK_FORUMS --><a href="{U_MARK_FORUMS}" accesskey="m" title="{L_MARK_FORUMS_READ}"><img src="{T_THEME_PATH}/images/003.png" alt="{L_MARK_FORUMS_READ}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- ENDIF -->
    </td>
    <td width="30%" align="center" valign="middle"><p>{CURRENT_TIME}</p></td>
    <td width="30%">&nbsp;</td>
   </tr>
</table>
<!-- new info block off -->
<!-- IF RECENT_TOPICS_DISPLAY --><!-- INCLUDE recent_topics_body.html --><!-- ENDIF -->

<!-- INCLUDE gallery/imageblock_body.html -->
<!-- INCLUDE forumlist_body.html -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
   <form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
   <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
      <fieldset class="quick-login">
         <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
         <label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
         <!-- IF S_AUTOLOGIN_ENABLED -->
            | <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
         <!-- ENDIF -->
         <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
         {S_LOGIN_REDIRECT}
      </fieldset>
   </form>
<!-- ENDIF -->





<script type="text/JavaScript">
$(document).ready(function() {

   //Действие по умолчанию
   $(".tab_content").hide(); //Скрыть все содержимое
   $("ul.tabs span:first").addClass("active").show(); //Активировать первую вкладку
   $(".tab_content:first").show(); //Показать первые содержание вкладке
   
   //По щелчку события
   $("ul.tabs span").click(function() {
      $("ul.tabs span").removeClass("active"); //Удалите все "active" класс
      $(this).addClass("active"); //Добавить "active" класса выбранной вкладки
      $(".tab_content").hide(); //Скрыть вкладку Все содержание
      var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки + содержание
      $(activeTab).fadeIn(); //Fade в активного содержимого
      return false;
   });

});
</script>

<style>
.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond{float:left;margin:2px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;display:inline-block;text-align:center;_border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttond:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttond:active{position:relative;top:1px;}
a.buttond{color:#FFFFFF;}
.buttond-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.buttond-blue:active{background:#4477a1;}
</style>
<ul class="tabs">
<span><a class="buttond buttond-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span>
<span><a class="buttond buttond-blue" href="#tab2">{L_BIRTHDAYS}</a></span>
<span><a class="buttond buttond-blue" href="#tab3">{L_TOP_THANKS_LIST}</a></span>
<span><a class="buttond buttond-blue" style="float:right;" href="#tab4">{L_STATISTICS}</a></span>
</ul>


<div id="tab1" class="tab_content">
<br /> <!-- IF S_DISPLAY_ONLINE_LIST -->
   <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
 
<div id="tab2" class="tab_content">
<br /><!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
   <h3>{L_BIRTHDAYS}</h3>
   <p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
<div id="tab3" class="tab_content">
<br /><!-- IF S_THANKS_LIST -->
   <h3>{L_TOP_THANKS_LIST}</h3>
   <p>{THANKS_LIST}</p>
<!-- ENDIF -->
</div>
 
<div id="tab4" class="tab_content">
<br /><!-- IF NEWEST_USER -->
   <h3>{L_STATISTICS}</h3>
   <p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} <!-- IF TOTAL_IMAGES --> &bull; {TOTAL_IMAGES}<!-- ENDIF --> &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->
</div>

<!-- INCLUDE overall_footer.html -->


ушёл по делам.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-08 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Ага, по второму варианту получилось. :idea: Спасибо, Андрей! :arigato:
Только вот пробел убрать не могу :?
тэги <p> по убирал - не помогло :( Пробел явно лишний :cry:
Скругление добавил.
А что если эти кнопки прямо в блок засунуть, а? Тогда бы и накладок не было, и выглядело красиво :)

Изображение

Добавлено спустя 16 минут 35 секунд:
Скруглил только нижние края + удалил дни рождения. Они выводятся сверху, когда они есть. Получилось очень даже красиво.
Осталось только пробел/отступ грохнуть.
Андрей, подскажи плз, если знаешь :oops:

Изображение

Добавлено спустя 12 минут 56 секунд:
Хотел также спросить это фиксированный размер блока? А если будет больше пользователей во вкладке КТО СЕЙЧАС НА КОНФЕРЕНЦИИ. Он будет автоматом растягиваться? Такое впечатление, что все вкладки одинаковые по размеру блока и он определяется именно содержимым первой вкладки :?
P.S. Думаю еще перетащить кнопки из верхнего меню, в нижнее. Тут мне уже все понятно стало :idea: Классная доработка. :idea:


Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Dmitry писал(а):

Осталось только пробел/отступ грохнуть.


из строки

Код: Выделить всё

<div id="tab1" class="tab_content">
<br />


уберите <br />

убрать с каждой.

размер блока по длине - резиновый, по ширине - фиксированный. правится здесь:

Код: Выделить всё

.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}


Код: Выделить всё

height:150px - ширина.


можно попробовать написать min-height:150px;, тогда вроде долно быть фиксировано минимально 150, а при увеличении информации должен растягиваться. попробуйте.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-09 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Блин, сам не допер до br. :dash3: Сегодня вечером все сделаю :idea:
Надо еще немного фон подогнать и обрамление кнопок сделать белым цветом.
Как получится, отпишусь.
Реально очень качественная и нужная доработка. :idea:
Форум более приятным становится :)
Спасибо, Андрей :arigato:

Добавлено спустя 5 часов 32 минуты 36 секунд:
Убрал br, не помогло :cry:

Добавлено спустя 4 минуты 27 секунд:
Как то это связанно с h3 блока <div id="tab1" class="tab_content"> :?

Изображение


Не в сети
(Андрей)  
2019-07-09 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


попробуйте убрать внутренний отступ:

в строке

Код: Выделить всё

.tab_content{height:150px;padding:10px;


заменить padding:10px; на padding:0;

либо можно попытаться отрегулировать всё внутри отступами. тогда заменить

padding:10px; на padding:-10px 10px 0 10px;, где (по порядку)

-10px - отступ сверху внутри блока
10px - отступ справа
0 - отступ снизу
10px - отступ слева...


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-09 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


К сожалению отступ сохраняется, padding:-10px не работает :cry: :dash3:
Показывает варнинг при просмотре кода :?

Изображение

Выставил так: padding:0px 10px 0 10px;
Отступ уменьшился, но все равно остался

Добавлено спустя 9 минут 50 секунд:
И еще один очень важный вопрос.
Сейчас внимательно посмотрев внедренные кнопочки на форуме.
Они оказались у меня все разными :o
В посте стиль такой:

Код: Выделить всё

<style>
#dop_fix {float:right;margin:10px;}
ul.dop,ul.dop li{list-style:none;margin:0;padding:0;}
ul.dop li{float:left;display:block;height:26px;}
ul.dop li a {color:#ffffff;font-weight:normal;text-decoration:none;}
.buttonn{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttonn:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttonn:active{top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
.button-green{background:#428739;background:-webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739));background:-moz-linear-gradient(-90deg, #c8dd95, #428739);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');}
.button-green:hover{background:#c8dd95;background:-webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95));background:-moz-linear-gradient(-90deg, #428739, #c8dd95);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');}
.button-green:active{background:#428739;}
.button-red{background:#D82741;background:-webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741));background:-moz-linear-gradient(-90deg, #E84B6E, #D82741);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');}
.button-red:hover{background:#E84B6E;background:-webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E));background:-moz-linear-gradient(-90deg, #D82741, #E84B6E);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');}
.button-red:active{background:#D82741;}
</style>


в index_body.html такой

Код: Выделить всё

<style>
.tab_content{min-height:100px;padding:0px 10px 0 10px;margin-right:-4px;;background-color:#dae5ef;border:5px solid #4477a1;border-radius: 0px 0px 5px 5px;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond{float:left;margin:2px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;display:inline-block;text-align:center;_border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttond:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttond:active{position:relative;top:1px;}
a.buttond{color:#FFFFFF;}
.buttond-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.buttond-blue:active{background:#4477a1;}
</style>


Кнопки в верхнем меню другие. Стиль еще пока не нашел :bm:
Можно же их сделать все одинаковыми, да?
Просто я попробовал, получилось как то криво :?

Добавлено спустя 16 секунд:
Постараюсь более подробно расписать

Добавлено спустя 10 минут 49 секунд:
Хотелось бы чтобы этот стиль заработал, в нижнем меню:

Код: Выделить всё

.buttonn{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttonn:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttonn:active{top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}

Кнопки обвелись, но интерактивными не стали (((

Добавлено спустя 2 минуты 16 секунд:
Вот так сделал:

Код: Выделить всё

<style>
.tab_content{min-height:100px;padding:0px 10px 0 10px;margin-right:-4px;;background-color:#dae5ef;border:5px solid #4477a1;border-radius: 0px 0px 5px 5px;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttonn{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttonn:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttonn:active{top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
</style>
<ul class="tabs">
<span><a class="buttonn button-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span>
<span><a class="buttonn button-blue" href="#tab2">{L_TOP_THANKS_LIST}</a></span>
<span><a class="buttonn button-blue" href="#tab3">{L_STATISTICS}</a></span>
</ul>

Получил так:

Изображение

Опять туплю :dash3: :oops: :?
Причем кнопки стали в виде ссылок с подчеркиванием :o :(


Не в сети
(Андрей)  
2019-07-09 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


можете так попробовать: (заменить стиль внизу):

Код: Выделить всё

<style>
.tab_content{min-height:100px;padding:0px 10px 0 10px;margin-right:-4px;;background-color:#dae5ef;border:5px solid #4477a1;border-radius: 0px 0px 5px 5px;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond{float:left;margin:2px;padding:2px 4px 2px 4px;display:inline-block;text-align:center;border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttond:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttond:active{position:relative;top:1px;}
a.buttond{color:#FFFFFF;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;}
.buttond-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.buttond-blue:active{background:#4477a1;}
</style>


насчёт отступа. сейчас посмотрел код просилвера - это ваш стандартный вариант с таким отступом. вот ваш стилевой файл h3:

Код: Выделить всё

h3 {
   /* Sub-headers (also used as post headers, but defined later) */
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   border-bottom: 1px solid #CCCCCC;
   margin-bottom: 3px;
   padding-bottom: 2px;
   font-size: 1.05em;
   color: #989898;
   margin-top: 20px;
}


видите? по умолчанию сдвиг сверху 20px

править код в стиле - не выход, так как "поломается" всё на самом сайте.
можно попробовать отредактировать локально:

в каждом коде вывода, где у вас идёт открытие <h3>, можно попробовать заменить его на

Код: Выделить всё

<h3 style="margin-top: -20px;">


то есть "нивелировать" отступ только здесь. может поможет. попробуйте.

Добавлено спустя 2 минуты 24 секунды:
сейчас обратил внимание на косячок - сразу не заметил. в верхнем стилевом файле меню прописаны рабочими два "бордера". замените код на этот:

Код: Выделить всё

<style>
#dop_fix {float:right;margin:10px;}
ul.dop,ul.dop li{list-style:none;margin:0;padding:0;}
ul.dop li{float:left;display:block;height:26px;}
ul.dop li a {color:#ffffff;font-weight:normal;text-decoration:none;}
.buttonn{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttonn:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttonn:active{top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
.button-green{background:#428739;background:-webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739));background:-moz-linear-gradient(-90deg, #c8dd95, #428739);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');}
.button-green:hover{background:#c8dd95;background:-webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95));background:-moz-linear-gradient(-90deg, #428739, #c8dd95);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');}
.button-green:active{background:#428739;}
.button-red{background:#D82741;background:-webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741));background:-moz-linear-gradient(-90deg, #E84B6E, #D82741);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');}
.button-red:hover{background:#E84B6E;background:-webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E));background:-moz-linear-gradient(-90deg, #D82741, #E84B6E);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');}
.button-red:active{background:#D82741;}
</style>


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-09 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Belk писал(а):

можете так попробовать: (заменить стиль внизу):

Внизу заменил на предложенный вариант, кнопки вовсе исчезли, остались лишь ссылки :?

Изображение

Belk писал(а):

сейчас обратил внимание на косячок - сразу не заметил. в верхнем стилевом файле меню прописаны рабочими два "бордера". замените код на этот:

Не пойму где искать этот стиль. У меня в overall_header.html его нет :?
styles/prosilver/theme/my.css
тут тоже нет. Блин какой же я тупой :oops: :girl_cray2: Нифига не получается :cry:

Добавлено спустя 13 минут 49 секунд:
Belk писал(а):

то есть "нивелировать" отступ только здесь. может поможет. попробуйте.

Да, способ рабочий! :) :arigato:


Не в сети
(Андрей)  
2019-07-09 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


по первому коду (перебор внизу):

судя по коду на вашей странице - вы неправильно прописали ссылки. наверное скопировали когда "экспериментировали"... :-D

смотрите:

Код: Выделить всё

<ul class="tabs">
<span><a class="buttonn button-blue" href="#tab1">Кто сейчас на конференции</a></span>
<span><a class="buttonn button-blue" href="#tab2">Топлист благодарностей</a></span>
<span><a class="buttonn button-blue" href="#tab3">Статистика</a></span>
</ul>


а должно быть

Код: Выделить всё

<span><a class="buttond buttond-blue"


неправильно класс прописан. исправьте - всё должно работать.

стилевой код меню находится в файле menu.css (вроде этот у вас) в папке theme.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-09 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Стоп. Кажись понял по нижней части

Добавлено спустя 4 минуты 11 секунд:
Точно, до самого доперло :-D :oops: Работает :idea: :arigato:
Только кнопочки как бы не по центру этой синей полоски...
Но тут вроде очевидно buttond{float:left;margin:2px;padding:2px 4px 2px 4px;
paddingом поиграюсь :-D

Добавлено спустя 3 минуты 20 секунд:
А на счет меню, у меня этот файл называется my.css

Код: Выделить всё

#menu, #menu ul { 
  margin: 0;
  padding: 0;
  list-style: none;

#menu {
  width: 100%;
  margin-top: 4px;
  padding: 1px 0;
  background: #4477a1;
  background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
  background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

#menu:before, #menu:after {
  content: "";
  display: table;

#menu:after {
  clear: both;

#menu {
  zoom:1;

#menu li {
  float: left;
  border-right: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  position: relative;
  background: #4477a1;
  background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
  background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

#menu li:hover {
  background: #81a8cb;
  background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
  background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb'); 

#menu li :active{
  background: #4477a1;
}
#menu a {
  float: left;
  padding: 2px 5px;
  color: #fff;
  font: normal 12px Arial, Helvetica;
  text-decoration: none;

#menu li:hover > a {
  color: #dcdcdc;

*html #menu li a:hover { /* Только для IE6 */
  color: #dcdcdc;

#menu ul {
  margin: 20px 0 0 0;
  _margin: 0; /*Только для IE6*/
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 28px;
  left: 0;
  z-index: 9999;
  background: #12A3EB;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

 
.poloska, .poloska ul { 
  margin: 0;
  padding: 0;
  list-style: none;

.poloska {
  width: 100%;
  margin-top: 4px;
  padding: 1px 0;

.poloska:before, .poloska:after {
  content: "";
  display: table;

.poloska:after {
  clear: both;

.poloska {
  zoom:1;

.poloska li {
  float: left;
  border-right: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  position: relative;
  background: #4477a1;
  background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
  background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

.poloska li:hover {
  background: #81a8cb;
  background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
  background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb'); 

.poloska li :active{
  background: #4477a1;
}
.poloska a {
  float: left;
  padding: 2px 5px;
  color: #fff;
  font: normal 12px Arial, Helvetica;
  text-decoration: none;

.poloska li:hover > a {
  color: #dcdcdc;

*html .poloska li a:hover { /* Только для IE6 */
  color: #dcdcdc;

.poloska ul {
  margin: 20px 0 0 0;
  _margin: 0; /*Только для IE6*/
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 28px;
  left: 0;
  z-index: 9999;
  background: #12A3EB;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;


это именно тот файл, т.к. он прописан тут
styles/prosilver/theme/stylesheet.css

Но в нем нет этого стиля. Вообще не понятно как у меня все работает :dash3:


Не в сети
(Андрей)  
2019-07-09 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Код: Выделить всё

padding:2px 4px 2px 4px;


это отступы ВНУТРИ самой кнопки.

скорее надо здесь паддингом поиграться...

Код: Выделить всё

.tabs{width:100%;list-style:none;margin:0;padding:0 2px;


Добавлено спустя 12 минут 46 секунд:
Dmitry писал(а):

Но в нем нет этого стиля. Вообще не понятно как у меня все работает


судя по коду - это код вывода кнопочек в теме (viewtopic_body),
а вот меню у вас в этом коде есть. ведь его код вот этот:

Код: Выделить всё

<ul id="menu"> 
  <li class="rightside"><a href="./index.php?mobile_style=on" title="Мобильный вид" accesskey="p" class="print" style="background-image: url(./styles/prosilver/theme/images/icon_mobile.gif)">Мобильный вид</a></li>
  <li><a href="./faq_main.html">FAQ</a></li>   
  <li><a href="./gallery/index.php" title="Галерея изображений">Галереи</a></li>
  <li><a href="./search.php">Поиск</a></li>
  <li><a href="./rules/" title="Правила Форума">Правила</a></li> 
  <li style="float:right;"><a href="./ucp.php?mode=login">Вход</a></li>
  <li style="float:right;"><a href="./ucp.php?mode=register">Регистрация</a></li>
 
 
</ul>


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-10 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Да, все верно, Андрей! Заменил и верхнее меню. :arigato: :idea:
Спасибо, все работает!!! Ура! :idea:

Добавлено спустя 17 минут 40 секунд:
А просильвер то преображается, Андрей! Уже довольно приятно смотреть становится :-D

Добавлено спустя 21 час 14 минут 26 секунд:
Теперь хочу поставить актуальный информер прогноза погоды в одну из вкладок. Как получится отпишусь тут


Не в сети
(Андрей)  
2019-07-10 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Dmitry писал(а):

актуальный информер прогноза погоды


а такой в природе вообще существует? :-D


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-10 
Аватара пользователя

Стаж: 7 лет 3 месяца 5 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Belk писал(а):

а такой в природе вообще существует?

Это с тобой на 100% согласен! :-D Но люди все равно смотрят и потом нервно кусают пальцы в ожидании дождей на море :o Хотя, по моему опыту, дождь идет в горах и редко доходит до моря. Яндекс врет на 90% :-D
Тем не менее Информер очень хорошо вписался с структуру форума :)
Делается все просто.

Открываем информер от Яндекса:
https://yandex.ru/pogoda/11463/informer
Вписываем в одну из ссылок название:

Код: Выделить всё

<span><a class="buttond buttond-blue" href="#tab4">Погода в Крыму</a></span>

Ну и выводим блоки разделяя их пробелами, например:
+ еще выровнил по центру, прописав style="text-align: center;"

Код: Выделить всё

<div id="tab4" class="tab_content" style="text-align: center;">
<br>
<a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://yandex.ru/pogoda/11472" target="_blank"><img src="https://info.weather.yandex.net/11472/1_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>
&nbsp;
<a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://yandex.ru/pogoda/11470" target="_blank"><img src="https://info.weather.yandex.net/11470/1_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>
&nbsp;
<a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://yandex.ru/pogoda/11471" target="_blank"><img src="https://info.weather.yandex.net/11471/1_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>
&nbsp;
<a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://yandex.ru/pogoda/959" target="_blank"><img src="https://info.weather.yandex.net/959/1_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>
&nbsp;
<a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://yandex.ru/pogoda/11463" target="_blank"><img src="https://info.weather.yandex.net/11463/1_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>
</div>


Добавлено спустя 8 минут 30 секунд:
Вывел погоду на главную по умолчанию. Не все находят её :-D
Получилось красиво. :)


Не в сети
(Андрей)  
2019-07-10 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


да, нормальненько получилось - сейчас глянул. :)


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ Сообщений: 27 ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 19 апр 2024, 23:03

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид