About Templating

XEngine

Hello there!

Love Flarum! Got some questions on my mind. I want to make a Template for this as an extension. I made a little research on github, I guess all of the html (blade) files lies in Core extension of flarum. How can I override them for creating a template? any documents ?

romanzpolski

hmm Im looking for the same thing

Ralkage

Are you talking about a selectable theming section that users can choose from? If so, there is no current extension that exists that handles this. As far as page layout goes, you can peak at extensions to see how they handle adding templates and such. A gist of how it's done for example is with Flagrow's User-Diretory:

https://github.com/flagrow/user-directory/blob/master/assets/views/index.blade.php

Look at the code, see how it functions, and learn from it.

romanzpolski

Ralkage Thanks, I will use this one

clarkwinkelmann

There's currently no dedicated methods for template developers, development is more focused on features right now.

However the extensible nature of Flarum makes it really easy to change anything.

CSS

You can easily upload custom less rules via an extension or directly via the custom CSS field of the admin area

Template

Each extension does its own changes to the general template of Flarum. Unlike sites like Wordpress most of the UI is defined in javascript with the Mithril framework. If you don't like the way something is structured you can use an extension, extend/patch the component and render it another way.

romanzpolski

Yes guys, but Im looking to change blade template, logo piece is handled by blade

Pollux

romanzpolski Yes guys, but Im looking to change blade template, logo piece is handled by blade

What exactly do you want to do?

clarkwinkelmann

romanzpolski it's true it's hard to change the stuff at the top of the page, outside of the Mithril app.

Have a look at the header links extension to see how they edit the header. It makes use of jQuery inside a standard extension to access elements outside of the application template. Not pretty but does its job.

Blueh

I would appreciate it if someone changes the tags page by a vertical listing, traditional style ?

Pollux

Blueh I would appreciate it if someone changes the tags page by a vertical listing, traditional style ?

The tags are styled as a list of LI elements with the following CSS:

.TagTiles > li {
    float: left;
    width: 50%;
}

Just removing these settings already makes it a vertical listing as you are looking for. To do so, just enter the following into Administration > Appearance > Custom Styles:

.TagTiles > li {
    float: none;
    width: auto;
}

Voila, here you have it. With a little more experimenting with CSS, you can style the page further.

One suggestion: If you use Firefox, click on any element of the page you want to analyse (or test changes) and right click on Inspect Element. Read more about the Page Inspector. For other browsers look here.

Blueh

Pollux I know inspect element, I used firebug before

respect your proposal, also change here:

@media (max-width: 991px) and (min-width: 768px)
forum-37806bf5.css:4
.TagTiles>li {
    float: left;
    width: 50%;

I wil change that horrible grid after the stable version be released, but honestly I don't think I'm the only one who hates it ?

Blueh

I was just playing from my browser and made this:

kawai flarum

I dont have flarum installed so, I can't modify files to make deeper changes, but I hope to do that in the future ^-

WenderTeixeira

Blueh share ?

Blueh

WenderTeixeira Sorry, I did everything from the browser so I didn't save those changes. I hope to do more things as this soon : )

romanzpolski

@clarkwinkelmann thanks, I think I will do it with jQuery for now, as you proposed, but I still may need to access those templates in my extension for other things.