Информационный текстовой банер над шапкой сайта (вариант1)


Так как есть у нас в настройках магазина поле "Комментарий" который используется исключительно на странице контактов ( и то не всегда), возьмем и задействуем его

итак открываем, как уж повелось, контроллер шапки:

/catalog/controller/common/header.php

и казалось бы можно там прописать 


$data['comment'] = $this->config->get('config_comment');

но мы изначально не будем так делать, а сразу пропишем, чтоб поле комментария понимало HTML теги (на всякий случай... мало ли чего прийдет нам в голову понаписать, и эта приблуда станет для нас полезной
напишем лучше так

ищем 

$data['contact'] = $this->url->link('information/contact');

и ниже вставляем

 

$data['comment'] = html_entity_decode($this->config->get('config_comment'), ENT_QUOTES, 'UTF-8');

с контроллером закончили

идем в тпл
/catalog/view/Ваша тема/default/template/common/header.tpl

ищем там 



<body class="<?php echo $class; ?>">



и прописываем вывод нашего коммента , естественно обернув его в контейнер и прописав условие наличия этого коммента ( вможет получиться так, что когда то он и не будет нужен
 

<?php if ($comment) { ?>
     <div class="comment-block">
      <?php echo $comment; ?>
</div>
<?php } ?>

ну и немного поиграемся стилями, дабы выделить наш оффер
 

.comment-block{
    background-color: red;
    border-bottom: 1px solid #e2e2e2;
    min-height: 40px;
    margin-top:-20px;
    text-align: center;
    padding: 10px 0px 3px 0;
    color: #fff;
    font-weight:600

и получим такую штуку в верху нашего сайта

 

но можно пойти дальше в плане верстки и разукрасить блок рекламы картинкой и меняем предыдущий стиль на этот


.comment-block{
     background-image:url('../image/zw.jpg');
    color: #7cff4c;
    max-width: 100%; 
    font-size: 2em;
    height: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-attachment: relative;
}

 

и получаем такой нарядный банер
 


думаете все? да как бы не так... давайте еще заставим его моргать)))


.comment-block {
-webkit-animation: blink 2s linear infinite;
animation: blink 2s linear infinite;
font-weight: bold; color: #f00;
}
@-webkit-keyframes blink {
0% { color: #f00; }
50% { color:#7cff4c; }
100% { color:#fff; }
}
@keyframes blink {
0% { color: #f00; }
50% { color:#7cff4c; }
100% { color:#fff; }
}

ну и вот что получили на выходе... хоть это и не предел... больная фантазия и умелое пользование css может завести куда угодно. Дерзайте!

 

p.s. Хочу заметить, что после данных манипуляций и применения тегов, на странице контактов появятся "крокозябры"... это так же дегко решается заменой в контроллере контактов 
 

$data['comment'] = $this->config->get('config_comment');
 

на

$data['comment'] = html_entity_decode($this->config->get('config_comment'), ENT_QUOTES, 'UTF-8');

 


0 комментариев / Написать комментарий

Написать комментарий

Внимание: HTML не поддерживается! Используйте обычный текст!
    Бесполезно           Полезно
Captcha

Подпишитесь

Рассылаем только значимую информацию

Теги: Информационный текстовой банер над шапкой сайта (вариант1), Информационный текстовой банер над шапкой сайта