# Cambiar destino del enlace del logotipo

**URL:** <https://meta.discourse.org/t/change-destination-of-logo-link/152001>\
**Category:** Support\
**Created:** [19 Mayo, 2020 21:23 UTC](https://meta.discourse.org/t/change-destination-of-logo-link/152001 "2020-05-19T21:23:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [19 Mayo, 2020 21:23 UTC](https://meta.discourse.org/t/change-destination-of-logo-link/152001/1 "2020-05-19T21:23:29Z")

</div>

Tengo un sitio donde varios grupos tienen sus propias categorías, y existe el deseo de que estas categorías lleven la marca del logotipo del propietario del grupo.

Para cada categoría hay un código similar a este:

```css
.category-org .d-header {
    color: white !important;
    background-color: white !important;
    background-image: none !important;
    background:white !important;
}

.category-org #site-text-logo {
  content: url("/uploads/default/original/1X/a9d7d4f215f2013907002ffe13456d3f90a7f108.png") !important;
  display: inline-block;
  height: 50px;
  font-size: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

```

El truco es que al hacer clic en el logotipo, te llevan a la página de inicio del sitio en lugar de a la categoría. Esto se resuelve (en su mayoría) con lo siguiente:

```plaintext
<script type="text/javascript">
$(document).ready(function() {
  $(".title #site-text-logo").click(function(event){

    // no navegar a la URL base
    event.preventDefault();
    
    // obtener la categoría activa desde el id del div
    div = $("body[class*='category-']")[0];

    // extraer el slug de la clase que comienza con category-
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // establecer el href como la URL del slug
    document.location = "/c/" + slug + "/";
  })
});
</script>

```

Si haces clic en el logotipo ya sea en una página de categoría o de tema, vas a la página de la categoría. ¡Genial!

**PERO** si haces clic en el pequeño espacio entre el logotipo y la parte inferior de esa cabecera, te llevan a la página de inicio en lugar de a la página de la categoría. Es prácticamente imposible distinguir cuándo obtendrás una acción u otra. Cuando pasas el ratón por encima de la URL en la parte inferior de Chrome, muestra la página de inicio del sitio en lugar de la URL de la categoría, independientemente de a dónde vayas a ir.

(He utilizado [Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588) para agregar un enlace a la página de inicio. No creo que tenga nada que ver con el comportamiento anterior.)

Y no puedo compartir el sitio porque las categorías por unidad son visibles solo para los miembros del grupo.

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [19 Mayo, 2020 22:39 UTC](https://meta.discourse.org/t/change-destination-of-logo-link/152001/2 "2020-05-19T22:39:54Z")

</div>

Creo que lo que está sucediendo es que haces clic en una pequeña parte del enlace que contiene `#site-text-logo`.

La estructura es: `div.title a #site-text-logo` y estás capturando los clics específicamente en `#site-text-logo`, pero no en el `a` que lo envuelve.

Probablemente puedas usar `event.preventDefault();` en el enlace `.title a` dentro de tu JS, o tal vez probar `.title a {pointer-events: none;}` en el CSS.

---

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [19 Mayo, 2020 23:12 UTC](https://meta.discourse.org/t/change-destination-of-logo-link/152001/3 "2020-05-19T23:12:52Z")

</div>

¡Eres genial! Lo agradezco mucho. Ayúdame a resolver un problema de clave duplicada en PostgreSQL, seguro, pero solo el CSS más sencillo tiene sentido para mí y apenas entiendo la sintaxis de JavaScript.

### PERO ESPERA.

Por otro tema totalmente unrelated, acabo de hacer que, en el sitio Kanban de mi esposa, al hacer clic en el logotipo del sitio se vaya a la categoría TODO. Creé [un componente de tema que permite establecer la página de inicio en una URL arbitraria](https://github.com/pfaffman/discourse-allow-arbitrary-homepage). Lo hice así:

```plaintext
<script type="text/discourse-plugin" version="0.8">
    const { setDefaultHomepage } = require('discourse/lib/utilities');
    if (settings.home_url_override) {
      setDefaultHomepage(settings.home_url_override);
    }
</script>

```

¿Quizás debería hacer algo así en su lugar? Aunque no estoy seguro de cómo saber qué categorías quieren que se reasigne su página de inicio. ¿Quizás una configuración del sitio con un array de IDs de categorías? Creo que puedo buscar en Google cómo obtener la categoría actual y verificar si ese ID está en un array dentro de una configuración del sitio.

EDIT: Hmm, pero no sé cómo, dentro de un `<script type="text/javascript">`, determinar cuál es la categoría de la . . . página actual? . . . para cambiar selectivamente el `setDefaultHomepage`.

¿Eso parece más fácil?

### Pero volvamos a la solución original

> [@awesomerobot](#):
>
> Creo _que_ lo que está ocurriendo es que estás haciendo clic en una pequeña porción del enlace que contiene `#site-text-logo` ¿?

Creo que eso suena correcto para mí, pero eso no significa mucho.

Creo _que_ es que de alguna manera el `<h1>` hace lo correcto, pero que el `<a>` va a la página de inicio del sitio.

> [@awesomerobot](#):
>
> Probablemente puedas `event.preventDefault();` en el enlace `.title a` dentro de tu JS,

Soy un cavernícola. No sé muy bien qué significa eso. Ya hay algunas cosas en el JavaScript que parecen bastante similares. ¿Debería crear otro `$(document).ready(function() {` completo? ¿O añadir simplemente otro ` $(".title #site-text-logo").click(function(event){` de alguna manera ahí?

Lo que intenté no pareció hacer nada diferente.

> [@awesomerobot](#):
>
> o quizás probar `.title a {pointer-events: none;}` en el CSS?

Entendí un poco mejor este último y hice lo siguiente:

```css
/* mantener la pequeña porción cerca del logotipo sin que enlace a la página de inicio */
.title a {pointer-events: none;} 

```

¡Esto sí cambió algo! Y veo que funcionó porque ahora ninguna parte del logotipo hace nada.