# Hugo Academic: Adapting old hero widget CSS custom code

**URL:** <https://discourse.gohugo.io/t/hugo-academic-adapting-old-hero-widget-css-custom-code/31611>\
**Category:** Using Themes\
**Created:** [March 7, 2021, 1:03am UTC](https://discourse.gohugo.io/t/hugo-academic-adapting-old-hero-widget-css-custom-code/31611 "2021-03-07T01:03:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbarneche](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dbarneche/32/13773_2.png) [@dbarneche](https://discourse.gohugo.io/u/dbarneche)\
**Post date:** [March 7, 2021, 1:03am UTC](https://discourse.gohugo.io/t/hugo-academic-adapting-old-hero-widget-css-custom-code/31611/1 "2021-03-07T01:03:19Z")

</div>

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:

> **[Diego Barneche](https://www.diegobarneche.com/)**
>
> Ecological Statistician

The content is here:

> **[dbarneche/academic](https://github.com/dbarneche/academic)**
>
> Contribute to dbarneche/academic development by creating an account on GitHub.

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:

```auto
[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:

```auto
.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:

```auto
[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:

```auto
.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):

 ![Screen Shot 2021-03-07 at 9.00.17 am](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/3/37b86a09f53951a788d445f85f6153a6048547df.jpeg)

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

---

<div class="post-metadata">

**Author:** ![alcarazr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/alcarazr/32/11576_2.png) [@alcarazr](https://discourse.gohugo.io/u/alcarazr)\
**Post date:** [March 7, 2021, 7:15am UTC](https://discourse.gohugo.io/t/hugo-academic-adapting-old-hero-widget-css-custom-code/31611/2 "2021-03-07T07:15:30Z")

</div>

I recommend moving this to the dedicated [Wowchemy Discussions](https://github.com/wowchemy/wowchemy-hugo-modules/discussions) and also consider joining the [Wowchemy Discord server](https://discord.gg/UV6R2ZBKbs).

Thanks!

---

<div class="post-metadata">

**Author:** ![dbarneche](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dbarneche/32/13773_2.png) [@dbarneche](https://discourse.gohugo.io/u/dbarneche)\
**Post date:** [March 7, 2021, 1:39pm UTC](https://discourse.gohugo.io/t/hugo-academic-adapting-old-hero-widget-css-custom-code/31611/3 "2021-03-07T13:39:46Z")

</div>

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:

> **[Hugo Academic: Adapting old hero widget CSS custom code · Discussion #2213 ·...](https://github.com/wowchemy/wowchemy-hugo-modules/discussions/2213)**
>
> //github.com/wowchemy/wowchemy-hugo-modules/discussions/2213

Best wishes,  
D

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [March 9, 2021, 1:40pm UTC](https://discourse.gohugo.io/t/hugo-academic-adapting-old-hero-widget-css-custom-code/31611/4 "2021-03-09T13:40:17Z")

</div>

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