Sign in

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

  • This topic has 12 replies, 3 voices, and was last updated 2 weeks ago by .
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #6252
    vmunix

    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

    #6260
    Tomasz Dziuda

    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.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6265
    vmunix

    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.

    Attachments:
    #6267
    vmunix

    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.

    #6268
    Bob

    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.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6269
    vmunix

    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.

    Attachments:
    #6271
    Bob

    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.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6272
    vmunix

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

    Attachments:
    #6274
    Bob

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

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6275
    vmunix
    This reply has been set as private.
    #6277
    vmunix
    This reply has been set as private.
    #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:

    screenshot-2021-09-04-at-07.20.14

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6281
    vmunix

    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

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Head section in new custom theme using VMware Clarity design does not work’ is closed to new replies.