1

Тема: Вставка переменной в CSS

Всем привет!
Возник такой вопрос, как вставить {$item.field_overlay} в css.

Поясню зачем. На  Главной сайта выводится блок "Горячей новости".

<div class="hotnews" style="background-image: url('{$item.field_image}');">
    <div class="hn_overlay" style="background-image: url('{$item.field_overlay}');"></div>
    <span class="hn_date">{locale_date("d F ", $item.publish_date)}</span>
    {foreach page_tags($item.id) as $tag} 
    <span class="hn_filters"><a href="{site_url('tags/search/'.$tag.value)}">{$tag.value}</a> 
    {/foreach}
    / <a href="/{$item.cat_url}">Федеральные практики</a></span>
    <p class="hn_head"><a href="{site_url($item.full_url)}">{$item.title}</a></p>
</div>

В блоке есть фотка новости ({$item.field_image}) и накладываемый сверху полупрозрачный png ({$item.field_overlay}). Значения изображения и оверлея задаются через доп.поля, при создании страницы (новости). Все работает
Сейчас, как видно, оба значения прописаны в атрибутах тега. Но мне нужно добавить hover-варинат, при котором, оверлей пропадает при наведении.

Вижу два варианта.
1. Прописать {$item.field_overlay} в файле css. Но тогда я неуверен, что в файле подхватится это значение (скорее даже уверен, что неподхватится).
2.  Вывести нужный класс в из файл в код с помощью <style></style>. Но вроде бы CSS обрамляется {literal} {/literal}, значит  {$item.field_overlay} тоже не подхватится.

Вот и вопросы. Правильно ли я понимаю по первому и второму пункту, что не заработает? И если правильно, то как быть?

Thumbs up Thumbs down

2

Re: Вставка переменной в CSS

Напишите, какого эффекты вы хотите добиться? Как-то всё сложно у вас...

Профессиональное создание сайтов любой сложности, аудит, продвижение, а также поддержка вашего интернет ресурса - web2life.ru

TIMEWEB > Всегда больше, чем просто хостинг для ImageCMS!

3

Re: Вставка переменной в CSS

1) В css прописывайте только стили!

2) При необходимости (если другого варианта не найдете), можно прописать стили прямо в шаблоне в html.

Разрабатываю модули для ImageCMS Corporate (оплата PayPal).

4 Отредактировано elvizzz (15-05-2017 19:34:33)

Re: Вставка переменной в CSS

Sempai пишет:

1) В css прописывайте только стили!

2) При необходимости (если другого варианта не найдете), можно прописать стили прямо в шаблоне в html.

Ну, другого варианта я не придумал еще. Но если я в шаблоне .tpl пропишу

<style>
.tn_overlay { 
        width: 310px; height: 160px;
        position: absolute;
                background-image: url('{$item.field_overlay}');
        z-index:1;
}
.tn_overlay:hover { 
        width: 310px; height: 160px;
        position: absolute;
                /*background-image: url('{$item.field_overlay}');*/
        z-index:1;
</style>
<div class="hotnews" style="background-image: url('{$item.field_image}');">
    <div class="hn_overlay"></div>
/* Тут будет остальной код */

То это будет работать. Так? (На сам CSS внимание не обращайте).

Thumbs up Thumbs down

5

Re: Вставка переменной в CSS

supleader пишет:

Напишите, какого эффекты вы хотите добиться? Как-то всё сложно у вас...

Ну эффект простой. На изображение накладывается полупрозрачное изображение, которое при наведении пропадает.
Полупрозрачное изображение одно из 10 вариантов, поэтому выводится через доп.поле.

Thumbs up Thumbs down

6

Re: Вставка переменной в CSS

Я может что-то не понимаю, но в чём проблема? https://jsfiddle.net/r36c3b4x/

Профессиональное создание сайтов любой сложности, аудит, продвижение, а также поддержка вашего интернет ресурса - web2life.ru

TIMEWEB > Всегда больше, чем просто хостинг для ImageCMS!

7

Re: Вставка переменной в CSS

supleader пишет:

Я может что-то не понимаю, но в чём проблема? https://jsfiddle.net/r36c3b4x/

Да, про display:none я почему-то не подумал. Начал городить огород. Спасибо огромное.

Thumbs up Thumbs down

Re: Вставка переменной в CSS

В css прописывайте только стили!

Создание и продвижение сайтов . http://www.niagarastar.ru/ Низкие цены.
Оформление и ведение групп в соцсетях.

Thumbs up Thumbs down