I am creating a template in it I want to know if we can css in html and hubl file or not or css will have to create separate file I am not creating template with theme Just building the template alone via HubSpot prebuild module.
Hi @MHussain8,
of course you can create a “hardcoded” template with HTML, CSS, JS and just prebuild modules. But it’s definetely not recommended and not a “good practise”. The most important part: The template has to be part of a theme - otherwise you won’t be able to select it. Since you don’t want to use a “full-fletched” theme, you can simply create a new theme and select “blank” as starting point. This will give you the basic theme structure and files and let you select your custom theme.
If you want to write everything in one file you can create a new (page) template in the theme which by default looks like this:
<!--
templateType: page
isAvailableForNewContent: true
label: Standalone
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
{% if content.html_title %}<title>{{ content.html_title }}</title>{% endif %}
<meta name="description" content="{{ content.meta_description }}">
{% if brand_settings.primaryFavicon.src %}
<link rel="shortcut icon" href="{{ brand_settings.primaryFavicon.src }}" />
{% endif %}
{{ standard_header_includes }}
</head>
<body>
{% dnd_area "dnd_area"
label="Main section"
%}
{% end_dnd_area %}
{{ standard_footer_includes }}
</body>
</html>
This code contains every needed hubl code(standard_header_includes & standard_footer_includes). Everything else is optional and completly up to you.
So if you want to write custom CSS and JS you can write it like this:
<!--
templateType: page
isAvailableForNewContent: true
label: Standalone
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
{% if content.html_title %}<title>{{ content.html_title }}</title>{% endif %}
<meta name="description" content="{{ content.meta_description }}">
{% if brand_settings.primaryFavicon.src %}
<link rel="shortcut icon" href="{{ brand_settings.primaryFavicon.src }}" />
{% endif %}
{{ standard_header_includes }}
<style>
{# your custom CSS #}
</style>
</head>
<body>
{% dnd_area "dnd_area"
label="Main section"
%}
{% end_dnd_area %}
{{ standard_footer_includes }}
<script>
{# custom JS #}
</script>
</body>
</html>
If you don’t want to use drag&drop (I don’t recommend this) you can write your custom layout instead of the dnd_area like this
<!--
templateType: page
isAvailableForNewContent: true
label: Standalone
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
{% if content.html_title %}<title>{{ content.html_title }}</title>{% endif %}
<meta name="description" content="{{ content.meta_description }}">
{% if brand_settings.primaryFavicon.src %}
<link rel="shortcut icon" href="{{ brand_settings.primaryFavicon.src }}" />
{% endif %}
{{ standard_header_includes }}
<style>
{# your custom CSS #}
</style>
</head>
<body>
<header>
...
</header>
<div class="">
...
</div>
<footer>
...
</footer>
{{ standard_footer_includes }}
<script>
{# custom JS #}
</script>
</body>
</html>
it’s completly up to you.
If you want to use only default modules you can place them like this into the template:
<!--
templateType: page
isAvailableForNewContent: true
label: Standalone
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
{% if content.html_title %}<title>{{ content.html_title }}</title>{% endif %}
<meta name="description" content="{{ content.meta_description }}">
{% if brand_settings.primaryFavicon.src %}
<link rel="shortcut icon" href="{{ brand_settings.primaryFavicon.src }}" />
{% endif %}
{{ standard_header_includes }}
<style>
{# your custom CSS #}
</style>
</head>
<body>
<header>
...
</header>
<div class="bodyWrapper">
<div class="ButtonWrapper">
{% module "module_17036661072543" path="@hubspot/button", label="button.module" %}
</div>
</div>
<footer>
...
</footer>
{{ standard_footer_includes }}
<script>
{# custom JS #}
</script>
</body>
</html>
you get this snippet by right-clicking on a module(in the @hubspot-folder) and selecting “copy snippet”. This works with CSS, JS and otherfiles aswell.
Tipp:
If you’re planning to create multiple pages create a base/layout HTML file which will contain the header/footer parts that will be the same throughout all templates and include the template_css function in the header like
<!--
templateType: none
-->
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
<head>
<meta charset="utf-8">
{% if page_meta.html_title %}
<title>{{ page_meta.html_title }}</title>
{% endif %}
{% if branding_favicon %}
<link rel="shortcut icon" href="{{ branding_favicon }}" />
{% endif %}
<meta name="description" content="{{ page_meta.meta_description }}">
{{ require_css(get_asset_url("../../css/main.css")) }}
{% if template_css %}
{{ require_css(get_asset_url(template_css)) }}
{% endif %}
{{ require_css(get_asset_url("../../css/theme-overrides.css")) }}
{{ standard_header_includes }}
</head>
<body>
<div class="body-wrapper {{ builtin_body_classes }}">
{% block header %}
{% global_partial path="../partials/header.html" %}
{% endblock header %}
<main id="main-content">
{% block body %}
{% endblock body %}
</main>
{% block footer %}
{% global_partial path="../partials/footer.html" %}
{% endblock footer %}
</div>
{% if template_js %}
{{ require_js(get_asset_url(template_js)) }}
{% endif %}
{{ standard_footer_includes }}
</body>
</html>
this code is from the “Growth” Theme of HubSpot but contains the template_css and template_js parts.
Once created such a base file you can go into your template and write it like:
<!--
templateType: page
isAvailableForNewContent: true
label: Standalone page
-->
{% set template_css = "../../css/templates/customCSS.css" %}
{% extends "../layouts/base.html" %}
...
(the paths may vary)
hope this helps
best,
Anton
If you have a source code of any template kindly share with me
thank you