Контакты для связи с администрацией ресурса www.saloed.net, skype: sa-lo-ed или Email:sal0ed@yandex.ru

 
Сделай свой сайт лучше с порталом saloed.net » InstantCms » Увеличение/уменьшение шрифта в статьях и блогах для InstantCMS

Увеличение/уменьшение шрифта в статьях и блогах для InstantCMS

Увеличение/уменьшение шрифта в статьях и блогах для InstantCMS

 


На примере стандартного шаблона.
1. Для новостей,статей.
Открываем файл \templates\_default_\components\com_content_read.tpl
Находим строчку

{* =============== Текст статьи =============================== *}
<div class="con_text" style="overflow:hidden">

перед ней вставляем блок со ссылками для изменения шрифта (картинки предварительно надо закинуть в папку /images)
<div style="text-align:right;">
<a href="javascript:()" onclick="changeFont(0.8)"><img src="/images/zoom_out.png"></a>
<a href="javascript:()" onclick="changeFont(1.2)"><img src="/images/zoom_in.png"></a>
</div>

Далее в конце файла вставляем скрипт
{literal}
<script>
function changeFont(inc) {
     var size =  parseFloat($(".con_text").css('font-size'), 10);
    $(".con_text").css('fontSize',size*inc+'px');
    }
</script>
{/literal}

Все готово, тестируем результат...
Для других шаблонов все аналогично, только надо править файл в папке с вашим шаблоном и блок с текстом может иметь другой класс, тоесть вместо $(".con_text") вам необходимо написать класс нужного блока.
Можно сделать немного по другому, и вместо увеличения и уменьшения размера шрифта встроить например 3 фиксированных размера, и вывести картинки "маленький", "средний", "большой". Тогда скрипт меняем так:
{literal}
<script>
function changeFont(inc) {
     $(".con_text").css('fontSize',inc+'px');
    }
</script>
{/literal}

а в блоке со ссылками назначаем нужные размеры:
<div style="text-align:right;">
<a href="javascript:()" onclick="changeFont(12)"><img src="/images/ваша картинка"></a>
<a href="javascript:()" onclick="changeFont(14)"><img src="/images/ваша картинка"></a>
<a href="javascript:()" onclick="changeFont(18)"><img src="/images/ваша картинка"></a>
</div>

2. Блоги. Для блогов все аналогично, на примере стандартного шаблона: открываем файл \templates\_default_\components\com_blog_view_post.tpl находим строчку
<div class="blog_post_body">{$post.content_html}</div>

перед ней вставляем тот же блок что и для новостей, в конце файла вставляем тот же скрипт, не забыв изменить класс блока на ".blog_post_body" (в стандартном шаблоне):
{literal}
<script>
function changeFont(inc) {
     var size =  parseFloat($(".blog_post_body").css('font-size'), 10);
    $(".blog_post_body").css('fontSize',size*inc+'px');
    }
</script>
{/literal}


Автор: deltas

Связь с автором

Автор: Student67 от 2-05-2013, 11:50
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Комментарии: Оставить комментарий
  • Группа: Гости 3 мая 2013 16:14
^
Штука хорошая, полезная, но лучше бы в виде плагина.
  • Группа: Гости 3 мая 2013 23:04
^
Чет не фурычит у меня... 1.10.1, делал все как написано...

Все заработало... Убрал форматирование текста по размеру. Спасибо!

Если изначально указываешь размер текста данный скрипт не работает . Можно ли как то это обойти?
  • Группа: Гости 4 мая 2013 10:20
^
klev2004,
Абсолютно с вами согласен
  • Группа: Посетители 5 мая 2013 01:13
^
А МОЖНО ДЕЛАТЬ, ЧТО БЫ ЗАПОМИНАЛ ВЫБРАННЫЙ РАЗМЕР ШРИФТА?
  • Группа: Гости 5 мая 2013 01:30
^
Полезно конечно
Назад Вперед
Наверх
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Дополнения для InstantCMS
 
Copyright © 2009-2015

Дополнения для InstantCMS | Рипы сайтов | Социальные сети