How add permamently alert ?

Robertos

Hello.
I would like to add permanently alert on the main page, but I don't know where. Something like here with my own words.
https://prnt.sc/tknjg6

[deleted]

Robertos you could easily do that with some simple CSS and HTML - add it into the header.

Ralkage

Robertos I've been working on a notice/alert extension recently but it won't be out anytime soon. Though, seeing that there are people in need of such extension, I'd love to get an initial release out there ASAP 😁

Bullhorn

Alternatively, for the time being, you should be able to create a simple extension that adds a custom alert you can specify based on certain conditions such as how the email confirmation alert works in Flarum core 🙃

Robertos

Can you help me with this ? I want exactly the same.

Pollux

Robertos

Take this custom CSS as a starting point:

.Hero::after {
    display: block;
    background: #eeb;
    content: "Your Text here";
    color: #840;
}

Place your code into the Custom CSS part of the Appearance section of the admin panel.

DursunCan

Pollux hero css does not appear on the homepage.

Robertos

Thank you very much for your answer 🙂

Pollux

Robertos

Instead of giving it a height, you can use a padding, e.g.:

.Hero::after {
    display: block;
    background: #eeb;
    content: "Your Text here";
    color: #840;
    padding: 15px;
}

The advantage of this approach is, that the height automatically increases if someone should increase the font size in their browser.

DursunCan hero css does not appear on the homepage.

Applied to the forum here it works fine.

Ralkage I've been working on a notice/alert extension recently but it won't be out anytime soon. Though, seeing that there are people in need of such extension I feel more inclined to work on it more productively

Your solution looks much better indeed, so your extension will be very welcome. My solution could be refined further with a border and a larger font:

.Hero::after {
    display: block;
    background: #fea;
    content: "Your Text here";
    color: #830;
    padding: 15px;
    border: #F7F9F9 solid 10px;
    font-size: 120%;
}

... but it will not be possible to include links or make single words stand out somehow.

[deleted]

Ralkage "reputation extension test" 🤐

[deleted]

Ralkage Though, seeing that there are people in need of such extension I feel more inclined to work on it more productively

This is something we definitely need 🙂

fakruzaruret

it is nice but there so many items. Top area is not for suitable for Google Adsense when you put it by fixed alert. I think flarum should give support for right sidebar in core. I think lack of the right sidebar restricts development. On the other hand someone can create a new extension for alerts or another notifications, ads etc. by using MODAL.

Robertos

And how i can center text on middle ? because is on top now.
https://prnt.sc/tkq3dc

.Hero::after { display: block; background: #fff2ae; height: 50px; content: "Your Text here"; color: red; }

Robertos

Pollux Its nice, but what if I wanted to add a link?

Ralkage

Pollux I had planned to incorporate an itemList so that each alert/notice item can be targeted and styled individually, possibly adding an option for pre-defined styles and a custom option if need be 😁

Pollux

Robertos Its nice, but what if I wanted to add a link?

Then you have to find another way, e.g. by writing / commissioning an extension.

[deleted]

Robertos A better way to do this would be to create a hidden DIV in the header that contains PHP variables you can populate. When you want to show the header, just unhide it with JS

Robertos

Pollux so, can you help me find another way ?

Robertos

In this code somebody help me add "X" close button ?

.Hero::after { display: block; background: #fea; content: "Your Text here"; color: #830; padding: 15px; border: #F7F9F9 solid 10px; font-size: 120%; }

Pollux

Robertos In this code somebody help me add "X" close button ?

This won't be possible. You can only insert simple text and format it as a whole with a font, color, background etc. as stated above.