Полезная информация


----

Начать новую тему Ответить на тему
АвторСообщение

 Сообщение Topic Text in Mouse Over phpbb3 2012-07-08

Аватар пользователя

Всем привет, продолжая традицию анонсов различных красивостей и полезностей для phpbb3, представляю вам мод графической направленности - Topic Text in Mouse Over. Чем же хорош этот мод? А тем что добавляет на форум красивое всплывающее окно со следущим содержанием:
  • Наведение курсора мыши на иконку последнего сообщения - всплывашка с текстом последнего сообщения темы
  • Наведение курсора мыши на имя темы - всплывашка с частью текста из первого сообщения темы
Вот для примера скриншот, а так же живой пример работы данного мода - наш Форум

Данная модификация интегрируется со следущими модами



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

Сам по себе мод легок в установке, не забываем после правок файлов запускать скрипт-инсталлятор, путем перехода в браузере по ссылке
http://адрес форума/topichover_db_update.php
 

Теперь нам надо руссифицировать мод, для этого скачиваем архив с руссификацией и единственную папку language помещаем в корень форума
Вложение :
Комментарий к файлу: Руссификация модификации Topic Text in Mouse Over
languagegege.rar [1.27 KiB]
Скачиваний: 155

Все, теперь мод установлен, осталось его активировать - Админка - Функции форума

-------- Маленькая графическая доработка -------------

Сразу же скажу что это весьма легкая доработка CSS части мода Topic Text Hover. Она вам позволит настроить по вкусу всплывашку и закруглить ее углы.
Открываем файл styles/ваш стиль/theme/tooltip.css и заменяем весь код на приведенный ниже

css code

#tooltip{
border: 3px #6b8dba solid;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 5px;
display: none;
background : url('./images/1.gif');
color: #000000;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
position: absolute;
left: 0;
z-index: 1000;
filter: alpha(opacity=95);
opacity: .95;
}

Небольшие пояснения по коду

css code

#tooltip{
border: 3px #6b8dba solid; // стиль рамки, по порядку - толщина рамки в пикселях, HTML цвет рамки
-moz-border-radius: 10px; // степень закругленности углов, задается для старых браузеров Mozilla Firefox
-webkit-border-radius: 10px; // степень закругленности углов, задается для старых браузеров Chrome и Safari
border-radius: 10px; // степень закругленности углов, задается для всех прочих браузеров
padding: 5px; // внутренние отступы от рамки до текста подсказки
display: none;
background : url('./images/1.gif'); // фоновое изображение для подсказки, поместить в styles/ваш стиль/theme/images/
color: #000000; // цвет текста в подсказке
font: 10px Verdana, Arial, Helvetica, sans-serif; // используемые шрифты в подсказке
text-align: left; // расположение текста относительно края
position: absolute;
left: 0;
z-index: 1000;
filter: alpha(opacity=95); // степень прозрачности позсказки, значение 100 отключает полностью прозрачность
opacity: .95; // степень прозрачности позсказки, значение 1 отключает полностью прозрачность
}

Впринципе и все, это элементарные познания в CSS, комунибудь может понадобится :co_ol:


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!

Теги темы
Topic Text in Mouse Over phpbb3, всплывающее окошко phpbb3, текст темы во всплывающем окне
          Вернуться наверх  
 


Аватар пользователя

белк писал(а):

открыть overall_header.html

найти

Код: Выделить все
<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />
 


вставить после найденного

Код: Выделить все
<style>
#tooltip{
   padding: 3px;
   border: solid 1px #000000;
   display: none; /*white-space: nowrap;*/
   background: #FFF;
   color: #000000;
   font: 10px Verdana, Arial, Helvetica, sans-serif;
   text-align: left;
   position: absolute;
   left: 0;
   z-index: 1000;
   filter: alpha(opacity=85);
   opacity: .85;
}
</style>
 


то есть прописать css-код вручную.

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

