themesDir ="../.." causing only a red page to load

[Sidra-Kazmi]

Hi there, in the config.toml the themesDir = "../.." seems to be causing confusion or probably I am confused. When I try to test locally, only a red page displays. Also, there is an error when starting the Hugo server
On Windows it says;
Error: module "hugo-scroll" not found; either add it as a Hugo Module or store it in "C:\\".: module does not exist

On Mac it errors out
Error: module "hugo-scroll" not found; either add it as a Hugo Module or store it in "/Users/Amr".: module does not exist

And if I place the Hugo Module which I think is referring to the theme, on the C: drive on Windows and on /Users/Amr on Mac, it doesn't give any error but then there is a blank red page.

I also tried putting in the path where the hugo-scroll theme is placed in my website folder and though there are not errors there is only this blank red page. themesDir = "C:\\Hugo\\makeyourfuture\\themes\\"

Below is what I have in the config.toml file.

baseURL = "https://createyourfuture.today/"
languageCode = "en"
defaultContentLanguage = "en"
title = "Create Your Future Today"

#This is a "one page"-website, so we do not need these kinds of pages...
disableKinds = ["section", "taxonomy", "term", "RSS", "robotsTXT"]

theme = "hugo-scroll"
themesDir = "../.."
# themesDir = "C:\\Hugo\\makeyourfuture\\themes\\"   <-- I tried this one as well, didn't work

# The "title" of your website
# title = "Jane Doe - Nutrition Coach & Chef Consultant"

[params]
    # A "copyright"-line to be added at the bottom of the page.
    # Hint: Markdown is supported in here as well. So you may e.g. add a link to your legal imprint-page.
    copyright = "© Sidra Kazmi"

    # The "description" of your website. This is used in the meta data of your generated html.
    description = "Nutrition Coach & Chef Consultant"

    # The path to your "favicon". This should be a square (at least 32px x 32px) png-file.
    favicon = "images/favicon.png"

    # These "images" are used for the structured data templates. This will show up, when
    # services like Twitter or Slack want to generate a preview of a link to your site.
    # See https://gohugo.io/templates/internal#twitter-cards and
    # https://gohugo.io/templates/internal#open-graph.
    images = ["images/cover-image.jpg"]

    # Another "title" :-). This one is used as the site_name on the Hugo's internal
    # opengraph structured data template.
    # See https://ogp.me/ and https://gohugo.io/templates/internal#open-graph.
    title = "Jane Doe - Nutrition Coach & Chef Consultant"

    # This theme will, by default, inject a design-by-line at the bottom of the page.
    # You can turn it off, but we would really appreciate if you don’t :-)
    # hidedesignbyline = true

    [params.meta]
        keywords = "some, keywords, for, seo, you, know, google, duckduckgo, and, such"
`
```

[janraasch]

Hi @Sidra-Kazmi, thank you for getting in touch 😁.

in the config.toml the themesDir = "../.." seems to be causing confusion

You are right, I'll remove this from the config. (See fdcb6ab ✅)

The only reason this configuration is set on the exampleSite included here, is such that, while developing the theme I can simply run hugo server --source=exampleSite inside the base directory of this repository, and then have the exampleSite pick up the theme from the base of this repo.

Now to actually solve your problem 😇:

If understood your setup correctly, you have generated a hugo site in C:\Hugo\makeyourfuture (maybe via running hugo new site makeyourfuture). Then you can simply add this theme to the themes directory under C:\Hugo\makeyourfuture, e.g. via adding it as a git-submodule git submodule add https://github.com/janraasch/hugo-scroll.git themes/hugo-scroll. However you choose to do it, you should then have the contents of this repo under C:\Hugo\makeyourfuture\themes\hugo-scroll.

If that is the case, you can then copy the contents of the exampleSite directory to your C:\Hugo\makeyourfuture-directory.

TLDR; 🕺🏻

From what you said, this is where you then probably got stuck. So just go ahead and remove the themesDir = "../.." -line from the config.toml. That should do the trick.

Let me know, if this helps 😊.

[Sidra-Kazmi]

Hello Jan, thanks for getting back to me. It seems like something went wrong with the new code. When I try to render the sample website, I only a red bank page like below when I try to copy the config.toml file into my websites config.toml file.

I have tried this on 2 [Windows 10] machines and 2 Mac's and each time I took one fresh machine that never had Hugo or any other template just because I didn't want caching if that is even a thing in Hugo. Anyways I did this so that I can be sure that I am not missing anything. Btw, I tried other themes and their example sites and all rendered properly.

Here is the contents of the config.toml file of my website.

