Customizing the theme : problems

arthub · March 21, 2020, 7:39am

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

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

arthub · March 21, 2020, 7:57am

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

It should be easier to understand

Powerpoint showing the modifications

pmm · March 21, 2020, 3:11pm

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>

arthub · March 21, 2020, 6:30pm

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

pmm · March 21, 2020, 6:58pm

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>

arthub · March 21, 2020, 7:15pm

Thanks a lot, it works !

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.

arthub · March 21, 2020, 7:23pm

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

arthub · March 22, 2020, 9:40am

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 ?

pmm · March 22, 2020, 11:43am

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.

arthub · March 22, 2020, 2:56pm

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

pmm · March 22, 2020, 3:33pm

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.

arthub · March 22, 2020, 4:24pm

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

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.

pmm · March 22, 2020, 4:28pm

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 }}

arthub · March 22, 2020, 4:33pm

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:

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

arthub · March 22, 2020, 5:48pm

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

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

arthub · March 22, 2020, 5:49pm

to this

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

pmm · March 22, 2020, 5:52pm

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>

arthub · March 22, 2020, 6:04pm

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

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;
}

pmm · March 22, 2020, 6:15pm

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.

arthub · March 22, 2020, 6:45pm

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

Topic		Replies	Views
Business frontpage template Using Themes	1	790	February 23, 2020
Changes on index.html themes does not work support	8	266	July 25, 2023
Convert html template to hugo support	3	895	May 22, 2022
Learning how to switch themes support	9	6407	February 28, 2020
HTML Theme support	2	415	July 11, 2017

Customizing the theme : problems

Related Topics