Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
DonPrus

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

Recommended Posts

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

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

9e8ab33f3fc20bd88b39c4b8c1c0d539.png

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

 

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

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

Share this post


Link to post
Share on other sites

АЦ > Внешний вид > Ваш шаблон > Шаблоны > Глобальные > 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>

 

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

Edited by Lesovsky
  • Upvote 1

Share this post


Link to post
Share on other sites

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

Ну да CSS

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

 

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

 

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

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

 

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

8e639c57f75b2a702388d6c1575a0393.png

Вот скрин.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...