How to develop custom themes

themes

(Sam Saffron) #21

Excellent feedback :v:t4:

Let me respond to specifics here:

Absolutely not. The feeling is 100% justified. Though it is not a super urgent problem, since the current snippets are so small, it still does not feel right and is harder to debug and so on.

I have another round of refinements on themes queued in a couple of months, when I get to that I plan to add a JavaScript section to themes and then bundle all that up into theme.js. This will be enormously cleaner than just adding it to head. Migration from a theme authors perspective should be trivial.

This is partially true, you could add translations, but it would involve a bunch of manual patching which is no fun. I will also queue up dealing with translations next time I work on themes.

Regarding site settings I acknowledge the problem. I do not think I will integrate theme settings into site settings, but I could look at having a spot for theme settings when you edit a theme. Just like we have uploads and so on.

Very interesting suggestion, but there are a bunch of edge cases there.

If theme component is enabled on 2 out of 5 themes, (what happens when you tick box? what state is the box in?) I guess we could do the “light grey” “half selected” box in that case and then allow you to turn it white (empty) or full (black).

It can work. I will think about this some more.


Regarding your particular pickle, about wanting a more consistent workflow. One olive branch I could offer is perhaps adding a rake theme:install task (pr welcom), then you could still have the themes in your app.yml which simplifies flow somewhat.

Layering CSS is not a trivial problem, but if you are careful you can ship theme with default and then have your core plugin override to the consistent styles. Which can leave everyone happy.


(Ionuț Staicu) #22

I managed to play around with this and looks very nice.

However, there is one thing i miss: imports (partials?) of any kind: css, js or html.

I do something wrong? Or this is not implemented? (i will gladly trade the web edit ability to this :smiley:)


(Rafael dos Santos Silva) #23

Sass imports should work just fine. JS modules too.


(Ionuț Staicu) #24

What if it doesn’t? :slight_smile:

Error: File to import not found or unreadable: custom/navpill.scss.
       Parent style sheet: theme_field.scss
        on line 1 of theme_field.scss
>> @import 'custom/navpill'; 

having this structure:

│   about.json
├───desktop
│   │   desktop.scss
│   │   header.html
│   │
│   └───custom
│           _navpill.scss

I tried to import in any variation i could think about, with or without .scss suffix, with or without ./ in the filename.


(Sam Saffron) #25

Yeah that is not supported quite yet, you can not compose your scss yet from multiple files in the theme, you get one file only per section.


(Carlo) #26

Hi everyone.

I’m new to Discourse, and I am thinking about making my own theme.

Ideally, I’d like to make a theme build from Bootstrap code (Bootstrap · The world’s most popular mobile-first and responsive front-end framework.).

Do you know where can I get the default theme?

Thanks


(Carlo) #27

To create a theme you need to follow a specific file structure. These are the files you may include:

about.json (required)

common/common.scss
common/header.html
common/after_header.html
common/footer.html
common/head_tag.html
common/body_tag.html
common/embedded.scss

desktop/desktop.scss
desktop/header.html
desktop/after_header.html
desktop/footer.html
desktop/head_tag.html
desktop/body_tag.html

mobile/mobile.scss
mobile/header.html
mobile/after_header.html
mobile/footer.html
mobile/head_tag.html
mobile/body_tag.html

Hi.

Do you know where I can get the defaults files ?

Thanks


(David Taylor) #28

“Themes” in discourse do not replace templates or styles, they add to them.

Therefore there are no ‘default files’. You can use the .scss files to add/override existing styles in Discourse, and you can use the .html files to add additional content/javascript at certain points within the page.

Trying to use bootstrap will probably go very badly - it will conflict with all of Discourse’s existing styling.

To start with, don’t worry about the file structure you quoted above. Go into your forum admin panel, Customize Themes and explore the UI there.


(Ionuț Staicu) #29

One small note: any of these files are optional. So if you don’t need it, don’t create it :wink:


(Carlo) #30

Yes I think I will just customise the default theme.

Thanks


(Erlend Sogge Heggen) #31

A post was split to a new topic: How do I create and upload my own Theme?