Any good getting started with Hugo resources

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:

<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">

If you want to make it a variable so that you can define the file in the config.toml then add this:

    {{ "<!-- Custom CSS -->" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}

Now in your config.toml you can have a param for the CSS file like so:

[params]
custom_css = ["css/custom.css"]

Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.

stacksofplates

@JaredBusch said in Any good getting started with Hugo resources:

So what about this theme for a blog?
https://themes.gohugo.io//theme/hugo-tikva/post/

As for this question. I spun up a test with it. I had to delete the HTML in the one file because they weirdly just added a <div> and Hugo doesn't support that. The colors aren't my favorite, but that's easily changed. Other than that it looks fine. Here's a sample:

stacksofplates

They've given you a lot of customization options directly in the config.toml file. This looks a lot better IMO. It's clean and fills the page:

Obsolesce

@stacksofplates said in Any good getting started with Hugo resources:

@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
If you want to make it a variable so that you can define the file in the config.toml then add this:
    {{ "" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}
Now in your config.toml you can have a param for the CSS file like so:
[params]
custom_css = ["css/custom.css"]
Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.

I couldn't get that to work, so I copied the main one and pasted a custom one below it like this:

  {{ "<!-- template custom css file -->" | safeHTML }}
  {{ $styles := resources.Get "css/custom.css" | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:
@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
If you want to make it a variable so that you can define the file in the config.toml then add this:
    {{ "" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}
Now in your config.toml you can have a param for the CSS file like so:
[params]
custom_css = ["css/custom.css"]
Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.
I couldn't get that to work, so I copied the main one and pasted a custom one below it like this:
  {{ "" | safeHTML }}
  {{ $styles := resources.Get "css/custom.css" | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

Interesting. What theme are you using?

Obsolesce

@stacksofplates said in Any good getting started with Hugo resources:

@Obsolesce said in Any good getting started with Hugo resources:
@stacksofplates said in Any good getting started with Hugo resources:
@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
If you want to make it a variable so that you can define the file in the config.toml then add this:
    {{ "" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}
Now in your config.toml you can have a param for the CSS file like so:
[params]
custom_css = ["css/custom.css"]
Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.
I couldn't get that to work, so I copied the main one and pasted a custom one below it like this:
  {{ "" | safeHTML }}
  {{ $styles := resources.Get "css/custom.css" | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
Interesting. What theme are you using?

timer-hugo, but with quite a bit of modifications

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:
@Obsolesce said in Any good getting started with Hugo resources:
@stacksofplates said in Any good getting started with Hugo resources:
@Obsolesce said in Any good getting started with Hugo resources:

I'm having trouble with overriding css. Maybe I'm doing it wrong.

I know I read somewhere on creating a customcss file, but I've been through so many themes I have no idea if that's in general or theme specific.

What I tried that doesn't work is creating a new structure top level -- assets\css\style.css

So that depends on the theme. Some give you a custom.css file to use some don't.

Meghna for example gives you a declaration in your config.toml on where your custom CSS file exists.

If you want to hard code it, don't worry about adding the variable for the config.toml copy the theme's head.html file (or header.html depending on the theme) up to the site level layouts/partials/head.html and paste this in:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
If you want to make it a variable so that you can define the file in the config.toml then add this:
    {{ "" | safeHTML }}⏎                                                                                                                                                                                                   
    {{ range .Site.Params.custom_css }}⏎                                                                                                                                                                                                      
    <link rel="stylesheet" href="{{ . | absURL }}">⏎                                                                                                                                                                                          
    {{ end }}
Now in your config.toml you can have a param for the CSS file like so:
[params]
custom_css = ["css/custom.css"]
Just looking at this it looks like a good bit of work but it's really not. The site has to know where the CSS lives and with something like Drupal it would be more work making a sub-theme to add your CSS changes and such.
I couldn't get that to work, so I copied the main one and pasted a custom one below it like this:
  {{ "" | safeHTML }}
  {{ $styles := resources.Get "css/custom.css" | minify }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
Interesting. What theme are you using?
timer-hugo, but with quite a bit of modifications

That's weird. I just copied it and pasted in mysite/layouts/partials/head.html above the hover stylesheet:

  {{ "<!-- custom -->" | safeHTML }}⏎                                                                                                                                                                                                         
  <link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">⏎                                                                                                                                                                             
  {{ "<!-- hover -->" | safeHTML }}⏎                                                                                                                                                                                                          
  <link rel="stylesheet" href="{{ "plugins/hover/hover-min.css" | absURL }}">⏎                                                                                                                                                                
  {{ "<!-- template main css file -->" | safeHTML }}⏎                                                                                                                                                                                         
  {{ $styles := resources.Get "css/style.css" | minify}}⏎                                                                                                                                                                                     
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">⏎                                                                                                                             
</head>⏎

Then added the CSS in mysite/static/css/custom.css:

.top-bar.animated-header {
    background-color: #ce0b0b !important;
}

and got this:

Obsolesce

@stacksofplates I meant with the parameter for it in the config file. Otherwise I got it working similarly to how you did.

stacksofplates

@Obsolesce said in Any good getting started with Hugo resources:

@stacksofplates I meant with the parameter for it in the config file. Otherwise I got it working similarly to how you did.

Yeah that's bizarre. I got the same results with that as well.

I added this under the hover stylesheet:

  {{ "<!-- Custom CSS -->" | safeHTML }}⏎
  {{ range .Site.Params.custom_css }}⏎
  <link rel="stylesheet" href="{{ . | absURL }}">⏎
  {{ end }}

then added it in params:

# Site Params
[params]
custom_css = ["css/custom.css"]

and it worked like it did the other way. It doesn't matter, more than one way to skin a cat with this, but just weird it didn't work for you.

JaredBusch

@stacksofplates said in Any good getting started with Hugo resources:

How they want you to do it works like this:

mkdir -p mysite/themes

git clone theme into themes

cp -R themes/theme/examplesite/* .

#3 is obv assuming you're in the site directory. You're done. Now just edit your config.

You can also do hugo new site and it gives you a directory structure but if you're using the themes example folder it's not really needed.

From what I was reading, you don't want to actually git clone the theme.

Instead you should always git submodule it.

hugo new site jaredbusch.com
cd jaredbusch.com
git submodule add -f https://github.com/geschke/hugo-tikva themes/hugo-tikva

JaredBusch

I had never used submodule before. So I had to look it up.

Submodule is interesting because it adds everything into your repo also.

For another project, I had a custom folder that was different per client.
So in the main repo I had custom/.gitkeep to have the empty folder there.
Then I added custom/ to the .gitignore.
Then I had a separate project that I cloned into the custom folder.

JaredBusch

@stacksofplates said in Any good getting started with Hugo resources:

cp -R themes/theme/examplesite/* .

Why do this? Why can't I just create my own things? Why bring everything from the example up?

I don't mind this, just trying to understand the logic.

Obsolesce

@JaredBusch said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:

cp -R themes/theme/examplesite/* .

Why do this? Why can't I just create my own things? Why bring everything from the example up?

I don't mind this, just trying to understand the logic.

I do it so I have something to look at and modify to my own needs, such as the .yml files that have the layouts of pages and/or sections of pages, and other "templates" to work off of. It shows you a working example of content to work from, which helps, me at least, in the design process.

But if you know ahead of time exactly how the theme needs things, there's absolutely no need to do it if you want to create it all from scratch. Maybe that's easier for you. But for me, it's quicker and easier to work from templates and see the big picture as I make changes and add content.

For example, if you don't copy any of that over, and you run the site, it will look messed up as none of the default template images and such will be showing. It's likely none of the menu links will work until you create the pages, etc. It's subjective, do it how you want.

stacksofplates

@JaredBusch said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:

How they want you to do it works like this:

mkdir -p mysite/themes

git clone theme into themes

cp -R themes/theme/examplesite/* .

#3 is obv assuming you're in the site directory. You're done. Now just edit your config.

You can also do hugo new site and it gives you a directory structure but if you're using the themes example folder it's not really needed.

From what I was reading, you don't want to actually git clone the theme.

Instead you should always git submodule it.
hugo new site jaredbusch.com
cd jaredbusch.com
git submodule add -f https://github.com/geschke/hugo-tikva themes/hugo-tikva

Right. That was just a simple get going thing. A submodule is definitely the way to go.

stacksofplates

@JaredBusch said in Any good getting started with Hugo resources:

I had never used submodule before. So I had to look it up.

Submodule is interesting because it adds everything into your repo also.

For another project, I had a custom folder that was different per client.
So in the main repo I had custom/.gitkeep to have the empty folder there.
Then I added custom/ to the .gitignore.
Then I had a separate project that I cloned into the custom folder.

There's two different methods. Submodule and subtree. Subtree you have to install separately. Subtree is a separate project tree inside of your project. Submodule is a specific checkout hash of a repo. Subtle difference but they can overlap some.

stacksofplates

@JaredBusch said in Any good getting started with Hugo resources:

@stacksofplates said in Any good getting started with Hugo resources:

cp -R themes/theme/examplesite/* .

Why do this? Why can't I just create my own things? Why bring everything from the example up?

I don't mind this, just trying to understand the logic.

Each theme has it's own specific settings. The example gives you all of those settings without having to read through all of their theme and find the settings for yourself. You can delete the files in content/ that you don't need. It's just a way to show you how to use the theme and give you a default config.toml.

Solved Any good getting started with Hugo resources