Using the guidance linked to at Add template for taxonomies to Blogdown default theme I was able to add tags to show-up at the top of my posts and create a /tags page -- for my lithium themed hugo blogdown website.
How can I have the post tags show-up in the summaries of my lithium themed site (i.e. so they show-up on the home page)?
(https://www.bryanshalloway.com/ ; source code on github)
First, add the following HTML to your layouts/_default/list.html template, inside the <article> tag and after the <div class="summary">.
{{ with (.GetTerms "tags") }}
<div class="tags">
{{ range . }}
<div class="tag">
{{ .LinkTitle }}
</div>
{{ end }}
</div>
{{ end }}
Then to make it look better, you can add some CSS similar to this:
.tags {
display: flex;
flex-flow: row wrap;
gap: 8px;
}
.tags .tag {
/* override the `margin: auto;` rule which applies to all divs and iframes,
* defined in main.css */
margin: 0;
font-size: small;
}
Here is how it looks with the code I provided:
example image
Related
I'm currently individualizing the Hugo theme https://github.com/themefisher/vex-hugo
A demo can be found here: https://themes.gohugo.io/theme/vex-hugo/
Under the features there are nice icons with some text. I want to place the headings next to the icons.
In the html code a loop is used to place the text - which is defined in a yml file for static site generator Hugo - like this for the left icons and text:
<div class="col-md-4">
{{ range .left_side }}
<div class="mb-40 text-center text-md-left">
<i class="d-inlin-block h2 mb-10 {{ .icon }}"></i>
<h4 class="font-weight-bold mb-2">{{ .title | markdownify }}</h4>
<p>{{ .content | markdownify }}</p>
</div>
{{ end }}
I've added style="display: inline;" to the h4-tag, which will place the icons beside the text
But, with severe side effect, i.e. the nice arrangement (is it center?) of the three icon-text elements in the container next to the image is destroyed. Thus, I have to find another way. In addition I want to add more space between icon and text.
Compare first (good) to lower (bad) image
You can give the h4 in CSS display: flex; and align-items: center;. Even when the icon is larger than the text it will be centered vertically.
Here's the code example:
.bi {
font-size: 50px; /* This is only added to show the centering */
}
#testOne {
font-size: 30px;
display: flex;
align-items: center;
}
#testTwo {
font-size: 50px;
display: flex;
align-items: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<h4 id="testOne">
<i class="bi bi-alarm"></i>
Test
</h4>
<h4 id="testTwo">
<i class="bi bi-alarm"></i>
Test
</h4>
This issue has caused me some headaches. For a jupyter lab workshop, we used
<details></details> to provide more information on click.
However, when the notebook was converted to HTML via nbconvert, the drop-down arrows would only show in Chrome, not Firefox.
Have a look at this (Firefox):
In Chrome:
This is caused by the following Bootstrap element ..
summary {
display: block;
}
..which is added to the HTML output.
To fix the issue, the following code must be added to the converted HTML:
<style type="text/css">
/* Fix details summary arrow
not shown in Firefox
due to bootstrap
display: block;
*/
summary {
display: list-item;
}
</style>
It is possible to create a nbconvert template that adds this automatically.
Create the a file called nbconvert.tpl with the following contents:
{% extends 'full.tpl'%}
{# this template will render cells with tags highlight,
highlight_red and hide_code differently #}
{% block header %}
{{ super() }}
<style type="text/css">
/* Fix details summary arrow
not shown in Firefox
due to bootstrap
display: block;
*/
summary {
display: list-item;
outline: none;
}
</style>
{% endblock header%}
{% block input_group %}
{{ super() }}
{% endblock input_group %}
{% block output_group %}
{{ super() }}
{% endblock output_group %}
And use it when converting jupyter notebooks to HTML files:
jupyter nbconvert --to html \
--output-dir=. ./notebook.ipynb \
--template=./nbconvert.tpl
I have set up a "beautiful Jekyll" blog/GitHub page and I would like to change the font color of the page title and subtitle.
I would like to change the text color:
Beautiful Jekyll
Build a beautiful and simple website in minutes
I cannot find the right place in the main.css. I have looked into the index.html, the config.yml, and the css folder but cannot find where to change the color.
Around line 24ish to line 35ish of the main.css file I have:
h1,h2,h3,h4,h5,h6 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 800;
}
a {
color: {{ site.link-col }};
}
.header_class {
color: red;
}
On line 28 of the index.html file I have:
<h1 class="header_class">{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
Current website: https://deanattali.com/beautiful-jekyll/
GitHub page: https://github.com/daattali/beautiful-jekyll
There is an <h1> for page.title in the header.html.
Problem: The parent div has a class <div class="{{ include.type }}-heading"> but the element itself has no class or id which could be used in the CSS.
Solution: You need to add another class to the HTML and define new styles in the CSS to get only the colored page.title.
In case you only define the color on the existing <h1>in your CSS, each document's title would be colored, as the CSS defines the same styles for <h1> to <h6>.
Check out this tutorial on how to use classes in HTML/CSS.
Testing HTML and CSS changes
Use the inspector (dev tools) in your browser (press F12) to see the elements of a page. You can even test what happens when you add or change specific CSS attributes. Learn what I mean and how to do it on your own.
For testing, I have added color: red to the <h1> tag:
Add a class to your HTML and update your CSS
Go to line 28 in the header.html and add change <h1> to <h1 class="your-test-class">
Go to the main.css and add the following below the <h1,...>definition:
.your-test-class {
color: red;
}
Note: This h1 tag example would also work for the sub-title.
I have an html list element that renders blogposts as a list.
<ul class="posts">
{{ range .Data.Pages -}}
<li>
<span class="postlist_container">
{{ .Title }}
<time class="pull-right post-list" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> </span>
</li>
{{- end }}
</ul>
The blogposts are written in markdown (well Rmarkdown) and I specify a source image that should appear in the list.
---
thumbnail: "/post/source/image_tn.jpg"
---
I managed to get the image rendered alongside the title of the post with adding an tag inside the list.
<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">
This is not ideal since there is a bullet point, then title, date and image. What I would like is that the image replaces the bullet point.
I have read about using CSS for this, but the examples always use an absolute path to one image, e.g.
.posts {
list-style-image: url("source/image.jpeg");
}
Is there a way to refer to the image from the Param.thumbnail inside the markdown file?
This didn't work:
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
Any help would be greatly appreciated.
To make your CSS style sheet use the markdown, you need to include it inside the HTML templates.
insert once inside your template the rule(s) you want to update on the fly (best is to insert inside <head>, but anywhere else will work
<style>
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>
instead
<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">
Best is to read about the template tutorial from blogdown
https://bookdown.org/yihui/blogdown/templates.html#a-minimal-example
The partials/ directory is the place to put the HTML fragments to be reused by other templates via the partial function. We have four partial templates under this directory:
header.html main defines the <head> tag and the navigation menu in the <nav> tag.
if you read further, you can see that the {{ partial "head_custom.html" . }} is the file (head_custom.html) where you might insert
<style>
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>
Instead of using list-style-image, why don't you use one of the pseudo elements? Like so!
li{
position: relative;
padding-left: 5px;
}
li::before{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}") no-repeat center center;
}
Hope this helps.
I'm having issues with a little feature on my site's products' page 'tools' bar. I want to have it float to the right of my site's breadcrumb navigation, making it inline with the breadcrumb navigation. But it's going to the next line.
Here's what it looks like:
<div id="breadcrumbsForStore">
<h5>
Home
{% for category in product.categories limit:1 %} / {{ category | link_to }}{% endfor %} /
{{ page.name }}
</h5>
<ul id="shoptools"><li>SIZE GUIDE / Filter:</li></ul>
</div>
And here's the CSS:
#breadcrumbsForStore{width:960px; font-family: futura; text-align:left;margin:20px 0px 25px 0;padding:0px 0 5px 0;clear:both; margin-left: auto; margin-right: auto; text-transform:uppercase;}
#breadcrumbsForStore h5{font-size:10px; font-family: futura;}
#breadcrumbsForStore h5 a{color:#525252; border-bottom:0px dotted #0d0d0d; letter-spacing:1px; padding: 10px 3px 10px 3px;}
#breadcrumbsForStore h5 a:hover{color: #0d0d0d;}
ul#shoptools{float:right; display:inline;}
ul#shoptools li{float:left; display:inline;}
Here's where the problem is (it says "SIZE GUIDE / FILTER:")
http://shopmoonfall.bigcartel.com/products
Change your html like this:
<div id="breadcrumbsForStore">
<ul id="shoptools"><li>SIZE GUIDE / Filter:</li></ul>
<h5>
Home
{% for category in product.categories limit:1 %} / {{ category | link_to }}{% endfor %} /
{{ page.name }}
</h5>
</div>
The H5 element is display:block style by default. If you add a style to make it inline, like
h5 {display: inline-block}
then floating elements will show next to it.
Fiddle here:
http://jsfiddle.net/t84yU/
(note I changed your width from 960 px to 560 px also, just to make it more readable)
I'm not 100% clear on what your trying to do but the way you nested the <h5> is kinda ugly.
If you want the <ul> on the same line as the <a> tags you should include the <ul> in the <h5> tag.
If you don't want to include the <ul> in the <h5>, make sure the <h5> is display: inline; also. All elements on the "line" must be display: inline/inline-block; for it to appear on one line. Headers are display: block; by default so the <h5> is pushing down the unordered list.