Автор Тема: Hyper coments спойлер  (Прочитано 371 раз)

20 Января 2015, 18:43:16
  • Ученик
  • Фрилансер
  • *
  • Сообщений: 180
  • Репутация: +0/-0
  • Создание продающих сайтов.
    • Просмотр профиля
    • Создание продающих сайтов, интернет-магазинов, визиток, блогов и порталов. Аудит системы продаж сайта!
 :oПодскажите кто нить видел коментарии для сайта в виде спойлера или как можно переделать hypercoments под спойлер а то удленняет сраницу ,хотелось бы сохранить компактность?
20 Января 2015, 19:28:28
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 1010
  • Репутация: +2/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Простой спойлер на JavaScript
<script type="text/javascript">
function spoiler(id)
{
    var obj = "";
    if(document.getElementById)
        obj = document.getElementById(id).style;
    else if(document.all)
        obj = document.all[id];
    else if(document.layers)
        obj = document.layers[id];
    else
        return 1;

    if(obj.display == "")
        obj.display = "none";
    else if(obj.display != "none")
        obj.display = "none";
    else
        obj.display = "block";
}
</script>
21 Января 2015, 11:12:17
Ответ #2
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86180
  • Репутация: +25412/-0
  • Сообщество PrestaShop
    • Просмотр профиля
На jQuery можно
$(document).ready(function(){
    $('.spoiler').click(function(){
        var show = $(this).attr('show');
        if(show == 1){
            $(this).attr('show', 0);
            $('.spoiler_block').slideUp(500);
        }else{
            $(this).attr('show', 1);
            $('.spoiler_block').slideDown(500);
        }
    });
});
21 Января 2015, 11:24:43
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 763
  • Репутация: +6/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вот самый легкий и сайт не грузит.
Cпойлер средствами css
21 Января 2015, 11:28:03
Ответ #4
  • Ученик
  • Фрилансер
  • *
  • Сообщений: 180
  • Репутация: +0/-0
  • Создание продающих сайтов.
    • Просмотр профиля
    • Создание продающих сайтов, интернет-магазинов, визиток, блогов и порталов. Аудит системы продаж сайта!
