Альтернатива Categories in tabs
Добавлено: 06 май 2017, 10:22
Для предустановленного стиля просильвер. Несколько не устроил меня дизайн и и функционал вкладок. Но идея мне понравилась. Сделал свой вариант, в нём появилась вкладка "Все" (показывает страницу в привычном виде) и все вкладки, где есть непрочитанные сообщения, подсвечиваются красным цветом. Вот так это выглядит в натуре:
Код достаточно простой.
В overall_header_content_before вставляем -
Это стили наших ТАБов, внешний вид можно подобрать самостоятельно. linear-gradient(to top, #EDEDEB, #A1A29C) задаёт плавный переход цвета ТАБа.
В этот же файл запишем пару новых функций:
Тут вроде всё просто... продолжаем - создадим "меню" со списком категорий. Добавим следующий код:
Код создания вкладки следующий:
<input type="radio" value="option1" name="prog_lang" id="option1" onclick="showforum('page1')"/>
<label for="option1" id="caption1"> Название категории 1</label>
Value, id, for для следующей вкладки должны быть option2, для третьей - option3 и т.д. Id для label должно быть caption1, caption2, caption3 и т.д. onclick для следующих вкладок имеет такой вид: onclick="showforum('page2')", onclick="showforum('page3')", onclick="showforum('page4')" и т.д.
Вот на этом редактирование файла overall_header_content_before можно закончить. Сохраняем внесённые изменения.
Открываем файл overall_footer_after. Тут нужно сделать маленькое пояснение. В просильвере категории не имеют своего ID, что затрудняет управление этими объектами. Я обошел этот недостаток и нарисовал простой код, присваивающий ID категориям. Выглядит это так:
Вот в принципе и все манипуляции. Возможно потребуется навести марафет для двух строк "последние посещение" и "отметить все форумы как прочтённые". У меня в таблице стилей такой код:
Он выравнивает колонку с форумами. Для вашего стиля он может быть другим.
Если у Вас установлено расширение Lightbox, то потребуется корректировка кода. Это расширение меняет название классов.
Код достаточно простой.
В overall_header_content_before вставляем -
Код: Выделить всё
<style>
input[type='radio'] {
opacity: 0;
filter: alpha(opacity=0);
width: 0;
height: 20px;
z-index: 99999;
position: relative;
cursor: pointer;
}
input[type='radio'] + label {
position: relative;
left: -21px;
width: 5%;
font-size: 12px;
color: #141414;
text-shadow: 1px 1px 3px #adadad;
font-weight: 500;
font-size: 1.1em;
font-family: 'Tahoma', Arial, sans-serif;
cursor: pointer;
height: 20px;
padding: 2px 2px 10px 2px;
border-radius: 5px 5px 0px 0px;
border-width: 0px;
border-color: #141414;
}
input[type='radio']:checked + label {
background: linear-gradient(to top, #EDEDEB, #A1A29C);
border-width: 2px 2px 0px 2px;
}
</style>
В этот же файл запишем пару новых функций:
Код: Выделить всё
<script language="JavaScript" type="text/javascript">
function showforum(id) // Сделает выбранную категорию видимой
{
$('.forabg').each(function () { // перебираем все категории
if (this.id==id) {this.style.display='block';}
else {
if (id=='all') {this.style.display='block';}
else {this.style.display='none';}
};
});
}
function isnew(obj) // узнаем есть ли непрочитанные сообщения
{
var elems = obj.getElementsByTagName('dt');
var ret = false
for(var i=0; i<elems.length; i++) {
var location = elems[i].title;
if (location.indexOf("прочитанные")>1){
ret = true ;
}
}
return ret
}
</script>
Код: Выделить всё
<!-- IF SCRIPT_NAME eq 'index' -->
<div id="line-end-color" style="width: 100%; display: block; height: 24px; top: 0px; position: relative; background: #A1A29C; ">
<div class="option-group">
<input type="radio" value="option0" name="prog_lang" id="option0" checked onclick="showforum('all')"/> // Вкладка "Все"
<label for="option0" id="caption0"> Все</label>
<input type="radio" value="option1" name="prog_lang" id="option1" onclick="showforum('page1')"/> // Вкладка с названием категории
<label for="option1" id="caption1"> Первые шаги</label> // И так далее...
</div>
</div>
<!-- ENDIF -->
<input type="radio" value="option1" name="prog_lang" id="option1" onclick="showforum('page1')"/>
<label for="option1" id="caption1"> Название категории 1</label>
Value, id, for для следующей вкладки должны быть option2, для третьей - option3 и т.д. Id для label должно быть caption1, caption2, caption3 и т.д. onclick для следующих вкладок имеет такой вид: onclick="showforum('page2')", onclick="showforum('page3')", onclick="showforum('page4')" и т.д.
Вот на этом редактирование файла overall_header_content_before можно закончить. Сохраняем внесённые изменения.
Открываем файл overall_footer_after. Тут нужно сделать маленькое пояснение. В просильвере категории не имеют своего ID, что затрудняет управление этими объектами. Я обошел этот недостаток и нарисовал простой код, присваивающий ID категориям. Выглядит это так:
Код: Выделить всё
<script language="JavaScript" type="text/javascript">
$(function () { // Когда страница загрузится
var n=0 ;
var isnews = false ;
var location = window.location.href;
if (location.indexOf("index")>1) { // если мы находимся на странице форумов
$('.forabg').each(function () { // получаем все категории и даем им иди.
n++;
this.id='page'+n ;
isnews = isnew(this);
objs = document.getElementById('caption'+n);
if (isnews) {objs.style.color='red'; objs.title='Непрочитанные сообщения';};
});
option0.checked='checked'; // активирует вкладку "Все"
</script>
Вот в принципе и все манипуляции. Возможно потребуется навести марафет для двух строк "последние посещение" и "отметить все форумы как прочтённые". У меня в таблице стилей такой код:
Код: Выделить всё
/*forums*/
p.responsive-center.time, p.right.responsive-center.time.rightside {
color: #29532e;
text-shadow: 1px 1px 3px #adadad;
font-weight: 500;
font-size: 1.0em;
font-family: 'Tahoma', Arial, sans-serif;
line-height: 1.3;
margin-right: 10%;
margin-left: 10%;
background: #EDEDEB;
height: 40px;
line-height: 4;
margin-bottom: 0;
padding-left: 5px;
padding-right: 5px;
}
.action-bar.compact {
margin-right: 10%;
background: #EDEDEB;
width: 80%;
margin: auto;
border-bottom: 1px solid #b3a7a7;
}
Если у Вас установлено расширение Lightbox, то потребуется корректировка кода. Это расширение меняет название классов.