Category name after category image

Support

AI-generated summary

Category name after category image:
GamerBank is trying to move the category name after the category image, similar to the FiveM Forum. They’ve tried editing category-title-link.hbs, using JQuery, and CSS tricks without success.

fzngagan suggests overriding the template, specifically categories-only.hbs. However, GamerBank finds that editing category-title-link.hbs contains the desired changes, but the changes don’t take effect.

After restarting the docker container and reloading the page multiple times, GamerBank still sees no changes. fzngagan recommends deleting the tmp folder in the Discourse root directory and restarting the server.

codinghorror points out that this is a CSS change, which can be made through the admin panel. pfaffman provides a link to a developer’s guide to Discourse themes.

GamerBank eventually finds the solution by adding a script to the </body> field in the theme editor, swapping the order of the logo and text title.

1

Hello guys,

Before come here to ask for help i’ve tried everything but without sucess until now :sweat_smile:

I’m trying to put category name after category image like the FiveM Forum (https://forum.fivem.net)

shit
shit1202×423 48.5 KB

Already tried :

  • Edit category-title-link.hbs through docker image (docker -it imagename sh - \var\www\discourse\app\assets\javascripts\discourse\templates\components\category-title-link.hbs) :x:

  • Using JQuery $( “category-text-title” ).insertBefore( “category-logo.aspect-image” ) on theme editor, i’ve discovered that dont work :x:

  • Some css trics (flex, order, table) :x:

I’ve see in fivem forum, they changed the divs order but is nothing on css or if is, im not good enough to find where.

Im the wordpress guy, hope someone more experienced to help, thanks in advice :heart:

2

According to my primary research, the template name seems to be categories-only.hbs
Try changing that. I haven’t tried it but I think it should be the template you are intending to change.

Secondly, I wouldn’t recommend changing it in discourse. A better way is to override the template.

3

The category-title-link.hbs contains exactly what im trying to change, but when i edit, theres no changes, do you know if needs to rebuild the app or something like that when edit hbs files?

{{category-title-before category=category}}
<a class="category-title-link" href={{category.url}}>
  **<div class="category-text-title">**
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}

    <span class="category-name">{{dir-span category.name}}</span>
  </div>
  {{#if category.uploaded_logo.url}}
    {{cdn-img
      src=category.uploaded_logo.url
      **class="category-logo"**
      width=category.uploaded_logo.width
      height=category.uploaded_logo.height}}
  {{/if}}
</a>
4

If you edit ember code, you don’t need to restart the complete application, but make sure you hard reload the browser window so that you’re not seeing something the browser has cached.

5

After the changes, i’ve restart the docker container and restart the web server haha :sweat_smile:

I reloaded the page thousand of times and tried through incognito also

No changes :rofl:

6

Just confirm for me please, im editing in the correct directory ?

\var\www\discorse\app\assets\javascripts\discourse\templates\components

the “templates” folder sounds that just a templates and not what is live, but im not understand that kind of programming, so is just a guessing

7

Try deleting the tmp folder in the discourse root directory and then restart the server.

8

Anota%C3%A7%C3%A3o%202019-07-28%20071003
Anota%C3%A7%C3%A3o%202019-07-28%20071003906×289 22 KB

̶T̶h̶a̶t̶’̶s̶ ̶w̶h̶a̶t̶ ̶i̶m̶ ̶d̶o̶i̶n̶g̶

9

Why would you do that? This is a CSS change, through admin, customize.

11

Can you help me with this ? as i said i tried everything :rofl:

Some css trics (flex, order, table) :x

12

See Developing Discourse Themes & Theme Components.

13

Thank you Jay, but i’m not a developer, i know some things but as we can see, no enough to solve this, i really tried everything, including search for similiar topics here, no sucess :sleepy:

14

Hey Jay, thank you so much, i’ve did :heart_eyes:

If someone is looking for that solution, just do this:

Go to Settings > Admin > Customize > Select active theme > Edit CSS/HTML

In </body> field, put this code :

<script type="text/x-handlebars" data-template-name="components/category-title-link">
{{category-title-before category=category}}
<a class="category-title-link" href={{category.url}}>
    {{#if category.uploaded_logo.url}}
    {{cdn-img
      src=category.uploaded_logo.url
      class="category-logo"
      width=category.uploaded_logo.width
      height=category.uploaded_logo.height}}
  {{/if}}
  <div class="category-text-title">
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}

    <span class="category-name">{{dir-span category.name}}</span>
  </div>
</a>
</script>

And tada, its done :partying_face::tada::tada:

15

So you were a developer after all!