How to implement a scrolling list in hugo academic theme for a custom widget

#1

I am making my website using the academic theme. However I am not a web developer neither am I proficient with HTML, CSS, Javascript. So I thought of seeking help here.

I want to display a custom widget that just shows a small text in bulleted format and can be scrolled (I don’t want it to display full) for listing my achievements or extra-curricular activities. [If you have a better plan to show that then I am all ears]

I made a custom widget as mentioned in the docs by making a achievements.md (copied and renamed from custom.md) file in root. Then in layouts/widgets I copied the custom.html and renamed it to achievements.html.

However now it just displays text as i write it in achievement.md, I believe I have to edit the achievement.html but I have no clue how to do it. I hope you could point me to a suitable resource for doing it.

My achievement.html contains the following -

{{ $page := .page }}

<!-- Custom widget -->
<div class="row">
  {{ if $page.Title }}
  <div class="col-12 col-lg-4 section-heading">
<h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
{{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
  </div>
  <div class="col-12 col-lg-8">
{{ $page.Content }}
  </div>
  {{ else }}
  <div class="col-lg-12">
{{ $page.Content }}
  </div>
  {{ end }}
</div>

And my achievements.md file has the following -

+++
widget = "achievements"
active = true
date = 2016-04-20T00:00:00

# Note: a full width section format can be enabled by commenting out the `title` and `subtitle` with a `#`.
title = "Achievements"
subtitle = "List of things I am proud of"

# Order that this section will appear in.
weight = 60
+++
Achievement1
Achievement2
Merit Certificate
Work in progress. Visit soon !

Could you please help me with the necessary edits ?

#2

Yes. Read Requesting Help, follow the advice, and share a project that reproduces the issue. It isn’t enough to share the theme and the contents of a single file.

Also, you might consider asking the theme author for help, if they have a support system.

#3

I was pointed here by the author himself. Actually the repository is exactly same as here. According to the docs prepared by the author to make a new section/widget you have to follow the steps there. I already mentioned about it earlier. And it works, the only thing is that now i need to edit the html and md file to make it look like how i want, which i don’t know how to. So i sought help here.

#4

Your achievements.md file is a markdown file. Common ways to show bullet points in markdown are with hyphen (-) or asterisk (*)

To use your example:

- Achievement1
- Achievement2
- Merit Certificate
- Work in progress. Visit soon !
#5

@zwbetz that rendered beautifully. The only thing I need that I mentioned earlier, is that If i keep adding bullet points then it keeps expanding. Is there a way to show a fixed number of bullets say 3 and have a scroll?

#6

You’d have to add CSS to set the height

#7

Thanks, I got it working by using inline css style="height:200px; overflow: auto" in the 3rd from top <div> tag.