Спасибо вот решил вопрос
Global css
spoyler ****************************************************************************
.spoiler > input + label:after{content: "+";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input:checked + label:after{content: "-";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input{display:none;}
.spoiler > input + label , .spoiler > .spoiler_body{background:#F5F5F5;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
.spoiler > input + label + .spoiler_body{display:none;}
.spoiler > input:checked + label + .spoiler_body{display: block;}
.spoiler > .spoiler_body{-moz-box-shadow: 2px 8px 22px #000000;
-webkit-box-shadow: 2px 8px 22px #000000;
box-shadow: 2px 8px 22px #000000;}
spoyler ****************************************************************************

 / views / templates / hook/hypercommentscolumn.tpl
<div  class='block'>
</div>
  </div>
    <div class="spoiler">
<input type="checkbox" id="spoilerid_1"><label for="spoilerid_1">
<h4>
<a href="http://сайт/" title="" class="tooltip" ><img src="{$base_dir}modules/hypercomments/logo2.gif" style="vertical-align:middle; margin-top:-2px; margin-left:2px" /></a>&nbsp;<a title='' href='{$news_dir}' >Книга отзывов</a></h4>
</h4>
</label><div class="spoiler_body">
<div class='block_content'  style='text-align:center'>
<br /><div id="hypercomments_mix"></div>
<script type="text/javascript" src="{$base_dir}modules/hypercomments/js/scriptcount.js"></script>
<br />
</div></div>
этот блок был в правой панели перенес его над футером здесь уже готовый код..
21 Января 2015, 11:39:06
Ответ #5
  • Ученик
  • Фрилансер
  • *
  • Сообщений: 180
  • Репутация: +0/-0
  • Создание продающих сайтов.
    • Просмотр профиля
    • Создание продающих сайтов, интернет-магазинов, визиток, блогов и порталов. Аудит системы продаж сайта!
не подскажите как в этом коде добавить плавность окрытия :D
21 Января 2015, 12:03:16
Ответ #6
  • Ветеран
  • *****
  • Сообщений: 13458
  • Репутация: +14561/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Плавность это анимация, добавляется в javascript.
24 Января 2015, 17:19:14
Ответ #7
  • Ученик
  • Фрилансер
  • *
  • Сообщений: 180
  • Репутация: +0/-0
  • Создание продающих сайтов.
    • Просмотр профиля
    • Создание продающих сайтов, интернет-магазинов, визиток, блогов и порталов. Аудит системы продаж сайта!
Подскажите,не могу разобраться,создал спойлер,переместил,уменьшил ,хочу сделать его иконкой или в этом роде пробовал через background он тогда делает и фон всего спойлера,тем изображением какое хотел вставить ,как его спойлер организовать в ярлык всмысле jpg или иконку?
Или какие правильные дать команды чтобы над спойлером было одно изображение внутри остовалось прежним?
24 Января 2015, 20:11:07
Ответ #8
  • Ветеран
  • *****
  • Сообщений: 13458
  • Репутация: +14561/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Если стандарная тема, то для иконок так
<i class="fa fa-camera-retro fa-lg"></i>Font Awesome icons
24 Января 2015, 21:02:26
Ответ #9
  • Ученик
  • Фрилансер
  • *
  • Сообщений: 180
  • Репутация: +0/-0
  • Создание продающих сайтов.
    • Просмотр профиля
    • Создание продающих сайтов, интернет-магазинов, визиток, блогов и порталов. Аудит системы продаж сайта!
Если стандарная тема, то для иконок так
<i class="fa fa-camera-retro fa-lg"></i>Font Awesome icons
тема balim,вы имеете ввиду создать под этим классом?
можно ли ее через button сделать тогда надо весь спойлер переделывать?
подскажите подойдет ли этот код ?
<a href="#" class="button" style="text-decoration: none;">Кнопка спойлера</a>
<div class="spoiler" style="display:none; overflow-y:hidden; border:1px dashed #ccc; background:whitesmoke;">Текст спойлера</div>
$(function(){

$(".button").click(function(){
$(".spoiler").toggle();
});

});.   
24 Января 2015, 21:14:36
Ответ #10
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 33010
  • Репутация: +26761/-0
    • Просмотр профиля
В базовой теме prestashop для иконок используется шрифт Font Awesome. Если у вас другая тема, то нужно проверить подключение и наличие этого шрифта или использовать свои иконки.
25 Января 2015, 11:07:55
Ответ #11
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86180
  • Репутация: +25412/-0
  • Сообщество PrestaShop
    • Просмотр профиля
<a href="#" class="button"><i class="fa fa-camera-retro fa-lg"></i>Кнопка спойлера</a>
25 Января 2015, 18:04:55
Ответ #12
  • Ученик
  • Фрилансер
  • *
  • Сообщений: 180
  • Репутация: +0/-0
  • Создание продающих сайтов.
    • Просмотр профиля
    • Создание продающих сайтов, интернет-магазинов, визиток, блогов и порталов. Аудит системы продаж сайта!
В базовой теме prestashop для иконок используется шрифт Font Awesome. Если у вас другая тема, то нужно проверить подключение и наличие этого шрифта или использовать свои иконки.

Вы правы ....решение нашел!

Font Awesome достаточно просто:

Качаем архив.https://github.com/FortAwesome/Font-Awesome/zipball/master
Копируем шрифты из архива в проект.
Добавляем в наш css @import «font-awesome.css»;и @import «font-awesome-ie7.css»;Ниже:
@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff') format('woff'),
    url('../font/fontawesome-webfont.ttf') format('truetype'),
    url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
    }
Далее добавляем к нужным нам элементам путем добавления класса css.
<i class="icon-glass"></i>Справится даже новичок. Все это дело работает на вполне обычных элементах CSS, которые мы  с Вами применяем практически в каждом проекте.
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.icon-glass:before { content: "\f000"; }
И далее мы можем изменять внешний вид иконок средствами форматирования текста CSS: color, font-size, font-style и т.д., в зависимости от стилевых требований шаблона.