Это в файл header.html (или похожий файл) в самое начало:
<span class="site_tpl_styles" style="display: none;"></span>
<script type="text/javascript">
$(document).ready(function(){
var cecutient_params = {
block: '.site_tpl_styles',
styles: [
[
' ', // обычный стиль, по умолчанию
],
[
'{{template.path}}/css/style2.css', // 2-й стиль
],
[
'{{template.path}}/css/style31.css', // 3-й стиль 1
'{{template.path}}/css/style32.css', // 3-й стиль 2
],
[
'{{template.path}}/css/style4.css', // 4-й стиль
]
]
};
setCecutient(cecutient_params, 'load');
var ver = getVerCecutient();
if(ver == cecutient_params.styles.length - 1){
if(!$('.cecutientver_btn.plus').hasClass('disabled')){
$('.cecutientver_btn.plus')
.addClass('disabled')
.attr('disabled', 'disabled');
}
}
if(ver == 1){
if(!$('.cecutientver_btn.minus').hasClass('disabled')){
$('.cecutientver_btn.minus')
.addClass('disabled')
.attr('disabled', 'disabled');
}
}
$(document).on('click', '.cecutientver_btn.plus', function(){
var ver = getVerCecutient();
setCecutient(cecutient_params, 'plus'); // сама переключалка
//console.log(getVerCecutient()); // сама переключалка
if(ver == cecutient_params.styles.length - 1){
if(!$(this).hasClass('disabled')){
$(this)
.addClass('disabled')
.attr('disabled', 'disabled');
}
}
$('.cecutientver_btn.minus')
.removeClass('disabled')
.removeAttr('disabled');
});
$(document).on('click', '.cecutientver_btn.minus', function(){
var ver = getVerCecutient();
setCecutient(cecutient_params, 'minus' ); // сама переключалка
if(ver == 1){
if(!$(this).hasClass('disabled')){
$(this)
.addClass('disabled')
.attr('disabled', 'disabled');
}
}
$('.cecutientver_btn.plus')
.removeClass('disabled')
.removeAttr('disabled');
});
});
</script>
При переключении режима просмотра будут подгружаться соответствующие стили. Соответственно создаем css файлы, выделенные в начале скрипта с названием style2.css, style3.css, style4.css. В главном css файле, где содержатся общие стили необходимо объединить все похожие стили, где установлен font-size и line-height, например:
.date,
.news_view1 a,
div.abslider-title p,
.blog .news_view1 .description,
.news_p,
.other,
.news_p *,
.allnews a {
font-size: 16px;
}
Копируем эти стили в style2.css увеличиваем размер на несколько пикселей. Аналогично делаем для style3.css и т.д. (в общем суть в том, чтобы увеличить размер текста, не испортив при этом стили). В месте, где необходимо вывести кнопки ставим следующий код. У кнопок увеличивающий и уменьшающий шрифт обязательно должен быть прописан общий класс cecutientver_btn, и классы plus и minus соответственно.
<ul class="buttons">
<!--кнопка увеличения текста -->
<li>
<button class="cecutientver_btn plus">+</button>
</li>
<!--кнопка уменьшения текста -->
<li>
<button class="cecutientver_btn minus">-</button>
</li>
</ul>