Yasuoxd

Problema resolvido.

Solução :

Foi trocado a linha do input que puxava somente o nome das vocations, por essa.

 
OBS : Tanto na tela de criação de char, quando na criação de conta foi alterado e posto esse código.


 
<div class="vocations"> {% for key, sample_char in config.character_samples %} <div class="vocation"> <input type="radio" class="vocation__radio-item" name="vocation" id="vocation{{ key }}" value="{{ key }}" {% if vocation is not null and vocation == key %} checked="checked"{% endif %}> <label for="vocation{{ key }}" class="vocation-label"> <img class="vocation-label__img" src="{{ config['vocation_images'][key] }}" alt="{{ config['vocations'][key] }}"/> <span class="vocation-label__name">{{ config['vocations'][key] }}</span> </label> </div> {% endfor %} </div> E o código CSS para ficar certinho usado foi esse.
 
.vocations { display: flex; flex-direction: row; flex-wrap: wrap; } .vocation { flex: 50%; text-align: center; } .vocation input[type=radio] { display: none; } .vocation__radio-item:checked +.vocation-label .vocation-label__name { color: red; } .vocation-label__img { max-width: 100%; } .vocation-label__name { display: block; margin-top: 20px; } .vocation-label:hover .vocation-label__name, .vocation-label:active .vocation-label__name, .vocation-label:focus .vocation-label__name { color: red; }