Вопрос Красивое объявление. Как?

Виталий Васильевич

Проверенный
Регистрация
03.08.18
Сообщения
23
Реакции
10
Баллы
45
Привет всем ..
Вы простите меня, но на данном проекте есть для новичков есть объявление про 3 сообщений и 3 симпатий .. а когда очнулся уже оно исчезло, точней поздно стало.
понимаю,

Что это делать через extra.less нужно

Указал свой css notice_mytest

Код:
.notice_mytest
{
    background: red; или линк прописывал .. на картинку .
}
 

Pokschubin

Проверенный
Регистрация
07.07.18
Сообщения
264
Решения
3
Реакции
24
Баллы
65
Виталий Васильевич, Прям в сообщение вставьте
HTML:
<div class="notice_mytest"> Фигня тут всякая </div>
В extra.less
CSS:
.notice_mytest {
    line-height: 1;
    background: url(data/images/m.jpg); /*путь к изображению*/
    padding-left: 10px;
}
Сообщение автоматически объединено:

Без точки вставляется. Сразу не увидел.
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Для удобства я так делал, присваивал свой класс объявлению, например notice-my, потом само объявление оборачивал в div с классом notice--my, тогда структура стилей получается такая:
Код:
.notice {
    &.js-notice {
        &.notice-my {
            //здесь общие свойства фона, может высоты или ширины
            .notice--my {
                //здесь свойства уже того, что сами понаписали
            }
        }
    }
}
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Для примера, делал для игрового сообщества. Настройки объявления:
2018-08-10_074142.png
HTML объявления:
HTML:
<div class="welcome--pubg">
    <p>Приветствуем Вас на форуме, посвященном <pubg>PlayerUnknown's Battlegrounds</pubg> и другим компьютерным играм!</p>
    <p>Присоединяйтесь к нашему сообществу игроков, станьте частью дружного коммьюнити!</p>
    <p>Узнавайте первыми о последних новостях из мира <pubg>PUBG</pubg>, находите друзей для игры, общайтесь с другими игроками и узнавайте больше о любимых играх с нами.</p>
    <div class="pubg-channel">
        <a href="//t.me/pubg_best_in_russia" class="button--cta button button--icon button--icon--write telergamButton" target="_blank"><span class="button-text">Наш канал Telegram</span></a>
        <a href="//discord.gg/ZkxrnVv" class="button--cta button button--icon button--icon--write discordButton" target="_blank"><span class="button-text">Наш канал Discord</span></a>
        <a href="//vk.com/pubg.best" class="button--cta button button--icon button--icon--write vkButton" target="_blank"><span class="button-text">Наша группа Вконтакте</span></a>      
    </div>
</div>
LESS объявления:
Less:
.notice.welcome-pubg {
    background: url(/styles/pubg/welcome_pubg/img/welcome-pubg-bg.jpg) no-repeat center;
    .notice-content {
        .welcome--pubg {
            background: rgba(0,0,0,.5);
            padding: 5px 15px;
            text-align: left;
            p {
                color: #fff;
                font-size: 1em;
                margin: .5em 0;
                pubg {
                    font-family: 'Headliner No. 45';
                    background: linear-gradient(360deg, #ff8b00 33%, #fabc19 66%, #f0a411);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    color: #fabc19;                  
                    font-size: 150%;
                    line-height: .9;
                }              
            }
            .pubg-channel {
                text-align: center;
                padding: .5em 0 1em;
                a {
                    border: none;
                    padding: 8px 14px;
                    margin: 3px 0;
                    min-width: 210px;
                    &.telergamButton {
                        background: #419FD9;
                        .button-text {
                            &:before {
                                font-family:"Material Design Icons";
                                content: "\f501";
                                padding: 0 5px 0 0;
                                font-size: 130%;
                            }
                        }
                    }
                    &.discordButton {
                        background: #7289DA;
                        .button-text {
                            &:before {
                                font-family:"Material Design Icons";
                                content: "\f66f";
                                padding: 0 5px 0 0;
                                font-size: 130%;
                            }
                        }
                    }
                    &.vkButton {
                        background: #4A76A8;
                        .button-text {
                            &:before {
                                font-family:"Material Design Icons";
                                content: "\f579";
                                padding: 0 5px 0 0;
                                font-size: 130%;
                            }
                        }
                    }                  
                }
            }
        }
    }
}
Используются подключенные шрифты.
Результат:
2018-08-10_074419.png
 

Skaiman

Администратор
Регистрация
29.06.18
Сообщения
1 555
Решения
12
Реакции
1 193
Баллы
85
Это так то и не мануал :) пример, ответ на вопрос
 
  • Нравится
Реакции: Len
Верх Низ