Изменение кнопок поделиться темой. IPB 3.1.4

Подписчики

Опубликовано: 28 июня 201114 г

Приветствую всех.

Возник такой вопрос, когда верстал стиль. А как же изменить кнопочки поделиться темой?

Я согласен, что на светлой теме они выглядят нормально.

Но когда у меня весь дизайн в тёных тонах....

В общей массе это пятно выглядит отвратительно. Вот и пришла мне мысль - не банально убрать эти кнопки, а просто переделать.

А ещё точнее - сделать изменение картинки при наведении. То есть так они были бы серенькие, наводим - цветные. Мне показалось очень хорошей идеей.

Вот реализация на CSS:

Смена одного рисунка на другой осуществляется сдвигом изображения по вертикали за счет использования универсального свойства background или background-position, как показано в примере:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Эффект перекатывания</title>
 <style type="text/css">
  A.rollover {
   background: url(images/mark.png); /* Путь к файлу с исходным  рисунком */
   display: block; /* Рисунок как блочный элемент */
   width: 151px; /* Ширина рисунка в пикселах */
   height: 40px; /* Высота рисунка */
  }
  A.rollover:hover {
   background-position: 0 -40px; /* Смещение фона */
  }
 </style>
</head>
 <body>
 <p><a href="1.html" class="rollover"></a></p>
</body>
</html>

Этот метод мне кажется хорош. Он работает без JS и при том не требует перегружать картинку.

В принципе можно и на JS, я просто приведу пример, может кто искал...

В head:

<script language="javascript">
<!--
function ChangeImg() {
if(document.images) {
eval("document."+ChangeImg.arguments[0]+
".src=('"+ChangeImg.arguments[1]+"')");
}
}
function preload() {
if (document.images) {
var imgsrc = preload.arguments;
arr=new Array(imgsrc.length);
for (var j=0; j<imgsrc.length; j++) {
arr[j] = new Image;
arr[j].src = imgsrc[j];
}
}
}
//--></script>

В Body:

<body onload="preload('путь_ко_второй_картинке'>
<a href="#"
onMouseOver="ChangeImg('ImgName1','путь_ко_второй_картинке')"
onMouseOut="ChangeImg('ImgName1','путь_к первой_картинке')">
<img name="ImgName1" src="путь_к первой_картинке"></a>

Но возникла одна большая проблема.

В шаблоне topicViewTemplate:

<if test="canShare:|:!$forum['disable_sharelinks'] AND $this->settings['sl_enable']">
<h3 class='topic_share left'>{$this->lang->words['topic_share']}</h3>
{IPSLib::shareLinks( $topic['title'] )}
<br />
</if>

А каким образом мне подправить то, что находиться в {IPSLib::shareLinks( $topic['title'] )}?

На http://community.invisionpower.com/ нашёл только:

static IPSLib.shareLinks ($ title = '', $params = array()) [static]

Display a strip of share links
public

Parameters:
string Document title (can be left blank and it will attempt to self-discover)
array Addition params: url, cssClass, group [string template group], bit [string template bit], skip [array of share_keys to skip]
Returns:
string HAITHTEEEMEL

Опубликовано: 28 июня 201114 г

АЦ > Внешний вид > Ваш шаблон > Шаблоны > Глобальные > shareLinks

{parse js_module="sharelinks"}
<if test="gotLinks:|:is_array( $links )">
<ul class='{$cssClass} shareButtons'>
<foreach loop="cacheLoop:$links as $id => $data">
	<if test="isEnabled:|:$data['share_enabled']">
		<li><a href="{parse url="sharelink={$data['share_key']};{$data['_url']};{$title}" base="public"}" rel="nofollow" target="_blank" title="<if test="!in_array( $data['share_key'], array( 'print', 'download' ) )">{$this->lang->words['gbl_sharelink_with']} </if>{$data['share_title']}" class='_slink' id='slink_{$data['share_key']}'><img src="{$this->settings['public_dir']}style_extra/sharelinks/{$data['share_key']}.png" /></a></li>
	</if>
</foreach>
</ul>
<script type="text/javascript">
	ipb.sharelinks.url   = "{parse expression="IPSText::base64_decode_urlSafe($url)"}";
	ipb.sharelinks.title = "{parse expression="IPSText::base64_decode_urlSafe($title)"}";
	ipb.sharelinks.bname = "{parse expression="trim($this->settings['board_name'])"}";
</script>
</if>

Я бы добавил затемнее вот так:

.gradualfader img {
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity:0.2;
opacity:0.2;
}

.gradualfader a:hover img {
opacity:2.0;
-moz-opacity:2.0;
-khtml-opacity:2.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=200);
}

			<li class="gradualfader"><a href="{parse url="sharelink={$data['share_key']};{$data['_url']};{$title}" base="public"}" rel="nofollow" target="_blank" title="<if test="!in_array( $data['share_key'], array( 'print', 'download' ) )">{$this->lang->words['gbl_sharelink_with']} </if>{$data['share_title']}" class='_slink' id='slink_{$data['share_key']}'><img src="{$this->settings['public_dir']}style_extra/sharelinks/{$data['share_key']}.png" /></a></li>

У меня на форуме счётчики так затемнены.

Изменено 28 июня 201114 г пользователем Lesovsky

Опубликовано: 28 июня 201114 г

А ещё точнее - сделать изменение картинки при наведении.

Ну да CSS

А каким образом мне подправить то, что находиться в {IPSLib::shareLinks( $topic['title'] )}?

А что там менять?

Проще будет сообразить, где посмотреть.

Опубликовано: 28 июня 201114 г

Автор

АЦ > Внешний вид > Ваш шаблон > Шаблоны > Глобальные > shareLinks

У меня на форуме счётчики так затемнены.

Блгодарю! Решение "запрозрачить" (новое слово аж придумал) вообще отлично справляется с поставленной задачей.

Я правда хотел отвести в серый цвет, чтобы они грубо говоря были такие же не прозрачные, но серые.

Но и этот вариант отлично подошёл.

Вот скрин.

Создайте аккаунт или войдите в него для комментирования

Зарегистрировать аккаунт

Войти сейчас

Подписчики

Перейти к списку тем

Нет пользователей, просматривающих эту страницу.

Изменение кнопок поделиться темой. IPB 3.1.4

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

Account

Navigation

Поиск

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)