Customize Kobotoolbox Logo on the web portal own servers and edit email templates

alexgmuriithi · July 29, 2020, 11:34am

Is it possible to modify the Kobotoolbox Logo, e.g I have installed it on my own server I would like to modify the logo, and also email templates that are sent to the users during account creation.

Kal_Lam · July 29, 2020, 12:26pm

Hi @alexgmuriithi,

Would you mind having a look at the post discussed previously. It should have the answer to your query:

Have a great day!

alexgmuriithi · July 29, 2020, 3:54pm

The answer you’ve provided is for the form but I’m asking about the web app that we install using Kobo install on our own server. Check out the image I attached it’s the login page of the web app.

stephanealoo · July 29, 2020, 4:52pm

Hi Alex,
This also applies for the web app too.
Stephane

omerkhoshnaw · December 31, 2020, 3:50am

I was looking for something similar, and just found a solution. Like the previous comments say, the project is opensource!

A quick and easy way would be to replace/download the image files in your server directory, and replace it with the photo name currently being used in kobo.

You have 2 directories to modify.

/home/kobo/kobo-docker/.vols/static/kpi/compiled

and

/home/kobo/kobo-docker/.vols/static/kpi/img

you can change these 3 files photo files,

signup_photo.jpg
kobologoS.svg — notice it is an .svg file and this is for the mobile version after you login the page
kobologo.svg – main logo in the loginpage and registration page

wallpaper takes effect in the first directory. Remember to use root privileges.

you can directly download and replace the name using the following command in your server terminal, download photo from a direct weblink

curl -o kobologo.svg weblink/picture.svg

a quick way to check if your photo is downloaded you can check it in your browser, for example:

kf.yourdomain/static/compiled/filename.jpg

and

kf.yourdomain/static/img/filename.svg

Hope it helps, let me know!

Omer

Kal_Lam · December 31, 2020, 5:49am

Welcome to the community @omerkhoshnaw! Thank you for sharing your experience and solutions with the community. Expecting the same in the upcoming days!

alexgmuriithi · January 18, 2021, 8:17am

This works like a charm … but it didn’t update the kobotoolbox logo in Enketo Express form entry do you have the solution to this.

rajesh3034 · May 17, 2021, 2:08am

Hey Can you please tell me how to change title of app and also i want to change some content in registration page?

rajesh3034 · May 15, 2021, 4:30pm

I have installed kobotoolbox in my own server now i want to change the title of website(not form) also i want to change content of registration form
please help me to resolve it

I want to change following contents

KoBoToolbox is an integrated set of tools for building forms and collecting interview responses. It is built by the Harvard Humanitarian Initiative for easy and reliable use in difficult field settings, such as humanitarian emergencies or post-conflict environments

nejobest · September 9, 2021, 6:49pm

We’re you able to resolve this issue please? I have the same challenge

Kal_Lam · September 10, 2021, 5:08am

Welcome to the community, @nejobest! Are you on a self hosted server or are you on one of the servers hosted publicly (OCHA or HHI) by the KoBoToolbox?

nejobest · September 10, 2021, 7:52am

Hi Kal_Lam,

Thanks for asking. I’m on self hosed.

Josh · September 10, 2021, 8:46pm

Hi @nejobest, you can try updating the template:

github.com

kobotoolbox/kpi/blob/master/kpi/templates/registration/registration_form.html

{% extends "registration.html" %} {% load static %}
{% load i18n %}

{% block content %}
<form action="{% url 'set_language' %}" method="post" class="language-switcher">
  {% csrf_token %}
    <input name="next" type="hidden" value="{{ redirect_to }}" />
    <select name="language" onchange="this.form.submit()">
        {% get_current_language as LANGUAGE_CODE %}
        {% get_available_languages as LANGUAGES %}
        {% get_language_info_list for LANGUAGES as languages %}
        {% for language in languages %}
            <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>
                {{ language.name_local }}
            </option>
        {% endfor %}
    </select>
    <input type="submit" value="Go" class="hidden" />
</form>

This file has been truncated. show original

nejobest · September 11, 2021, 4:52am

Thanks alot Josh.

Please where can I modify the default email sent after signup and the website title page. Thank youi
![activation email|690x262](upload://u7djIYmpnEjLR4fei6l7A10Hklg.png
.

nejobest · September 11, 2021, 5:18am

Please any help on how I can locate this path in the attached? : [kobotoolbox/kpi/blob/master/kpi/templates/registration/registration_form.html

Josh · September 13, 2021, 4:31pm

Hi @nejobest you will need to edit the KPI code, rebuild the image and use that updated image in your deployment. As a temporary solution, you could go into the KPI container and change it there

SantiTamariz · October 1, 2021, 3:55pm

Hi can you help me making some changes in my server installation, I’m changing the image in the code but how I run it to apply the changes
Thank you

Amanuel · February 3, 2022, 7:00pm

Have you able to solve this? Please I need help if you do

javib94 · July 19, 2022, 6:18pm

Since my kobotoolbox installation is behind a nginx server, I found easier to configure a proxy_pass into my nginx server, something like:

       location /static/compiled/kobologo.svg{
           proxy_pass              http://127.0.0.1/MyOrganizationLogo.png;
        }

        location /static/kobologo.svg {
           proxy_pass              http://127.0.0.1/MyOrganizationLogo.png;
        }

Maybe it can be useful for someone.

Kal_Lam · July 20, 2022, 1:51am

Thank you, @javib94, for sharing this with the entire community. It should be very helpful for those searching for the same.