Newbie help accessing code

[tad]

Hi there,

I’m new to Discourse and open source in general. I am a non-coder (outside of HTML/CSS), but can usually intuitively figure out how to cut/paste code from one location to another to have an element appear in a different place. That’s about as far as I’m looking for customization outside of things I can already do in the

There’s a user field I’ve created that I’d like to have appear directly under the User’s Full Name on the user card instead of its usual location below the standard user fields. So I have a very small customization I’d like to make, but it addresses a larger question of mine: how do I access the theme/code?

In trying to answer this (extremely basic) question, I do think I found the file associated with the code I would need to manipulate on my local install: discourse/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs. I’ve opted to host my new forum with discourcehosting.com, so I’m just not sure how to edit that file when I don’t have access to the files.

I apologize for how basic this question is and how dumb I probably look in the process. But I promise it’s well-intentioned.

Thanks.

[maiki]

Start at Beginner's guide to using Discourse Themes, and follow links to specific theming guides to do what you want.

[tad]

Thanks for the link, maiki. I promise I’ve reviewed that guide a dozen times the last few days to ensure I wasn’t overlooking something obvious. I understand how/where to access customizations to styling and code in the head/body/etc., but I guess I’m looking for clarity on whether or not the changes I’m looking to do is essentially creating a “new theme” (when I’m really just looking to tweak the locations of where things appear in a few instances).

[maiki]

I’d say it was a theme component.

Don’t overthink it, just make a theme. It’s fun! You’ll figure it out.

[tad]

I was able to make the modification to the local file discourse/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs to achieve the desired effect. Just not sure how to edit that file if I’m not self-hosting…

[RGJ (Richard - Communiteq)]

It’s possible to override HBS templates using theme components, which can be done from the admin web interface.

Here’s how to do that: Developer’s guide to Discourse Themes

So in your case you would make a new theme component and enter this into it

<script type="text/x-handlebars" data-template-name="components/user-card-contents">

</script>

and then copy the contents of your modified file in between those script tags.

Editing the Discourse files directly is a) not possible on our hosting b) generally not recommended as it will completely break your site when you upgrade. The method above is the way to go - whether you are on our hosting or not!

If you just want to add one user field to the user card, then you might consider using a plugin outlet, which is described a bit higher up in that same article and here. The plugin outlet method requires less changes to the code which will ensure better compatibility when upgrading. It’s a bit less flexible though since it does require an available plugin outlet for your needs.