Adding Text Over Help Center Banner Image
RespondidaI'd like to be able to add text above the search bar with the Copenhagen Theme but I'm having a hard time figuring this out. I resorted to adding the headline "How Can We Help? Our client care team is here to support you every step of the way" in the image for now but I'd like to have actual text via HTML coding.
Any suggestions on how to do this?
Here is what I have now (the text is part of the image):
Thank you!
-
Hi Kristen. This should be possible by just modifying your HomePage.hbs template along with some CSS.
Below is a sample however you may need to modify in order to work in your custom theme.
Homepage.hbs (default Copenhagen with added div class called "intro title".
<section class=" hero">
<div class="hero-inner">
<div class="intro-title">How can we help?</div>
{{search submit=false instant=settings.instant_search class='search search-full'}}
</div>
</section>CSS for the intro-title div, I'm adjusting the text depending on screen size
.intro-title {
margin-bottom: 48px;
font-size: 24px;
font-weight: 300;
line-height: 1.1;
color: #fff;
text-align: center;
}
@media (min-width: 768px) {
.intro-title {
font-size: 28px;
}
}
@media (min-width: 992px) {
.intro-title {
margin-bottom: 48px;
font-size: 32px;
}
}Hope this helps a little and gets you going in the right direction. If you have further questions just let me know.
-
Kristin: Are the words "Help Center" after your logo in the header part of the logo image, or did you add that via code? If code, could you share how you accomplished that?
-
Hey Amie,
It looks like one of our Community Moderators replied to your question here: Adding text to header in Help Center
Hope this helps!
-
Hello, I followed this example. It seemed to work, but it pushed the search icon out of the search bar.
Attached is the example of how it winds up looking as well as the code. I haven't adjusted anything in the Coppenhaggan theme on this page. Just added the header title...
<section id="main-content" class="section hero">
<div class="hero-inner">
<div class="intro-title">How can we help?</div>
<h2 class="visibility-hidden">{{ t 'search' }}</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search submit=false instant=true class='search search-full' placeholder='Find anything (e.g. Integrations, Workspace Basics, How to Write a Campaign)'}}
</div>
</section> -
Hi Ivey Kilmon
Simply move the intro title block outside the hero inner or replace your code with the below code
<section id="main-content" class="section hero">
<div class="intro-title">How can we help?</div>
<div class="hero-inner">
<h2 class="visibility-hidden">{{ t 'search' }}</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search submit=false instant=true class='search search-full' placeholder='Find anything (e.g. Integrations, Workspace Basics, How to Write a Campaign)'}}
</div>
</section>Then add the following CSS to the intro title
.intro-title {
position: relative;
top: 33%;
}Let me know if it solves your issue
Thanks
Pulkit
Team Diziana
-
This has been very helpful! I was able to get my to intro title to turn out accurately with the steps above. How would we enable translation of that text for our default languages? I was thinking using dynamic content, but not exactly sure where that gets added.
-
Happy to help you here, Just create a DC for your welcome message then call it in a place of your welcome message text on your code.
Are you using any custom theme or just the default Copenhagen theme
I am attaching a screenshot for the same
You have to call your DC like this {{dc 'YOUR DC NAME'}} in the place where you have written your welcome message text.
Please, let me know if you have any issue
Thank You
Pulkit
Team Diziana
-
I was able to add text over the banner, but it is not vertically centered (see screenshot). How can I move the text and search box up so that it appears centered? Thank you in advance.
-
Hey Victoria Campagna
Is it possible to share the live URL of your HC so that I will give a exact code which help you to solves your queryThanks
Pulkit -
I'm working on creating a new theme, so it is not live yet :(
Will seeing the code below help?This is what is in home_page.hbs:
<section id="main-content" class="section hero">
<div class="intro-title"><h1 style="color:white;"><b>Hi. How can we help?</b></h1></div>
<div class="hero-inner">
<h2 class="visibility-hidden">{{ t 'search' }}</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
{{search submit=false instant=settings.instant_search class='search search-full' placeholder='Search for answers'}}
</div>
</section>This is what is in style.css:
.intro-title {
position: relative;
top: 40%;
} -
Okay, hope you are making your theme on base of Zendesk Copenhagen theme?
-
Hi Pulkit,
Yes that is correct.
-Victoria
Publicação fechada para comentários.
12 Comentários