Having trouble getting a theme to work

I’m using the hugo-base-theme to build and informational site. I have limited knowledge of HTML and CSS, but so far I’ve been able to make the site do what I want, but I have a problem. Any help would be appreciated.

  1. How do I change the background image at the top (the picture of the laptop)?

I wish I could find the Hugo files for gohugo.io so I could compare them.

Do you use Firebug in Firefox (or equivalent in other browsers)? If not, you should. It will tell you all you need to know.

This sounds like more of a HTML / CSS than a Hugo question, where a ‘how to’ post in Stackoverflow may be a better approach.

Shooting from the hip and checking the dev tools, looks like the image is kept at /img/desk.jpg. That is, you’ll find the desk image in /static/img/desk.jpg within the source organization (folders).

You can do a couple things:

  1. If you really don’t want to fiddle with the template, just name your new image to desk.jpg and drop it into the same folder to overwrite the previous image. This is not a good practice, bad for 508 compliance, etc, but if you really have no familiarity with HTML and CSS and this is an internal-only or practice/dummy site, this is the path of least resistance for you.
  2. Add your new image to the same folder. Let’s say it’s myimage.jpg. In the themes source (I just pulled it from Github), open up the css file static/assets/css/HPstyles.css. On line 35 you’ll see the css rule for .header as background: url(../img/desk.jpg) no-repeat center center fixed;. Just change this to background: url(../img/myimage.jpg) no-repeat center center fixed;

Hope that helps. Cheers.

I tried to use the “inspect element” feature on Opera, but no soap.

Thanks for the big help. Next time I’ll use Firebug. I know enough html and css to pull that off. I already changed the header image (similar to the Hugo logo on the gohugo.io page).


1 Like