How to add settings to your Discourse theme

How can I for example use a string from the settings.yml in the footer of the page? The footer does not seem to accept any javascript.

What did you try? Was it something like:

Yep, this does not work.

Yes, that’s expected. The footer theme field can take any HTML, including script tags, however the content of the script tags won’t execute (you can still see them in the DOM, but they don’t do anything). You’ll need to move your scripts tags to the head_tag field.

1 Like

Yes that I know already. But how to get a setting from the theme - let’s say a string - in the head_tag and then use this string in the footer HTML?

As explained in the OP, you can access your settings in your JS code like this: settings.your_setting_key.
As to how you can pass this to your footer HTML, I can’t answer this because it depends on your code and how you’re implementing your footer.

I suggest you go through this incredibly helpful guide which explains lots of things about the theme system and it even has a footer example:

7 Likes

Oh I’m like 20 times through the entire article without finding the answer for my case.
I know how to access them in js that‘s all fine and good. What I don’t know is how to pass them into the footer from the head_tag

My footer is just plain HTML nothing fancy. Just a simple div with some text (which I would like to set through theme settings).

The footer looks like this:

<div class="footer">
  <div class="copyright">Copyright © {{STRING FROM SETTINGS}}</div>
</div>

Is this HTML in the Footer field in your theme and not in the head_tag? If so, is there a reason it has to be in the Footer field? I’m pretty sure you can get identical results if you use the below-footer plugin outlet where you can very easily use your theme settings:

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  <div class="footer">
    <div class="copyright">Copyright © {{theme-setting 'your_setting_key'}}</div>
  </div>
</script>

You’ll need to put this in head_tag.

5 Likes

I’m not aware of any reason for that. It just seemed sane for me to put my footer code in the footer field.

The code you provided works just fine! Halleluja! Thank you! Could you may explain why there is a footer field at all in this case? :thinking:

And as an additional question:

Can I combine javascript and handlebars in there somehow too? I would like to get the current year using javascript to put it in the string too.

1 Like

You can use the footer field if you want to have extra static HTML that it’s served with the crawler and no_ember layouts as well as the normal layout. The code above doesn’t work with the no_ember and crawler layouts because that code requires our Ember.js app which isn’t served with those layouts (I don’t think they serve any JS at all).

Not directly; you’ll need to use the registerConnectorClass plugin API to add an attribute that has the current year to the connector instance behind your connector template. Here is an example from my theme:

https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/c05adce3274ffee821eadac8f81ffb54b85e5045/mobile/head_tag.html#L91

My theme sets the tabs attributes which is then referenced in the Handlebars template at the end of the file. You can do something like this.set("year", compute current year here) in the setupComponent method and then in your template you can access the year value like this {{year}}.

5 Likes

What if I have a setting like

my_text:
  type: string  
  default: "<a href='https://google.com/'>Google!</a>"

and then want to do

<script type='text/x-handlebars' data-template-name='my-template'>{theme-setting 'my_text'}}</script>

It doesn’t give me my link but instead displays all the HTML. Is there a way to fix that?

2 Likes

Use 3 brackets like this {{{theme-setting “my_text”}}} and it will use html instead of text

7 Likes

Golly. That was easy. You rock. Where would I have read to find that? Is it an ember thing?

Now that that’s solved, here’s a tangential issue. How about the opposite problem, getting Javascript to render markdown to HTML? (I told the last client who wanted markdown in the site setting to just put in HTML, which worked, but it’s still bugging me.)

  some_name: function() {
    return (siteSettings['my_text']);
  }.property()

Yep, Ember uses Handlebars for templating… Handlebars

Not entirely sure on this one… haven’t run into that situation myself.

4 Likes

What’s that version value? Is it supposed to be the version of my plugin?

No, that’s the version of our Plugin API

We bump that every time a new method is added to the API so that themes / plugins which relay on methods that were recently added to the plugin API don’t end up breaking sites which haven’t been updated.

You don’t really need to worry about this a lot because:

  1. We don’t add new methods very often
  2. Most sites that use Discourse are updated very frequently.
6 Likes

Looks like bool values still remain strings in scss/js?

So I have to write

@if $my_option == 'true' {
1 Like

ah, looks like I simply need to specify bool type explicitly.

2 Likes

hm, no, actually it’s still not working. :slightly_frowning_face:

You can check it in this component (bool-bug branch): https://github.com/programmersforum-reborn/discourse-wide-posts/tree/bool-bug

Please can someone help me using variables for scss colors?

I’m fine with using SCSS variables for colors as html color names, color codes or in rgb notation.

E.g you can set them directly in the SCSS either as:

$my_background_color; red;
background: $my_background_color;

or as

$my_background_color; #0000FF;
background: $my_background_color;

It is also possible to perform color functions with these such as

background: mix($my_background_color, #FFFFFF, 10%);

You can also pass them from theme settings as a variable

E.g. if you have a theme setting called “select background color”

background: mix($select_background_color, #FFFFFF, 10%);

HOWEVER

When passed as a variable from the theme settings - this mix function works for color names (e.g. blue) but NOT for color codes (e.g. #0000FF)

I suspect this is because it is treating it as a SCSS string as opposed to a SCSS color?

I’ve tried everything I can think of on SCSS to get the html #codes to work in mix functions, when passed as a theme settings variable.

Does anyone know a way to get a user to input an html color code and then mix it in scss?

1 Like