`baseURL = "https://example.com"

# This is a "one page"-website, so we do not need these kinds of pages...
disableKinds = ["section", "taxonomy", "term", "RSS", "robotsTXT"]

defaultContentLanguage = "en"

# The name of this wonderful theme ;-).
theme = "hugo-scroll"

# The "title" of your website
title = "Jane Doe - Nutrition Coach & Chef Consultant"

[params]
    # A "copyright"-line to be added at the bottom of the page.
    # Hint: Markdown is supported in here as well. So you may e.g. add a link to your legal imprint-page.
    copyright = "© Jane Doe"

    # The "description" of your website. This is used in the meta data of your generated html.
    description = "Nutrition Coach & Chef Consultant"

    # The path to your "favicon". This should be a square (at least 32px x 32px) png-file.
    favicon = "images/favicon.png"

    # These "images" are used for the structured data templates. This will show up, when
    # services like Twitter or Slack want to generate a preview of a link to your site.
    # See https://gohugo.io/templates/internal#twitter-cards and
    # https://gohugo.io/templates/internal#open-graph.
    images = ["images/cover-image.jpg"]

    # Another "title" :-). This one is used as the site_name on the Hugo's internal
    # opengraph structured data template.
    # See https://ogp.me/ and https://gohugo.io/templates/internal#open-graph.
    title = "Jane Doe - Nutrition Coach & Chef Consultant"

    # This theme will, by default, inject a design-by-line at the bottom of the page.
    # You can turn it off, but we would really appreciate if you don’t :-)
    # hidedesignbyline = true

    [params.meta]
        keywords = "some, keywords, for, seo, you, know, google, duckduckgo, and, such"

Although, if I do run the Hugo Server --themesDir ../.. from within /Hugo-Scroll/exmpleSite folder, it renders correctly.

Looking forward to heard from you.

[janraasch]

Hi, no worries. It looks like you do not have any homepage content on your site.

To get started you could copy the content/_index.md-file and the content/homepage-folder from the exampleSite to your local content-folder. Then, to make the header background image appear, also copy the contents of the static-folder from the exampleSite to your local static-folder. This should get you up and running.

Let me know if this helps.

PS:

This is also explained on the README, see https://github.com/janraasch/hugo-scroll#content--structure.

[Sidra-Kazmi]

Hello Jan, thanks a lot for that tip, my week long hold is finally over and your template is coming so beautifully. I can now update the content and the pics as well. I have 3 questions I am posting in the below screenshot.
Also what else should I copy from the themes folder to my website's directory folder?

[janraasch]

Hi @Sidra-Kazmi

thanks a lot for that tip, my week-long hold is finally over and your template is coming so beautifully. I can now update the content and the pics as well.

That's great. I'm glad I could help 😸 .

I saw that you closed the issue a few hours ago. I think those last three questions are quite different than what you originally started with (subject: »themesDir ="../.." causing only a red page to load
«), so we could have moved this into a new issue making this easier to find for others and keeping the issue at hand as concise as possible. Maybe something to consider for the future. No worries for now. I'll try to answer your questions here:

1.

What else should I copy from the themes folder to my website's directory folder?

Nothing - I think. Unless you need to add a page separate from the homepage / one-pager. If you do need a separate page you, you could copy over content/services.md to get an idea on how this would work (see Demo - Services Page). This might be useful for an »Imprint«- or »Legal Notice«-page...

2.

Your questions are all about customizing the styles / CSS. Luckily 😄 somebody else asked about this a week ago. Here #1 (comment) you can read up about how to add a <style>-tag to your page with any custom CSS you need.

So now the question becomes »Which CSS do you need?« 💯 😆 :

2.1. font color

To change the font color on the header add

.blog-title {
     color: #B80135
}
.blog-description {
     color: #B80135
}

to your custom CSS.

2.2. change the color of the »down-arrow«-button.

Add

#header-arrow {
    color: #B80135
}

to your custom CSS. The shading should not be affected by this change.

2.3. get the description on one-line

I'd say that's a pretty tough nut to crack. You need to consider people looking at this on their phones. If you were to make the font so small that this whole text fits on a single line on an iPhone, I don't think anybody would be able to read it.

You could try to play around with the width & max-width settings. For example, adding

#site-head-content {
    width: auto; /* usually it's "width: 80%;"*/
    max-width: inherit; /* usually it's "max-width: 700px;"*/
}

would reset the current configuration of width: 80%; & max-width: 700px;.

So in conclusion, try adding a custom_head.html to your local layouts/partials-directory with the content

<style>
.blog-title {
        color: #B80135
}
.blog-description {
        color: #B80135
}
#header-arrow {
    color: #B80135
}
#site-head-content {
    width: auto; /* usually it's "width: 80%;"*/
    max-width: inherit; /* usually it's "max-width: 700px;"*/
}
</style>

and see where that takes you. Here are some screenshots with that added custom CSS.

iPad

iPhone

Desktop

I hope that helps 😸 .

[Sidra-Kazmi]

Hello @janraasch, thanks for that help worked like a charm. I will open new topic as you suggested.