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

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

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

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

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

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

 

[Pokschubin]

Виталий Васильевич, И не только в extra.less , а еще и клас добавить в оформление объявления.

 

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

а еще и клас добавить в оформление объявления.

не правильно выразился ...

 

[Pokschubin]

Виталий Васильевич, Верно. А что еще требуется ?

 

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

Верно. А что еще требуется

 

[Pokschubin]

Виталий Васильевич, Прям в сообщение вставьте

<div class="notice_mytest"> Фигня тут всякая </div>

В extra.less

.notice_mytest {
    line-height: 1;
    background: url(data/images/m.jpg); /*путь к изображению*/
    padding-left: 10px;
}

Сообщение автоматически объединено: 09.08.2018

не правильно выразился ...
Посмотреть вложение 304

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

 

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

background: url(data/images/m.jpg);

на сколько мне припоминается background: url('data/images/m.jpg'); нужно ставить добавь к себе, чтоб потом вопросов не было..

 

[Pokschubin]

Виталий Васильевич, У мя так робит !

 

[Skaiman]

Для удобства я так делал, присваивал свой класс объявлению, например notice-my, потом само объявление оборачивал в div с классом notice--my, тогда структура стилей получается такая:

.notice {
    &.js-notice {
        &.notice-my {
            //здесь общие свойства фона, может высоты или ширины
            .notice--my {
                //здесь свойства уже того, что сами понаписали
            }
        }
    }
}

 

[Skaiman]

Для примера, делал для игрового сообщества. Настройки объявления:

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 объявления:

.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%;
                            }
                        }
                    }                  
                }
            }
        }
    }
}

Используются подключенные шрифты.
Результат:

 

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

будьте любезны добавив этот манул в данный раздел https://svgzone.su/resources/categories/instrukcii.5/
под названием "Красивое объявление " или на свое усмотрение.
спасибо

 

[Skaiman]

Это так то и не мануал пример, ответ на вопрос