Jump to content
Sign in to follow this  
JetLi

Как вставить сбоку закладку ?

Recommended Posts

Добрый день! Очень хочется добавить закладку сбоку на сайт, к примеру значек фэйсбук, это вообще реально, или нет ? Opencart 1.5.3.1 Сайт: www.proffit.lv

Заранее спасибо!

post-23081-0-56259600-1351527427_thumb.png

Share this post


Link to post
Share on other sites

<style type="text/css">
.add_comment {
  display:block;
  width:30px;
  height:150px;
  background:#be0000;
  position:fixed;
  left:0;
  top:200px;
}
</style>

<a href="#" class="add_comment">q</a>

Спасибо большое, толкьо не подскажите куда конкретно это вписать ?

Share this post


Link to post
Share on other sites

В шаблоне, если ето дефолтний то здесь catalog/view/theme/default/template/common/header.tpl

после тега

<body>
вставте например следующее:

<style type="text/css">
.add_comment {
  display:block;
  width:30px;
  height:150px;
  background:#be0000;
  position:fixed;
  left:0;
  top:42%;
}
</style>

<a href="#" class="add_comment">q</a>
Сделайте картинку вместо заливки и привяжите силку
Вы конечно простите меня за мои не далёкие знания, но раскажите по подробнее, как вставить картинку и ссылку привязать ? Заранее спасибо!

Share this post


Link to post
Share on other sites

Делаете картинку(например в фотошопе), припустим назвади ее f.png и розмера у нее 100*30px заливаете в папку catalog/view/theme/default/image

тогда код будет следующий:

<style type="text/css">
.add_comment {
  display:block;
  width:30px;
  height:100px;
  background:url(../images/f.png);
  position:fixed;
  left:0;
  top:42%;
}
</style>

<a href="#" class="add_comment"></a>
Вместо # в строке

<a href="#" class="add_comment"></a>
ставите свою силку, например
<a href="www.example.com/contacts.html" class="add_comment"></a>

<style type="text/css">

.add_comment {

display:block;

width:50px;

height:50px;

background:url (/public_html/catalog/view/theme/bershka/image/facebook1.png);

position:fixed;

left:0;

top:42%;

}

</style>

<a href="http://www.facebook.com/pages/ProFFitlv/168295743308503" class="add_comment"></a>

Спасибо вам большое, но я добавил вот этот код, и чего-то не видно картинки.

Edited by JetLi

Share this post


Link to post
Share on other sites

background:url (/public_html/catalog/view/theme/bershka/image.facebook1.jpg);

ет что за самоделка? )

незнаю куда ви ее закинули но путь неправильно прописан... пробуйте так:

background:url (http://домен сайта/catalog/view/theme/bershka/image.facebook1.jpg);

Отлично! Спасибо вам большое, всё получилось! Только вот картинка получилась на белом фоне, как-то можно изменить цвет фона ? Или можно просто картинку в фотошопе на другом фоне сделать и всё ?

post-23081-0-56539500-1351594456_thumb.png

Share this post


Link to post
Share on other sites

Отлично! Спасибо вам большое, всё получилось! Только вот картинка получилась на белом фоне, как-то можно изменить цвет фона ? Или можно просто картинку в фотошопе на другом фоне сделать и всё ?

Всё, я понял в чем ошибка. Спасибо вам еще рас за помощь!

Share this post


Link to post
Share on other sites

Картинку png делаете и фон убираете в фотошопе с картинки....

Да пожалуйста! )

А как, к примеру, добавить сразу 2 закладки туда ? например, ещё и ссылку на твиттер!

Share this post


Link to post
Share on other sites

<style type="text/css">
.add_comment {
  display:block;
  width:30px;
  height:100px;
  background:url(../images/f.png);
  position:fixed;
  left:0;
  top:37%;
}
.add_comment2 {
  display:block;
  width:30px;
  height:100px;
  background:url(../images/t.png);
  position:fixed;
  left:0;
  top:45%;
}
</style>

<a href="#" class="add_comment"></a>
<a href="#" class="add_comment2"></a>
Короч по анологии пути для картинки пропишите...
Спасибо вам большое, вы меня выручили! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.