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.
Related
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
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>
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.
My goal: to produce a basic image gallery that can be printed to PDF from the browser as a 3col x 4row grid in a 8.5" x 11" portrait layout. The image URL and a short description are fed from a django app, so I'll neither know how many images will be viewed nor the file names for them.
The code that follows is based on http://www.w3schools.com/css/css_inline-block.asp
It produces an image gallery whose result can be seen as a screenshot here:
Image Gallery Screenshot
My question: is there a way to make the boxes stay in a fixed grid? Some of the boxes are being pushed out of place, but I'm not sure why. If there's a better solution, I hope you'll point me to it.
Thanks!
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
width: 150px;
height: 180px;
margin: 1px;
border: 1px solid #73AD21;
}
.text-box {
font-size: 9px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<h3>Section 14: Attachments</h3>
{% for inspectionfeedback in inspection.inspectionfeedback_set.all %}
{% if inspectionfeedback.feedback_image.path == "" %}
{% else %}
<div class="floating-box">
<img src="{{ inspectionfeedback.feedback_image.url }}" style="width:140px;" alt=" " >
<div class="text-box">
{{ inspectionfeedback.feedback_inspection_item }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</body>
</html>
You are using inline-block, and the text is sometimes 3 lines or 2 or even four lines. The inline-block tries to level the text to "baseline" which in turn messes up your grid.
Possible solutions:
use display: block;, and float: left; etc.
use a table :(
use flex-box (if you are ok with css)
I have an html file a part of which is as follows:
<ul>
{% for tree in tree}
<li> <a href="{{ url_for('fruits', tree_id=tree.id) }}">
{{ tree.tree_name }} - {{ tree.tree_year }}
</a>
<span class="hyphen"> - </span>
<a href="{{ url_for('stats', tree_id=tree.id) }}">
stats
</a></li>
{% endfor %}
</ul>
and the corresponding .css is as follows:
.hyphen{ margin-left:80px; margin-right:80px }
But the span tag doesn't seem to have any effect at all. I want to give space before and after the hyphen but it isn't working. Why so?
A span is by default an inline element, inline elements can't have vertical padding / margin.
To fix this you can do two things,
the first is to give the element display: block but this is most likely not what you want as it was inline before.
Then there's display: inline-block as noted by D4V1D which will give you the ability to style that span like a block level element.
Add
.hyphen {
display: inline-block;
}
to your <span>.
You can't set width, height and vertical margin and padding properties to elements which aren't block elements.