А как прописать, чтоб этот фрагмент кода брался из общего стилевого файла, а не с вышеупомянутого?


          Вернуться наверх  
 


Аватар пользователя

Цитата:
А как прописать, чтоб этот фрагмент кода брался из общего стилевого файла, а не с вышеупомянутого?


прописать

#tooltip{
   padding: 3px;
   border: solid 1px #000000;
   display: none; /*white-space: nowrap;*/
   background: #FFF;
   color: #000000;
   font: 10px Verdana, Arial, Helvetica, sans-serif;
   text-align: left;
   position: absolute;
   left: 0;
   z-index: 1000;
   filter: alpha(opacity=85);
   opacity: .85;
}
 


в вашем основном файле css (где-нибудь в конце)

а в шапке тогда не прописывать. или вообще его не прописывать, если у вас он уже есть (такой код)...


_________________
Подпись:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
          Вернуться наверх  
 


Аватар пользователя

белк писал(а):

прописать

Я уже прописал этот код в конце стилевого файла. Но ссылка-то в шаблоне указывает не на него. Вот в чём вопрос.


          Вернуться наверх  
 


Аватар пользователя

wwnet писал(а):

Но ссылка-то в шаблоне указывает не на него. Вот в чём вопрос.


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

дошло. извините.

после установки у вас по этому адресу

styles/ваш стиль/theme/tooltip.css
 


находится файл css, в котором и есть оформление, верно?

если вы хотите перенести эту информацию в основной файл css - перенесите, как написано выше, но тогда вам будет необходимо удалить этот файл (tooltip.css) и его "прописку" из файла overall_header.html

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


_________________
Подпись:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
          Вернуться наверх  
 


Аватар пользователя

белк писал(а):

находится файл css, в котором и есть оформление, верно?

Да, вы поняли правильно. Сейчас попробую.
***
Попробовал. Слетел стиль форума.
Вы что-то путаете. Согласно инструкции мода, в шаблоне хедера только одна правка. Вот эта: <script type="text/javascript" src="{T_TEMPLATE_PATH}/tooltip.js"></script>


          Вернуться наверх  
 


Аватар пользователя

да, сейчас посмотрел - здесь немного по другому:

ваше подключение сss прописывается в файле styles/subsilver2 (prosilver)/theme/stylesheet.css

@import url("tooltip.css");
 


для стилей на основе subsilver2 надо удалить эту запись и сам файл tooltip.css, а его содержимое прописать в конце файла stylesheet.css.

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

//соответственно ничего в шапке удалять не надо (хотя странно, что при отключении скрипта слетел стиль - такого быть не должно)...


_________________
Подпись:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
          Вернуться наверх  
 


Аватар пользователя

белк писал(а):

для стилей на основе subsilver2 надо удалить эту запись и сам файл tooltip.css, а его содержимое прописать в конце файла stylesheet.css.

...и получить 3 красных варнинга в консоли браузера. 404 файл тултип пишет. Пути прописаны в рнр-файлах мода, не разберусь.
белк писал(а):

//соответственно ничего в шапке удалять не надо (хотя странно, что при отключении скрипта слетел стиль - такого быть не должно)...

ничего удивительного, та строка подключает стили.


          Вернуться наверх  
 


Аватар пользователя


// Coded by Travis Beckham, modified by RMcGirr83
tooltip = {
   name : "tooltip",
   offsetX : -25,
   offsetY : 25,
   tip : null
};

tooltip.move = function (evt) {
   var x=0, y=0;
   if (document.all) {// IE

      x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
      y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
      x += window.event.clientX;
      y += window.event.clientY;

   } else {// Mozilla
      x = evt.pageX;
      y = evt.pageY;
   }
   this.tip.style.left = (x + this.offsetX) + "px";
   this.tip.style.top = (y + this.offsetY) + "px";
};
tooltip.show = function (text) {
   if (!this.tip) return;
   text = text.replace(/\n/g, "<br />");
   this.tip.innerHTML = text;
   this.tip.style.visibility = "visible";
   this.tip.style.display = "block";
   if (this.tip.offsetWidth > 400)
   this.tip.style.width = "400px";
};
tooltip.hide = function () {
   if (!this.tip) return;
   this.tip.style.visibility = "hidden";
   this.tip.style.display = "none";
   this.tip.innerHTML = "";
   this.tip.style.width = null;
};

