Customizing the theme : problems

support
1

Hi all,

I am starting a new start-up company with some friends and for this, we are building a website.
As noobs in website creation, we wanted to go for Wix (expensive but easy!) but a friend convinced me to go for Hugo and that he would make the site for me until it became to hard for him too :sweat_smile:

The first step of the work is 95% done but we still face some issues, please take a look at the result :
www.decarbone.eu

It is based on the theme Meghna-Hugo

Based on this I’ve changed a lot by myself (learning a lot, but taking some much time while I need to do many other things to start the business)
BUt I’m blocked here :

  • in the first part of the website you can see in big “Convert your” however it should show “Convert your car” but it keeps only 2 words for some reason. I do not find the root of this problem

  • I would like to change the icons in “rebirth” - 'greenifiy your ride" “return on investment” and in “Services” by more coherent icons, how it does not work

  • in Green transition, the left part with the bars should be deleted and replaced by a image on top and a text below.

All the source code can be seen on GitHub https://github.com/denishamann/decarbone

Any help would be so appreciated, I’m a bit overload over here and in between a thousand tasks.

Many thanks !

Arthur

2

Here below you can find a visual way to see the modifications necessary.

It should be easier to understand :smiley:

Powerpoint showing the modifications

3

The about.html partial in the theme is set up to display only the first and second word in the heading, highlighting the latter.

<div class="title text-center wow fadeIn" data-wow-duration="1500ms">
    <h2> {{ with .title }} {{ index (split . " ") 0 }} {{ end }}<span class="color">
            {{ with .title }} {{ index (split . " ") 1 }} {{ end }} </span></h2>
    <div class="border-meghna"></div>
</div>

You could change it to something like this to accept more than 2 words and preserve the highlighting:

<div class="title text-center wow fadeIn" data-wow-duration="1500ms">
    <h2> {{ with .title }} {{ range first 1 (split . " ")}}{{ . }} {{ end }}<span class="color">
            {{ with .title }}{{ range after 1 (split . " ")}}{{ . }} {{ end }}</span></h2>
    <div class="border-meghna"></div>
</div>
4

Hi pmm,

Many thanks for your answer.
I’ve tried to integrate your proposal however I get the following ; “ERROR 2020/03/21 19:28:47 Process: loading templates: “C:\Hugo\decarbone\layouts\partials\about.html:39:1”: parse failed: template: partials/about.html:39: unexpected EOF”

I took care to just modify where it was necessary but it keeps telling this

5

My bad, missed two {{ end }} tags in my code. This works:

<div class="title text-center wow fadeIn" data-wow-duration="1500ms">
	<h2>
		{{ with .title }}
		{{ range first 1 (split . " ") }}
		{{ . }}
		{{ end }}
		{{ end }}
		<span class="color">
			{{ with .title }}
			{{ range after 1 (split . " ") }}
			{{ . }}
			{{ end }}
			{{ end }}
		</span>
	</h2>
	<div class="border-meghna"></div>
</div>
6

Thanks a lot, it works ! :slight_smile:

Would you have an idea for the second point : Changing icons by small images ?
For example for this one (file YML in data):

# service item loop
- name : Certification and safety
  icon : ti-layout # themify icon pack : https://themify.me/themify-icons
  content : All the parts are certified and installed in a way to ensure safety at all levels.
7

I tried to just change the icon by replacing
icon : ti-layout # themify icon pack : https://themify.me/themify-icons
by
image : images/about/cars2.jpg

but it displays nothing

8

Should I change in the partial the following :

{{"<!-- /section title -->" | safeHTML }}

{{ range .service_item}}
			{{"<!-- Single Service Item -->" | safeHTML }}
			<article class="col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-duration="500ms">
				<div class="service-block text-center">
					<div class="service-icon text-center">
						<i class="{{ .icon }}"></i>
					</div>
					<h3>{{ .name | markdownify }}</h3>
					<p>{{ .content | markdownify }}</p>
				</div>
			</article>
			{{"<!-- End Single Service Item -->" | safeHTML }}
			{{ end }}

by something which can integrate images instead from the repository
\static\images\icons ?

9

This isn’t really a Hugo question, but if you want to display an image, then it should be in an <img> tag. So you might want to try changing

<i class="{{ .icon }}"></i>

to

<img src="{{ .icon }}">

{{ .icon }} in this case should point to the path to an image in your static folder.

10

Thank you for your reply pmm.

I’ve tried your solution, it deletes the icon correctly but the image is not displayed.
Should I also change this part <div class="service-icon text-center">?

I’ve changed the YML file from
################################# Service ################################# service: enable : true title : Our Services service_item : # service item loop - name : Electric motorisation icon : ti-world # themify icon pack : https://themify.me/themify-icons
to

################################# Service ################################# service: enable : true title : Our Services service_item : # service item loop - name : Electric motorisation image : images/icon/marker.jpg

Your help saves my a ton of time, I’ve really no basics in this kind of code.
If by any chance I can give you a reward back, let me know

11

You’ve changed icon : ti-world to image : images/icon/marker.jpg, so you must also change the template accordingly and use the image parameter:

<img src="{{ .image }}">

or change image back to icon in the front matter.

12

Thanks again pmm, it works !
I dunno why it was the “test icon” which did not work, but the others work perfectly :slight_smile:

I’ll try to do the same for the other partial by changing:

<div class="icon-box">

						{{with .icon}}<img src="{{ .icon }}"></i>{{ end }}

					</div>

