Welcome banner HTML support

fbk

Hello, today when setting up my new flarum instance, I encountered the need of having an HTML editor to edit the welcome banner text.
It is useful for example when you want to add links, images, or even to use different styling directly from the banner, without touching the Custom CSS box. I am talking about a paragraph, a bolded text, and so on.

Thanks,
Cristian

[deleted]

fbk It does actively support this, but there's no editor - you'd need to write your own HTML

fbk

[deleted]

So if I write my own html in that box, it will work ? Did not know that, thank you 🙂

[deleted]

fbk Yes, it should work. Here mine, as en example

<h7 class="mainheader">A <div class="smarter"> phenomenal</div> Infosec and Technology resource</h7> <p class="subheader">Welcome to Phenomlab - a site that aggregates technology and infosec news and active discussion around the world, then encourages everyone from all walks of life - regardless of knowledge or experience - to discuss the topics that interest or concern them in a friendly and non-condescending manner.</p>

Can be seen here https://hub.phenomlab.com

fbk

Thank you very much 🙂

[deleted]

fbk 👍️

Communitybuilder

[deleted] hello
I would like the exact same layout for the header banner:
-Background picture on the top of the nav bar
-And some text (optional on the background header banner)

Could you please share the exact process to do so ? Do I need a specific extension ? Do I have just to modify the custom header and CSS appearences in the admin panel --> appearences ? If so could you share me examples of codes for both html and css ?

Thank you very much

[deleted]

Communitybuilder Hi, there's no need for an extension to complete this. You do it with the below CSS

.Hero {
    background: linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.45)),url(URL to your jpg goes here) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #ffffff;
    padding-top: 53px;
    height: 206px;
}

Note that I adjust the top bar slightly to make it transparent when it reaches the top, so the padding-top and height components may not be needed in your case

For the text, you can use Administration->Basics->Welcome Banner and paste something like the below in the box

<h7 class="mainheader">A&nbsp;<div class="smarter">&nbsp;phenomenal</div>&nbsp;Infosec and Technology resource</h7>
<p class="subheader">Welcome to Phenomlab - a site that aggregates technology and infosec news and active discussion around the world, then encourages everyone from all walks of life - regardless of knowledge or experience - to discuss the topics that interest or concern them in a friendly and non-condescending manner.</p>

Communitybuilder

Thank you very much for your quick and precise answer @[deleted] i'm hurry to try that once at home. Will keep you updated 🙂

PS: i admire your work and dedication after reading several of your posts. Hope i'll be able to do the same in the future as i m still in my early 30yo consultant career 🙂

[deleted]

Communitybuilder PS: i admire your work and dedication after reading several of your posts.

I'm truly humbled. Thanks. Let me know if you need any help. Also, you can reach me on Discord.

Communitybuilder

[deleted] Just wanted to inform you it worked perfectly with some tweaks !.

For the Background:
==>OK, No problem at all with the code you gave me
For the text:
==> KO, changing "Administration ->Basics->Welcome Banner didn't work for me.
Here is the solution if someone reads this topic in the future: You have to install the extension "Custom Welcome-Panel". Once installed, go to Extensions -> Custom Welcome-Panel -> Settings --> Paste the HTML code as phenomlab recommended.

@[deleted] Again Thank you so much, you helped me so much ! 😊

[deleted]

Communitybuilder No problems. Surprised that the text part doesn't work - that's exactly how I'm using it 😀 Glad to see you managed to get it to work another way.