HUGO

Hugo Academic: Adapting old hero widget CSS custom code

Hello,

I hadn’t updated my website in a long time (at least 3 yrs), and a few weeks ago I decided to upgrade everything, Hugo and the Hugo Academic theme:

The content is here:

I wanted to customise my fonts, padding betweens sections, and hero widget in the same manner as I had before. So I literally copied my entire customised CSS code which used to be placed under static/css/academic.css (I was using the Academic template from Nov 2017) to the new assets/scss/custom.scss:

While in doing so the font and padding are now working, I can’t figure out how to customise the hero widget whatsoever. I suspect that some of the classes for the widget have changed?! For instance, my original hero.md had something like:

[header]
  overlay_color = "#666"  # An HTML color value.
  overlay_img = "front.jpg"  # path relative to `static/img/` folder.
  overlay_filter = 0.4  # Darken the image. Value in range 0-1.

And I could customise it in static/css/academic.css with:

.hero-overlay {
  position: relative;
  padding: 0em 0;
  clear: both;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: intro 0.3s both;
  animation-delay: 0s;
  animation-delay: 0.25s;
}

.hero-title {
  font-size: 2rem;
  margin-top: 0;
  line-height: 1;
}

.hero-lead {
  max-width: 768px;
  font-size: 0.5rem;
}

.hero-overlay .hero-title,
.hero-overlay .hero-lead,
.hero-overlay .btn {
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.hero-overlay a {
  color: #fff;
}

.hero-overlay .hero-lead a {
  color: #fff;
  text-decoration-line: underline;
}

.hero-overlay .btn-large {
  font-size: 1.1rem;
}

But now the equivalent bits in hero.md are structured like:

[design.background]
  color = "#666"
  image = "front.jpg"  # path relative to `static/img/` folder.
  image_darken = 0.4  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
  image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.

And it seems that apart from:

.hero-title {
  font-size: 2rem;
  margin-top: 0;
  line-height: 1;
}

.hero-lead {
  max-width: 768px;
  font-size: 0.5rem;
}

the rest of the CSS code in assets/scss/custom.scss does not effect change on the widget any more.

I am useless when it comes to to CSS btw, so I have been operating on a trial-an-error basis because unfortunately I do not have the time to learn it properly. Basically, I would like to have my hero front image (under static/media/front.jpg) fully displayed, but for some reason the configs are blowing it out of proportion on the webpage. The image below shows what I would like the image to look like (top bit), and part below is the actual webpage (sorry, I I had to concatenate the images together because I can only post one image as this is my very first post on this forum):

Ideally I would only have it proportionally stretched or shrunk if the size of the screen changed relative to the image size (e.g. massive screen or a smart phone). I would really appreciate it if someone could point me in the right direction on how to update my CSS code pertaining to the hero widget under assets/scss/custom.scss so that I can have the photo properly displayed on the hero widget.

Thanks in advance for your guidance!
Best wishes,
Diego

I recommend moving this to the dedicated Wowchemy Discussions and also consider joining the Wowchemy Discord server.

Thanks!

Thanks for the suggestion! In case someone finds this in the future and is interested in following through, I have copied this post across to the Wowchemy Discussions as suggested:

Best wishes,
D

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.