to

<div class="icon-box">

						{{with .icon}}<img src="{{ .image }}"></i>{{ end }}

					</div>

I guess, I will try.

13

By using with, you’re changing the current context to the specified variable, so you should either write:

{{with .icon}}<img src="{{ . }}"></i>{{ end }}

or

{{if .icon}}<img src="{{ .icon }}"></i>{{ end }}
14

I wrote this and it worked :

<div class="block">

				<div class="icon-box">

					<img src="{{ .icon }}"></i>

				</div>

But both solutions you proposed seem to work well also, which I’ve integrated.
(Im just doing some random stuff based on your precious tips and sometimes it works but I lack deeply knowledge on HTML, I’m completely new)

The only problem remaining is that the icon does not position in the middle:

Capture
Capture1037×487 32.3 KB

Any clue?

PS: if you ever deliver paid services for building Hugo website or supporting, please let me know. I would be glad to know for the future of this website

15

Ow man, I don’t know how I’ve done this but it succeeds from this

image
image1199×505 80.8 KB

by changing

		<div class="row">
		<div class="col-lg-6">
			<h2>{{ .subtitle | markdownify }}</h2>
			<p> {{ .content | markdownify }}</p>
			{{ with .image }}
			<img class="img-fluid" src="{{ . | absURL }}" alt="image">
			{{ end }}
		</div>
		<div class="col-lg-6">
			<ul class="skill-bar">
				{{ $.Scratch.Set "counter" 0 }}
				{{ range $index, $element:= .skill_item }}
				{{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
				<li>
					<p><span>{{if lt $index 9}}0{{end}}{{$.Scratch.Get `counter`}}- </span>{{ .name }}</p>
					<div class="progress">
						<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
							style="width:{{ .percent }}">
						</div>
					</div>
				</li>
				{{ end }}
			</ul>
		</div>

to this

		<div class="row">
		<div class="col-lg-6">
			<h2>{{ .subtitle | markdownify }}</h2>
			<p> {{ .content | markdownify }}</p>
			{{ with .image }}
			<img class="img-fluid" src="{{ . | absURL }}" alt="image">
			{{ end }}
		</div>
		<div class="col-lg-6">
			{{ with .imagebis }}
			<img class="img-fluid" src="{{ . | absURL }}" alt="image">
			{{ end }}
			<h2>{{ .subtitlebis | markdownify }}</h2>
			<p> {{ .contentbis | markdownify }}</p>

	</div>

Certainly not a professional or a good way, but that’s the only way I found to make it work without understand anything I’ve performed :sweat_smile:

16

to this

image
image1060×490 97.7 KB 

skill:

enable : true
title : Green transition
subtitle : Circular Economy
content : Converting the car does not only bring a better experience of riding, it also saves obsolete cars from the trash. One car converted is one car less produced, saving a lot of grey energy and GHG emissions necessary for manufacture. This is pure circular economy.
image : images/about/CircularEV.jpg
subtitlebis : Eco-friendly
contentbis : Riding electric eliminates all emissions from the exhaust pipe. No more local CO2, no more fine particles. In Belgium when electric vehicles are on the road they produce 5 times less CO2 than thermal cars and this will get improved further with the penetration of low carbon electricity production. Converting your car to electricity is the way to be more environment friendly.
imagebis : images/icons/CO2cloud.png

17

Hey, you’ll need to modify your CSS, which is in /themes/meghna-hugo/assets/css/style.css. The .icon-box class is what you’re looking for. You can also try seeing what the div container looks like without the icon-box class.

<div>
    <img src="{{ .icon }}">
</div>
18

I tried to delete the <div class="icon-box"> but it goes nuts :sweat_smile:

when modifying some height value or width, it changes the hexagone.
Do you have an idea, which value should be changed in order to displaced the icon in the box ?
About us section
==================================================================*/
.about .block {
background: #242930;
padding: 30px;
border-bottom: 2px solid transparent;
transition: .5s all;
margin-bottom: 20px;
}

.about .block:hover {
border-bottom: 2px solid #57cbcc;
}

.about .block:hover .icon-box {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}

.about .block .icon-box {
position: relative;
width: 160px;
height: 92.38px;
background-color: transparent;
margin: 46.19px auto 60px;
padding: 20px 0;
border-left: 2px solid rgba(236, 239, 241, 0.07);
border-right: 2px solid rgba(236, 239, 241, 0.07);
font-size: 50px;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
transition-duration: 0.3s;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}

.about .block .icon-box:after,
.about .block .icon-box:before {
content: “”;
position: absolute;
z-index: 1;
width: 113.14px;
height: 113.14px;
background-color: inherit;
left: 20.4315px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
}

.about .block .icon-box:before {
top: -56.5685px;
border-top: 2px solid rgba(236, 239, 241, 0.07);
border-right: 2px solid rgba(236, 239, 241, 0.07);
}

.about .block .icon-box:after {
bottom: -56.5685px;
border-bottom: 2px solid rgba(236, 239, 241, 0.07);
border-left: 2px solid rgba(236, 239, 241, 0.07);
}

.about .block .icon-box h3 {
color: #afbac4;
}

19

You can try reducing the padding in .about .block .icon-box.

Or add a class .about .block .icon-box img and specify a maximum image size.

20

Ok I made by changing this weird class by another used for in another partial :<div class="service-icon text-center"> and it works :)))

The big problem was not the size but that it was not centered

Thank you so much for all the tips