Nombre de la categoría después de la imagen de la categoría

Soporte
1

¡Hola a todos!

Antes de venir a pedir ayuda, he probado de todo, pero hasta ahora sin éxito :sweat_smile:

Estoy intentando poner el nombre de la categoría después de la imagen de la categoría, como en el foro de FiveM (https://forum.fivem.net)

shit
shit1202×423 48.5 KB

Ya intenté lo siguiente:

  • Editar category-title-link.hbs a través de la imagen de Docker (docker -it imagename sh - \var\www\discourse\app\assets\javascripts\discourse\templates\components\category-title-link.hbs) :x:

  • Usar JQuery $( “category-text-title” ).insertBefore( “category-logo.aspect-image” ) en el editor de temas; descubrí que no funciona :x:

  • Algunos trucos de CSS (flex, order, table) :x:

Vi en el foro de FiveM que cambiaron el orden de los divs, pero no hay nada en el CSS o, si lo hay, no soy lo suficientemente bueno para encontrarlo.

Soy el experto en WordPress; espero que alguien con más experiencia pueda ayudar. Gracias de antemano :heart:

2

Según mi investigación principal, el nombre de la plantilla parece ser categories-only.hbs
Intenta cambiar eso. No lo he probado, pero creo que debería ser la plantilla que estás intentando modificar.

En segundo lugar, no recomendaría cambiarlo en Discourse. Una mejor manera es sobrescribir la plantilla.

3

El archivo category-title-link.hbs contiene exactamente lo que intento cambiar, pero al editarlo no hay ningún cambio. ¿Sabes si es necesario reconstruir la aplicación o hacer algo similar al editar archivos .hbs?

{{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

Si editas código de Ember, no necesitas reiniciar la aplicación completa, pero asegúrate de recargar manualmente la ventana del navegador para no ver algo que el navegador haya almacenado en caché.

5

Después de los cambios, reinicié el contenedor de Docker y también el servidor web, jaja :sweat_smile:

Recargué la página miles de veces y también lo probé en modo incógnito.

Sin cambios :rofl:

6

Por favor, confírmame, ¿estoy editando en el directorio correcto?

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

La carpeta “templates” suena como si solo contuviera plantillas y no lo que está en vivo, pero no entiendo ese tipo de programación, así que solo estoy adivinando.

7

Intenta eliminar la carpeta tmp en el directorio raíz de Discourse y luego reinicia el servidor.

8

Anotación%202019-07-28%20071003
Anotación%202019-07-28%20071003906×289 22 KB

Eso es lo que estoy haciendo

9

¿Por qué harías eso? Esto es un cambio de CSS, a través de la administración, personalizar.

11

¿Puedes ayudarme con esto? Como dije, lo intenté todo :rofl:

Algunos trucos de CSS (flex, order, table) :x

12

Vea Developing Discourse Themes & Theme Components.

13

Gracias, Jay, pero no soy desarrollador; sé algunas cosas, pero como puedes ver, no es suficiente para resolver esto. Lo intenté todo, incluso busqué temas similares aquí, sin éxito :sleepy:

14

¡Hola Jay, muchas gracias, lo he hecho :heart_eyes:

Si alguien busca esa solución, solo haz esto:

Ve a Configuración > Administración > Personalizar > Seleccionar tema activo > Editar CSS/HTML

En el campo </body>, pega este código:

<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>

¡Y listo, está hecho! :partying_face::tada::tada:

15

¡Así que al final sí eras desarrollador!