We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Head section in new custom theme using VMware Clarity design does not work

September 2, 2021 at 8:18 pm #6252

[anonymous]

Hi All,

I am new to Publii and am pretty impressed with the capabilities. I want to migrate my blog site to Publii. Since I have a custom theme for my personal blog site, I need to create a new custom theme for Publii as well. The theme is based on VMware Clarity Design system (https://clarity.design/)

While creating the theme, it seems however hard I try, I cannot make the Head section of the page appear in the theme. It simply does not work. Any help in create a theme from scratch using a new theming system will help. Or may be why it is not working?

Thanks

September 3, 2021 at 11:24 am #6260

[anonymous]

Hi,

Please review our free themes and check how they are built – or even use them as a base for your theme 🙂

I suppose that you are not loading partial with your header section what leads to a situation where your page template is not loading the website top part.

September 3, 2021 at 3:59 pm #6265
[anonymous]
Hi,

I tried the following:
1. Take an existing theme and customize it.
2. Build a new theme from the base template
3. Build a new theme from scratch (barebone HTML)
On the served page, I can the header is included (using developer tools) but it is not rendered correctly. The only change I make is to remove all the default CSS and replace that with the Clarity CSS files. Also, the structure of the components as per the Clarity guidelines.

Observation: In all the Publii themes, the menu options are displayed in the navbar section. In the Clarity system, the main level menu is defined in the Header section itself. The header allows for menu items and a search toolbar.

Though this is true, I have tried without any menu bar also. It seems the Header section is present as is in the rendered HTML but they are not shown at all. Highly confused.

I have built my own theme using Clarity in Hexo and Hugo static site generators. So, they are fine. Also, that means my structure of the website works fine (as can be seen in my blog post https://sajaldebnath.com ). The theme in the website is completely built from scratch using Hugo and SSG.

Question: Does Publii use any special configuration that is overlapped with the custom theme and CSS?

Attached are the screenshots of the rendered page, actually how it should look, and the header, head, index files.

Would really appreciate your time and help. I really want to use Publii and am ready to pay for a theme. But the theme I want needs to be customized. Hence I am building one and it should be easy.
September 3, 2021 at 4:03 pm #6267

[anonymous]

Another point, Clarity comes with multiple CSS files. So, I have copied all the files in the CSS folder and then linked them explicitly in the Head section above the linked style.css file. In the main.css file, I have tried keeping it blank / putting the main CSS configuration in that. Nothing works.

So, the header is actually shown( the text) but the visual is not rendered.

September 3, 2021 at 5:22 pm #6268
Bob
[anonymous] wrote:

I have copied all the files in the CSS folder

If you’ve copied the CSS files to the following location: (Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME ▸ assets ▸ css) and linked them as follow:
```
<link rel="stylesheet" href="{{css "style.css" }}">
<link rel="stylesheet" href="{{css "style1.css" }}">
<link rel="stylesheet" href="{{css "style2.css" }}">
```
then it must work.
September 3, 2021 at 5:28 pm #6269

[anonymous]

Thank you for your reply.

I did that and still, it does not work. It can be seen from the Head file.

I changed my site folder location though. Instead of the default site folder location (documents) it is now in a different location. But it should not be a problem as other themes are working from the changed location.

it is only the custom theme I am building has this problem.

As seen in the screenshot. All the files are there in the Themes –> Theme–> assests–> css folder and they are linked in head section.

This is really puzzling for me.

September 3, 2021 at 5:34 pm #6271

Bob

[anonymous] wrote:

All the files are there in the Themes –> Theme–> assests–> css folder and they are linked in head section.

The Documents ▸ ⁨Publii⁩ ▸ Themes ▸ theme location is only a container for all downloaded themes. When you set up a new site, the default theme (or any other you assign in Site Settings) is copied to the new site location: Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME ▸ assets ▸ css

So, you should copy all your CSS files to this new location.

September 3, 2021 at 5:39 pm #6272

[anonymous]

I did. The sites folder in the default location ( Documents) is empty and everything is served from the new location. Attached screenshot shows that.

September 3, 2021 at 5:45 pm #6274

Bob

It’s correct. Include a full site backup (private reply). I will look at this tomorrow morning.

September 3, 2021 at 5:56 pm #6275

[anonymous]

This reply has been marked as private.

September 3, 2021 at 5:57 pm #6277

[anonymous]

This reply has been marked as private.

September 4, 2021 at 5:26 am #6278

Bob

Hi Vmunix,

I just checked it and the way you embedding the CSS files is ok. I’m not familiar with VMware Clarity Design, but I’ve noticed that your installation is missing CSS files that stylize your template.

I can’t find in all your CSS files any CSS classes used in the core .hbs files; for example, to see which ones, check out the screenshot below:

September 4, 2021 at 7:20 am #6281

[anonymous]

Hi Bob,

Thank you so much for finding the issue. I was so sure of the included CSS files I did not check whether the classes actually exists or not. The Clarity design system changed their packaging and I was including the wrong set of files. Now it’s fine and working great after setting the correct CSS files.

I will be able to develop the rest of the themes from here onwards and looking forward to using Publii.

Again, thank you so much for your time and effort in helping me out on this.

Thanks

Sajal Debnath