# Advanced topics # Captive Portal HTML/CCS code example ## Overview Captive Portal templates in GATE can be customized in two ways: - Through the GATE GUI interface - By directly modifying the HTML/CSS code of the template This page demonstrates the HTML/CSS implementation of the Hotel Template for captive portals. ## Hotel Template Preview **Live Template:** [Captive Portal Hotel Template](https://gate-dev.zequenze.com/page/template-transparent_column-hotel1/) [![Hotel Template Screenshot](https://docs.zequenze.com/uploads/images/gallery/2026-02/0XR9ZyLvZwLW8yuO-tmpjrbb2if0.jpg)](https://docs.zequenze.com/uploads/images/gallery/2020-05/lffsAOJ5v3X0Thki-hotel1-little.jpg) [![hotel1-little.jpg](https://docs.zequenze.com/uploads/images/gallery/2026-02/Kcmw7m6jCGFXLuu0-tmp7326e37u.jpg)](https://docs.zequenze.com/uploads/images/gallery/2020-05/lffsAOJ5v3X0Thki-hotel1-little.jpg) [![hotel1-little.jpg](https://docs.zequenze.com/uploads/images/gallery/2026-02/234BOMKZWSempwAJ-tmpxphxwfg1.jpg)](https://docs.zequenze.com/uploads/images/gallery/2020-05/lffsAOJ5v3X0Thki-hotel1-little.jpg) [![hotel1-little.jpg](https://docs.zequenze.com/uploads/images/gallery/2026-02/H67r1TkBIBaXlnCQ-tmpmuddgw0l.jpg)](https://docs.zequenze.com/uploads/images/gallery/2020-05/lffsAOJ5v3X0Thki-hotel1-little.jpg) ## Complete HTML/CSS Code Below is the complete HTML template code for the Hotel captive portal: ```html {% extends "page/base.html" %} {% load admin_static media i18n %} {% block extrastyle %} {% if page.variables.favicon %} {% endif %} {% endblock %} {% block body_tag %} {% endblock %} {% block main %} {% include "includes/social_detect.html" %}

{{ page.variables.title|default:'Lorem ipsum dolor'|safe }}
{{ page.variables.sub_title|default:'Lorem ipsum dolor'|safe }}

{% csrf_token %} {% if next %} {% endif %} {% if page.variables.register_form_template %} {% include page.variables.register_form_template %} {% else %}

Selecciona tu género

Agrega tu email y nombre completo

{% endif %} {% if social_auth %}

O usa tus redes sociales

{% if facebook == True %} Facebook {% endif %} {% if google == True %} Google {% endif %} {% if twitter == True %} Twitter {% endif %} {% if linkedin == True %} LinkedIn {% endif %} {% if instagram == True %} Instagram {% endif %} {% if yahoo == True %} Yahoo {% endif %}

(ver abajo)
{% endif %}
{% if page.variables.footer_text %}
{% if page.variables.footer_logo %} {% endif %}

{{ page.variables.footer_text|default:'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor.'|safe }}

{% endif %}
{{ page.content|safe }} {% endblock %} {% block bottom_scripts %} {% if page.variables.welcome_url %} {% endif %} {% if social_auth %}{% include "includes/social_auth.html" %}{% endif %} {% if uam_api %} {% include "includes/uam_default.html" %} {% endif %}