tooltip.init = function () {

var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if(!tipContainerID){ var tipContainerID = "tooltip";}
var tipContainer = document.getElementById(tipContainerID);

if(!tipContainer){
  tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
  tipContainer.setAttribute("id", tipContainerID);
  tipContainer.style.display = "none";
  document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}

   if (!document.getElementById) return;

   this.tip = document.getElementById (this.name);
   if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};

   var a, sTitle;
   var anchors = document.getElementsByTagName ("a");

   for (var i = 0; i < anchors.length; i ++) {
      a = anchors[i];
      sTitle = a.getAttribute("title");
      if(sTitle) {
         a.setAttribute("tooltip", sTitle);
         a.removeAttribute("title");
         a.removeAttribute("alt");
         a.onmouseover = function() {tooltip.show(this.getAttribute('tooltip'))};
         a.onmouseout = function() {tooltip.hide()};
      }
   }

};

// this is used instead in a non-prosilver based template
window.onload = function () {
   tooltip.init ();
}
//onload_functions.push('tooltip.init();'); // prosilver based template only
 


в скрипте просто указано с чем именно он работает и месторазмещение "всплывашки"

//очень сильно сомневаюсь, что простое оформление всплывашки, то есть стиль css имеет прописку в php файлах....

Цитата:
404 файл тултип пише


а кэши чистили после удаления?


_________________
Подпись:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
          Вернуться наверх  
 


Аватар пользователя

белк писал(а):

//очень сильно сомневаюсь, что простое оформление всплывашки, то есть стиль css имеет прописку в php файлах....

ROOT_PATH это именно оно в рнр-файлах. Описываются пути подключения файлов. Я не достаточно хорошо знаю рнр, чтоб окончательно разобраться. Не в хэдере он подключается, это 100%.


          Вернуться наверх  
 


Аватар пользователя

немного не так.

ROOT_PATH - это просто переменная, формируемая не php, а самим форумом phpbb 3.x.x для удобства пользования и представляет из себя просто путь http://ваш сайт....

как и T_TEMPLATE_PATH - это тоже переменная форума и показывает путь http://ваш сайт/styles/ваш стиль/template...

