Подсветка кнопок в Subsilver2

[Garret_Dark]

Собственно вопрос, как можно сделать, чтобы в стиле сабсильвер при наведении мышкой на кнопку она подсвечивалась как в просильвере? Или показывалась вторая версия кнопки с уже нарисованной "подсветкой".
Тоже самое как на главной странице, в просильвере, подсвечивается раздел при наведении на него мышкой.
Как такое реализовать на сабсильвере?
Заранее спасибо!

[Rayden]

hover

[Stipendiat]

Garret_Dark
Нужно сначала нарисовать сами кнопки (как это реализовано в просильвере), а потом изменить стиль, опять же по аналогии с просильвером.

[Garret_Dark]

Stipendiat
Кнопки нарисовать для меня самая меньшая проблема в этом вопросе.

Rayden
Да, hover именно то что нужно, спасибо. Пока только получилось сделать подсветку форумов, но на сабсильвере столбцы подсвечиваются по отдельности к томуже начинает подсвечиваться все, включая посты, но можно пережить и без подсветки форумов.
А где вставить hover чтобы фон кнопок менялся при наведении? В stylesheet.css как с форумами? А как там кнопки называются?
Заранее спасибо!

[Nekstati]

В Prosilver для каждой кнопки свой класс в css, так что если делать кнопки по этому образцу, придётся долго копаться. Но можно и проще.

Код: Выделить всё

<img src="button1.gif" onMouseOver="this.src='button2.gif'" onMouseOut="this.src='button1.gif'" />

Чтобы "вторые" картинки подгружались сразу при открытии страницы:

Код: Выделить всё

<div style="position: absolute; display:none">
  <img src="button2.gif">
</div>

Тут есть одна неприятность - Opera не хочет подгружать элементы со стилем "display:none" и лезет в инет при наведении курсора на такую кнопку. Однократно, конечно - потом уже берёт из кэша. IE и Firefox подгружают сразу.

[fastdeath]

<img src="button1.gif" onMouseOver="this.src='button2.gif'" onMouseOut="this.src='button1.gif'" />

А какой файл в subsilver 2 отвечает за кнопки?

[Nekstati]

За кнопки отвечает несколько файлов, но по моему способу достаточно изменить файл styles/subsilver2/template/viewtopic_body.html (а также styles/subsilver2/template/viewforum_body.html для кнопки «Новая тема»).

Вот конкретные примеры.

Кнопка «Цитата».

найти в viewtopic_body.html

Код: Выделить всё

<a href="{postrow.U_QUOTE}">{QUOTE_IMG}</a>

заменить на

Код: Выделить всё

<a href="{postrow.U_QUOTE}"><img src="{T_IMAGESET_PATH}/quote0.gif" onMouseOver="this.src='{T_IMAGESET_PATH}/quote1.gif'" onMouseOut="this.src='{T_IMAGESET_PATH}/quote0.gif'" title="{L_REPLY_WITH_QUOTE}" alt="{L_REPLY_WITH_QUOTE}" /></a>

С кнопками «Ответить» и «Новая тема» всё сложнее, т.к. они должны менять свой вид, когда тема или форум закрыты.

найти в viewtopic_body.html

Код: Выделить всё

<a href="{U_POST_REPLY_TOPIC}">{REPLY_IMG}</a>

заменить на

Код: Выделить всё

<!-- IF S_IS_LOCKED -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{T_IMAGESET_PATH}/locked0.gif" onMouseOver="this.src='{T_IMAGESET_PATH}/locked1.gif'" onMouseOut="this.src='{T_IMAGESET_PATH}/locked0.gif'" title="{L_TOPIC_LOCKED}" alt="{L_TOPIC_LOCKED}" /></a>
<!-- ELSE -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{T_IMAGESET_PATH}/reply0.gif" onMouseOver="this.src='{T_IMAGESET_PATH}/reply1.gif'" onMouseOut="this.src='{T_IMAGESET_PATH}/reply0.gif'" title="{L_REPLY_TO_TOPIC}" alt="{L_REPLY_TO_TOPIC}" /></a>
<!-- ENDIF -->

Все гифы положить в папку styles/subsilver2/imageset/.
quote1.gif, reply1.gif, locked1.gif — подсвеченные кнопки, а quote0.gif, reply0.gif, locked0.gif — неподсвеченные.

А это разместить вверху шаблона, после <!-- INCLUDE overall_header.html -->:

Код: Выделить всё

<div style="position: absolute; display:none">
	<img src="quote1.gif"><img src="reply1.gif"><img src="locked1.gif">
</div>

[Garret_Dark]

В общем озадачился я доработкой своего, уже изрядно доработанного, sabsilver'a Захотелось подсвечивающихся кнопок, как в prosilver'e, почесал затылок, посмотрел CSS prosilver'a, снова почесал затылок и понял, что переносить тамошнее решение мне просто в лом, да и времени нет. Потому решил сделать с помощью событий onmouseover/out.
Собственно все просто, открываем includes/session.php
Находим

Код: Выделить всё

				return '<img src="' . $img_data['src'] . '"' . (($use_width) ? ' width="' . $use_width . '"' : '') . (($img_data['height']) ? ' height="' . $img_data['height'] . '"' : '') . ' alt="' . $alt . '" title="' . $alt . '" />';

И заменяем на:

Код: Выделить всё

				return '<img src="' . $img_data['src'] . '"' . ' class="opa2" onMouseOver=this.className="opa1" onmouseout=this.className="opa2"' . (($use_width) ? ' width="' . $use_width . '"' : '') . (($img_data['height']) ? ' height="' . $img_data['height'] . '"' : '') . ' alt="' . $alt . '" title="' . $alt . '" />';

Далее дело за малым, открываем style/subsilver2('ообразный стиль)/theme/stylesheet.css
И в самый конец файла, на новой строке добавляем:

Код: Выделить всё

.opa1 {  
opacity: 0.7;
    filter: alpha(Opacity=70);
}

.opa2 {  
opacity: 1;
    filter: alpha(Opacity=100);
}

Сохраняем, если нужно обновляем кэш и радуемся подсвеченными кнопками при паре правок. Но есть и ложка дегтя, как я уже писал я хочу придушить разработчиков движка за слишком часто встречающийся html в php, что значительно усложняет работу над стилизацией форума... Вернемся к нашим баранам, в итоге подсвечиваться будут практически все изображения на форуме, а не только кнопки (Не уверен над всеми, но точно: логотип, иконки форумов и конечно кнопки), не совсем этого я хотел получить, но в итоге мне показалось, что это даже неплохо, форум стал както более динамичен, все элементы графики реагируют на наведение мышки... Конечно на вкус и цвет.

Эпилог:
Конечно, как появится побольше свободного времени, я сделаю немного по другому, потом отпишусь здесь. Но в кратце опишу, задумка такова, делаются кнопки как в просильвере (Тоесть два варианта, подсвеченный и нет, на одном изображении, одна над другой), создается 2 класса, в одном bg-position top а в другом bottom, собственно принцип prosilver'a...

Удачи

[Garret_Dark]

Тут есть одна неприятность - Opera не хочет подгружать элементы со стилем "display:none" и лезет в инет при наведении курсора на такую кнопку. Однократно, конечно - потом уже берёт из кэша. IE и Firefox подгружают сразу.

А почему не использовать margin вместо display
Вот так, к примеру:

Код: Выделить всё

<div style="position: absolute; margin-left: -5000px;">
  <img src="image.gif">
</div>

По идее тогда любой браузер ее подгрузит сразу