Adding Text Over Help Center Banner Image

Hi Pulkit,

Yes that is correct.

-Victoria

Okay, hope you are making your theme on base of Zendesk Copenhagen theme?

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

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 query

Thanks
Pulkit

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.

Hi Raeanna Skinner

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

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. 

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

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>