Closed buarle closed 2 years ago
Hi,
I'm not sure if I understand fully what you mean, if you want to replace the search button with that link you can do the following:
Unzip the theme file
Open the file partials/header.hbs
with a code editor
Replace the following code (line 22 - 24):
<button class="m-icon-button in-mobile-topbar js-open-search" aria-label="{{t "Open search"}}">
<span class="icon-search" aria-hidden="true"></span>
</button>
with your link:
<a href="https://example.com" class="m-icon-button in-mobile-topbar lang-link-mobile">
<img src="https://cdn2.iconfinder.com/data/icons/flags/flags/48/united-kingdom-great-britain.png" />
</a>
You also need to replace the following code (line 121 - 123):
<button class="m-icon-button in-menu-main js-open-search" aria-label="{{t "Open search"}}">
<span class="icon-search" aria-hidden="true"></span>
</button>
with your link:
<a href="https://example.com" class="m-icon-button in-mobile-topbar lang-link-desktop">
<img src="https://cdn2.iconfinder.com/data/icons/flags/flags/48/united-kingdom-great-britain.png" />
</a>
Save your changes
Zip the theme folder and upload it again
You will probably also need to inject some custom styles for your link so the flag image looks better, I can't provide those styles since that depends of your liking, you can use the classes lang-link-mobile
and lang-link-desktop
for that purpose. You can inject your styles in the Ghost Admin (Settings --> Code injection --> Site Header), for example:
<style>
.lang-link-mobile img,
.lang-link-desktop img {
width: auto;
height: 32px;
}
</style>
I can't help you with keeping the location after you click that link, that's not that easy to implement, sorry. You can try to find help on StackOverflow or Google.
Hi @eddiesigner ,
thanks already a lot for that. One more cosmetical thing. When doing this on mobile the flag has kind of a lot positioning within the menu.
You can see that on https://www.praxis-aigner-stadler.de/home/
Is there a way to change that down next to the dark mode switch?
Thanks an best, Markus
Hi @buarle, sorry for the late response 😅
You can inject the following code in the Ghost Admin:
<style>
.lang-link-desktop {
position: fixed;
right: 70px;
bottom: 36px;
}
@media only screen and (min-width: 48rem) {
.lang-link-desktop {
position: relative;
right: auto;
bottom: auto;
}
}
</style>
Hi @eddiesigner ,
I try to replace the search icon with a flag to switch to another language.
i.e:
On website example.de:
<a href="https://**example.com**"><img src="https://cdn2.iconfinder.com/data/icons/flags/flags/48/united-kingdom-great-britain.png" /></a>
What code do I need to use to replace the search logo one by one and keep the location n desktop and mobile version?
Thanks for your help.
Best buarle