Headless Theme Configurations

1. Add Header

Go to Theme Options > Header. You can upload the logo and favicon from here. Also, you can upload CSS and JS files from here. Just go to the Header tab and upload your logo, favicon, CSS file and JS file.

2. Add Logo

1. Here is an example of a logo upload.

2. After uploading the logo, click on the “Save Changes” button and then check on Frontend and you will see the logo has been uploaded.

3. Like the logo, you can add a favicon, and CSS file and also upload theme fonts from the Logo, Favicon etc.

4 Logo custom height and width: If you don’t set any height and width for the logo, it will be rendered with its default size, but if you want to set custom height and width then you can set it from here.

The logo will be rendered with the custom width and height.

5. Select Header Page: If you want a top header or a section above the main header throughout the site, you can add that from the “Header Page”. Follow the steps below to add the top-header.

5.1 Create a page, here the page “Top Header” has been created, and you can give any name you want. And if you don’t want to create a new page and want to use any existing page, you can use that. But here in this example, we are going to create a new page.

After creating a new page, let’s add content to that page to show on the header. After clicking on + content button the popup will open as in screenshot, you can select any element according to your content on the top header, here we are going to use Regular Text Element.

Now you can add your content to show on the top header.

After adding the content click on “Save” at the top and your content will be saved.

Now select the Header top page in header page and click on “Save Changes”.

Now refresh the Frontend and you will see the content on the top.

3. Theme Fonts

You can upload fonts from here if you want to add custom fonts in your website. To upload custom fonts, please follow the below steps:

1. Upload font files.

2. To include the fonts in the theme, you must run a command below on headless setup with SSH access:
Command: node src/themebuilder.js

3. After running the command, you will get the message of “Theme updated successfully!!” and the fonts will be loaded now in your headless package.

4. by adding the code below, you should add your custom fonts.

@font-face {
    font-family: 'Cute Dino';
    src: url('/fonts/CuteDino.woff2') format('woff2'),
        url('/fonts/CuteDino.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

5. Theme Stylesheets: Now you will have to upload the CSS file from the Head assets. You can add multiple CSS files from here.

6. Now you must run the command below on headless setup with SSH access to load the stylesheet:
Command: node src/themebuilder.js
Now the website will load with the custom fonts.

4. Add Footer

1. Copyright

1.1. Go to Theme Options > Footer > Copyright and you will find an option to set copyright text.

Now refresh the frontend you will see the footer and copyright text.

1.2. If you want to add more content in the footer, you can add a footer page and can call the page in “Footer page” dropdown.

Once you select the Footer page, it’s content will be seen as the footer.

If you don’t want to add a default footer and just want the footer page to render as a footer, then you can remove the default footer by removing the copyright text from the footer and the default footer will disappear.

5. Add CSS/JS

1. Here you can add custom CSS and custom JS of header without uploading any CSS or JS files.

2. Here you can add custom CSS and custom JS of Footer without uploading any CSS or JS files.

6. Menu

1. To set the header menu for the headless theme go to the Theme options > Header > Menu and you will see the screen as seen in the screenshot below:

2. On the left side there is a list of pages and you can add the pages to the menu by drag them from the list and drop into the box on the left below the “Main Menu” text.

3. Submenu

3.1. To add submenu items in the main menu item, just click on the Plus Icon far right on the menu item and expand the main menu item by clicking on that Plus Icon, and you will see a box on the right to drop the submenu item for that particular main menu item.

3.2. If you want to add sub of submenu, then also you can add by the same way we added above submenu item.

4. Now refresh the front-end and you will see the menu.

7. Language menu

1. To add a language menu to your website, go to Theme options > Header > Language menu.

2. As you can see in the above screenshot, we do have “Drag Language” box, from there you can drag the languages and drop them into the Language menu.

3. Here in the below example some languages are defined, you can define languages in TYPO3 by following the documentation link – https://docs.typo3.org/m/typo3/tutorial-editors/12.4/en-us/Languages/Index.html

4. After adding the language from the “Drag language” box to the language menu, make sure you have checked the checkbox “Show Language Menu ?” and click on the “Save Changes” button and you will get the message of success and you will see the language menu in frontend and as we selected “Flag” in above screenshot, you will see flags in language menu, but you can try other options too like “Title”, “Title Flag” and “Flag Title” and check the frontend.

8. 404 Page:

1. 404 Page: By default when we enter the wrong URL, the 404 page will be seen like in the screenshot below.

2. But if you want to customize this page according to your theme, you will have an option to customize the 404 page. Go to Theme options > Other Pages and here you will have an option to select the page.

3. Let’s create a 404 page. As we already have seen about how to create a page in TYPO3, this is just a screenshot with the created page and added content to the 404 page.

4. Now go to t3headless > Theme options > Other Pages and select the page “404” and then click on the “Save Changes” button.

5. And try with any wrong URL in the frontend and you will get the custom 404 page.

Now let’s see about the “Elements”. Check below to know about the Elements tab.

Documentation

How can we help you?