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

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

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

Загрузка
  1. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия 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 июл 2014
    ogol.anton, Alex777, Dmitriy Jurkin и 4 другим нравится это.
  2. vovik1646

    vovik1646 Пользователь

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

    Skaiman Местный

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

    vovik1646 Пользователь

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

    nomid17 Read only

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

    Skaiman Местный

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

    nomid17 Read only

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

    Skaiman Местный

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

    nomid17 Read only

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

    Skaiman Местный

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

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