оформление всплывашки - это файл tooltip.css, а "чтение оформления" системой происходит не по файлу, а по тегу id tooltip (#tooltip), поэтому когда вы переносите код id tooltip в основной файл система всё равно должна его читать.

//кстати, а без переноса сам мод работает нормально?


_________________
Подпись:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
          Вернуться наверх  
 


Аватар пользователя

белк писал(а):

поэтому когда вы переносите код id tooltip в основной файл система всё равно должна его читать.

Она и читает. Но варнинги в браузере мне не нравятся.
белк писал(а):

//кстати, а без переноса сам мод работает нормально?

Он вообще нормально работает. Гугловский пейдж-спид ругается на скорость загрузки, на то что этот файл подгружается отдельно.


          Вернуться наверх  
 


Аватар пользователя

wwnet писал(а):

Гугловский пейдж-спид ругается на скорость загрузки, на то что этот файл подгружается отдельно.


может ему просто грустно?

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

//до сего дня я не слышал, чтобы этот мод "тормозил" страницы.... например в prosilver'e все стилевые файлы css выполнены отдельно и прописаны в stylesheet.css. их там вагон и маленькая тележка. и никаких проблем с погрузкой и чтением не возникает...


_________________
Подпись:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
          Вернуться наверх  
 


Аватар пользователя

белк писал(а):

может ему просто грустно?

Нет. Это мне грустно. Читать в поисковой выдаче Гугла над сниппетом-"Ваша страница не оптимизированна для смартфонов". И оптимизация заключается не только в мобильном виде, а и во времени загрузки страницы. И страницы таких сайтов находятся далеко не не на первой странице в выдаче-а это уже "попадалово" в плане посещаемости.
белк писал(а):

//до сего дня я не слышал, чтобы этот мод "тормозил" страницы.... например в prosilver'e все стилевые файлы css выполнены отдельно и прописаны в stylesheet.css. их там вагон и маленькая тележка. и никаких проблем с погрузкой и чтением не возникает...

Вот именно, "выполнены отдельно и прописаны в stylesheet.css.". Все прописаны, кроме этого злочастного тултипа. Он загружается отдельно, и в стилевом файле только ссылка на него.
Посмотрите и Вы на свои результаты. Это не в упрёк, и не в насмешку, просто Вы, видимо, ранее не интересовались этой проблеммой. У Вас тоже на этот тултип ругается. Понажимайте раскрывающиеся блоки с надписью "Как исправить?"
Пожалуйста Зарегистрируйтесь чтобы увидеть ссылку


          Вернуться наверх  
 


Аватар пользователя

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

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

чтобы полностью соответствовать "мобильному" варианту от гуглы - придётся удалить более 90% рабочих скриптов сайта и процентов 50 - оформления, оптимизировав для загрузки все страницы (то есть уменьшив на них количество информации). я на такое вряд ли пойду.

посмотрим, что, может ещё админ добавит - но я думаю, что для данной ситуации с гуглой решения нет. проще убрать сам мод.


_________________
Подпись:
три головы - это хорошо. но как же трудно придти к согласию...
* белк может помочь, но ставить за кого-то моды не будет... ни платно, ни бесплатно. *
          Вернуться наверх  
 


Аватар пользователя

А что тут добавлять то? Если каждый раз прогибаться под поисковики можно и с ума сойти. Как я понял вас смущает надпись что ваш форум не оптимизирован под мобильники? Ставьте мод мобильной версии, ставьте мобильный стиль под этот мод и будет счастье ибо этот стиль максимально облегчен и адаптивен


_________________
Подпись:
-_- -_-
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


Дополнительные возможности

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя Topic permissions phpbb3
Topic permissions - это модификация для phpbb3, которая дает право авторам тем запрещать их просмотр гостям, ботам и поисковым системам

DeaDRoMeO

0

147

Аватар пользователя

19 фев 2017, 10:41

DeaDRoMeO

Аватар пользователя NV advanced last topic titles phpbb3
NV advanced last topic titles - модификация для phpbb3, добавляющая напротив каждого подфорума имя темы, в которой было оставлено последнее сообщение

DeaDRoMeO

133

8501

Аватар пользователя

20 авг 2017, 06:53

DeaDRoMeO

Аватар пользователя AOS Who Visited a Topic phpbb3 (кто смотрел тему???)
AOS Who Visited a Topic - модификация для phpbb3, добавляющая на страницу просмотра тем список пользователей, побывавших в конкретной теме и количество их просмотров темы.

DeaDRoMeO

23

4029

Аватар пользователя

15 окт 2013, 16:45

DeaDRoMeO

Аватар пользователя AOS Topic Statistics phpbb3 (подписчики и просмотры темы)
AOS Topic Statistics - модификация для phpbb3, добавляющая на страницу просмотра тем информацию о количестве подписчиков и просмотров конкретной темы.

DeaDRoMeO

84

6128

Аватар пользователя

19 июл 2017, 13:19

DeaDRoMeO

Аватар пользователя Topic SEO description and keywords

DeaDRoMeO

366

24770

Аватар пользователя

11 фев 2017, 22:33

mela

Оставить свой комментарий

Поделиться темой с помощью

Ссылки на тему

Прямая ссылка:
BB-код для форумов, сайтов, блогов:
HTML ссылка:
 


cron

Самая неформальная поддержка phpBB :P