1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

1.3.x Страница полезных ссылок

Тема в разделе "Модификации шаблонов", создана пользователем Skaiman, 12.07.2014.

Загрузка
  1. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    Попытался сделать страницу полезных ссылок. Идею позаимствовал у center-dm.ru, адаптировал под xenforo. Немного неграмотно получилось, не хватило знаний в JavaScript. Конкретнее, в имеющемся link_favicons.js, указан адрес на картинку замены отсутствующего фавикона, но ее нет, попробовал заменить адрес на свой, не получилось. Выход нашел, используя другой скрипт, подмены отсутствующего изображения.

    Создаем новый узел, страницу:
    Основная информация
    Часть URL    : references
    Заголовок: Полезные ссылки
    Настройки страницы
    HTML-код шаблона    :
    HTML:
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список полезный сайтов</title>
<style type="text/css">
a{text-decoration:none;outline:0;font-size: 12px;}
a:link,a:visited{color:#2270a7}
a:hover{color:#0e8221}
li {list-style-position:inside;}
.t_cell strong {
    background: none repeat scroll 0 0 #F6FAFA;
    margin: 0 10px;
    padding: 0 3px;
    position: absolute;
    top: 2px;
}

.t_cell {
    margin: 0 0 15px;
}
.t_cell {
    border-bottom: 1px solid #B6C0CD;
    color: #666666;
    height: 10px;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
}
.left {
    float: left;
}
.cell_pages_os {font:115%/1.5 Verdana,Arial,Helvetica,sans-serif;width: 60%;margin:10px auto;}
.ct_link_ul {list-style:none;}
.fon_1 {background:#fff}
.fon_2 {background:#f4f8f9}
.right {float:right}
.left img {height: 16px; width: 16px;}
.right img {height: 16px; width: 16px;}
.t_cell strong{top:-2px;padding:0 3px;margin:0 10px;position:absolute;background:#fff;font-size: 14px;}
.t_cell span{top:2px;right:0;padding:0 3px;margin:0 10px;position:absolute;background:#fff}
</style>
</head>
<body>

<!-- Основа -->
<div class="cell_pages_os">
<div class="left t_cell"><strong>Ссылки на каждый день и просто нужные</div></strong>
<ul class="ct_link_ul left">

  <li><a href="http://adstat.rambler.ru/wrds/" title="" target="_blank">Статистика ключевых слов - Rambler</a></li>
  <li><a href="http://wordstat.yandex.ru/" title="" target="_blank">Статистика ключевых слов - Яндекс</a></li>
  <li><a href="http://www.google.ru/trends/" title="" target="_blank">Статистика ключевых слов - Google</a></li><br>

  <li><a href="http://www.translate.ru/" title="" target="_blank">Переводчик ПРОМТ</a></li>
  <li><a href="http://translate.google.ru/" title="" target="_blank">Переводчик Google</a></li>
  <li><a href="http://translate.yandex.ru/" title="" target="_blank">Переводчик Яндекс</a></li>
  <li><a href="http://translit.ru/" title="" target="_blank">Транслит текста</a></li> <br>

  <li><a href="http://api.yandex.ru/speller/" title="" target="_blank">Сервис проверки правописания</a></li>
  <li><a href="http://www.gramota.ru/slovari" title="" target="_blank">Орфографический словарь онлайн</a></li>
  <li><a href="http://mainspy.ru/kolichestvo_simvolov" title="" target="_blank">Узнать количество символов в статье</a></li><br>

  <li><a href="http://imgs.su/" title="" target="_blank">Imgs.Su - Обработка и хранение изображений</a></li>
  <li><a href="http://vfl.ru/" title="" target="_blank">VFL.RU - хостинг изображений</a></li>
  <li><a href="http://www.roundpic.com/index.php" title="" target="_blank">Cервис закругления углов для изображений</a></li>
  <li><a href="http://www.punypng.com/" title="" target="_blank">Сервис для сжатия изображений</a></li>
  <li><a href="http://croply.com/" title="" target="_blank">Сервис обрезки изображений</a></li><br>

  <li><a href="http://icomoon.io/app/" title="" target="_blank">Генератор шрифта с иконками - IcoMoon</a></li>
  <li><a href="http://www.xiconeditor.com/" title="" target="_blank">Редактор иконок - X-icon</a></li>
  <li><a href="http://sandbox.juan-i.com/longshadows/" title="" target="_blank">Генератор длинных теней текста</a></li><br>

  <li><a href="http://dumpz.org/" title="" target="_blank">Хранение текста или кода</a></li>
  <li><a href="http://shorttext.com/" title="" target="_blank">Хостинг текста и кода</a></li>
  <li><a href="http://notepad.cc/" title="" target="_blank">Простой notepad</a></li><br>

   <li><a href="http://convertfonts.com/" title="" target="_blank">Генератор font-face, конвертор шрифтов</a></li>
   <li><a href="http://www.font-face-generator.com/" title="" target="_blank">Генератор font-face</a></li>
   <li><a href="http://www.fontsquirrel.com/tools/webfont-generator" title="" target="_blank">Шрифтовая белка</a></li>
</ul>

<ul class="ct_link_ul right">
  <li><a href="http://css3generator.com/" title="" target="_blank">CSS3 Generator</a></li>
  <li><a href="http://subtlepatterns.com/" title="" target="_blank">Subtle Patterns</a></li><br>

  <li><a href="http://jigsaw.w3.org/css-validator/" title="" target="_blank">Проверка CSS от W3C</a></li>
  <li><a href="http://validator.w3.org/" title="" target="_blank">Проверка Validation Service</a></li><br>

  <li><a href="http://gtmetrix.com/" title="" target="_blank">Проверка скорости загрузки сайта</a></li>
  <li><a href="http://jsfiddle.net/" title="" target="_blank">Проверка кода - jsFiddle</a></li><br>

  <li><a href="http://www.favicon.ru/  " title="" target="_blank">Создание Favicon</a></li>
  <li><a href="http://realfavicongenerator.net/" title="" target="_blank">Favicon генератор для всех платформ</a></li>
  <br>
  
  <li><a href="http://p3chat.com/ " title="" target="_blank">Сервис онлайн поддержки</a></li>
  <li><a href="http://www.rumbletalk.com/" title="" target="_blank">Онлайн чат для сайта</a></li><br>

  <li><a href="http://openfontlibrary.org/ru" title="" target="_blank">Открытая библиотека шрифтов</a></li>
  <li><a href="http://ru.fonts2u.com/" title="" target="_blank">Шрифты на все случаи</a></li>
  <li><a href="http://fontawesome.veliovgroup.com/" title="" target="_blank">Шрифтовые иконки</a></li>
  <li><a href="http://icomoon.io" title="" target="_blank">Ресурс иконок</a></li>
  <li><a href="http://fontello.com/" title="" target="_blank">Генератор иконочных шрифтов</a></li>
  <li><a href="http://pt.cooltext.com/" title="" target="_blank">Генератор картинки логотипа</a></li><br>

  <li><a href="http://www.typetester.org/" title="" target="_blank">Генератор CSS текста</a></li>
  <li><a href="http://www.texster.ru/" title="" target="_blank">Генератор CSS текста на русском</a></li><br>

  <li><a href="http://simpoll.ru/" title="" target="_blank">Конструктор опросов и форм обратной связи</a></li><br>

  <li><a href="http://uptolike.ru/" title="" target="_blank">Сервис социальной активности</a></li>
  <li><a href="http://sapegin.github.io/social-likes/ru/" title="" target="_blank">Красивые кнопки «лайков»</a></li>
  <li><a href="http://copypastecharacter.com/" title="" target="_blank">CopyPaste html символы</a></li>
</ul>
</div>
<!-- /Основа --> 

<script type="text/javascript" src="js/link_favicons.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.ct_answer_ul li:odd').addClass('fon_2');
  $('.ct_answer_ul li:even').addClass('fon_1');
  $('.ct_link_ul li:odd').addClass('fon_2');
  $('.ct_link_ul li:even').addClass('fon_1');
  $('#pmdform table tr:odd').addClass('fon_2');
  $('#pmdform  table tr:even').addClass('fon_1');  
});
$(document).ready(function() {
    $('img').error(function() {
        $(this).attr({
        src: 'styles/img/no_favicon.png',
        style:'width:16px;height:16px;'
        });
    });
});
</script>

</body>

</html>
    Файл link_favicons.js в папку js, картинку, no_favicon.png, закинул в созданную папку img в директории styles.
    Вот что получилось:
    screen capture.png
     

    Вложения:

    • link.zip
      Размер файла:
      2,8 КБ
      Просмотров:
      24
    Последнее редактирование: 12.07.2014
    Skaiman, 12.07.2014
    #1
    ogol.anton, Alex777, Dmitriy Jurkin и 4 другим нравится это.
  2. vovik1646

    vovik1646 Местный

    Регистрация:
    15.12.12
    Сообщения:
    88
    Симпатии:
    12
    Версия XF:
    1.2.4
    Я реально думаю найти применение под свой форум:whistling: Спс автору. а реально ли его переделать? Ну под определенные требования? Если конечно сам не смогу:)
     
    vovik1646, 01.08.2014
    #2
  3. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    А что там нереального, все состоит из простого списка, где надо разделить тег <br>
     
    Skaiman, 01.08.2014
    #3
  4. vovik1646

    vovik1646 Местный

    Регистрация:
    15.12.12
    Сообщения:
    88
    Симпатии:
    12
    Версия XF:
    1.2.4
    Точно, просто вчера уже млзг взрывался. Не заметил что стандартный HTML. Прошу прощения:thumbsup:
     
    vovik1646, 01.08.2014
    #4
  5. nomid17

    nomid17 Read only

    Регистрация:
    19.05.14
    Сообщения:
    26
    Симпатии:
    0
    Версия XF:
    1.3.1
    Подскажи как сделать в 3 столбика и надпись (Ссылки на каждый день и просто нужные) по центру
     
    nomid17, 06.08.2014
    #5
  6. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    Там нет разделения текста на колонки с помощью column, просто два блока левый правый. Что бы сделать надо все переделывать.
     
    Skaiman, 08.08.2014
    #6
  7. nomid17

    nomid17 Read only

    Регистрация:
    19.05.14
    Сообщения:
    26
    Симпатии:
    0
    Версия XF:
    1.3.1
    Значит пока не судьба)
    А реально думал страницы как-то использовать
     
    nomid17, 11.08.2014
    #7
  8. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    а в таком виде не реально?
     
    Skaiman, 11.08.2014
    #8
  9. nomid17

    nomid17 Read only

    Регистрация:
    19.05.14
    Сообщения:
    26
    Симпатии:
    0
    Версия XF:
    1.3.1
    Чего не реально?! Разобрался со структурой, но как всегда что-то не хватает)
    Я имел ввиду прежним постом, что еще бы посмотреть варианты оформления страниц, чтобы слепить в кучу что нужно мне)))
     
    nomid17, 11.08.2014
    #9
  10. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    Все в твоих руках. На странице есть css, необходимые скрипты для отображения фавиконок. Это всего лишь пример, которым можно воспользоваться и сделать страницу, удовлетворяющую свои потребности :)
     
    Skaiman, 12.08.2014
    #10

Поделиться этой страницей