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

DonPrus · 28 Июня 2011

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

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

http://i22.fastpic.ru/big/2011/0627/39/9e8ab33f3fc20bd88b39c4b8c1c0d539.png

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

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

http://i22.fastpic.ru/big/2011/0627/61/e3fcdf6077532ef937d017b1dbee0b61.png

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

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

Вот реализация на 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 Июня 2011 пользователем DonPrus

Войти

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

Вопрос

DonPrus

Ссылка на комментарий

Поделиться на других сайтах

0 ответов на этот вопрос

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

Присоединиться к обсуждению

Главная

Активность

Магазин

Support

Важная информация