Adding text to header in Help Center

Hi Desiree.  Please verify your plan and theme for you.  Are you using the Copenhagen theme and do you have access to make changes to the code?

Hi Wes! We are using the default theme, which I'm assuming is Copenhagen based on its prevalence in discussions on this forum. We have the Professional plan and I have the relevant access to make code changes. Thanks!

You're on fire, Tom! Keep up the good work!

We'll give it a try, Tom, thanks!

Wes or Tom,

How about adding text to the right of the logo?

Thanks!

Hi Amie,

There may be a few ways to go about this but I am providing what worked for me. This is still referencing the header.hbs Tom talked about above. We just need to add code after the {{/link}} within the Logo divider. Code I added in Bold:

<div class="logo">
{{#link 'help_center'}}
<img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
{{/link}}
<span>Your Text Here</span>
</div>

Outcome:

Adding the <span> element makes it inline rather than its own block. May be a bit tricky if you need specific format etc but this should get you started. Thanks!

Hey Socorro - How can I change the font styling of the custom text? I want it to use the themes default font styling.

<span>Your Text Here</span>

Hey Henry,

There are a couple of ways to change the styling on this text but good practice is to add a CSS Class with the properties you want and then assign that class to the element.

Here as an example but you would need to add and edit to the style you want:

I added the following to my style.css page which creates a class we can use on our HTML:

.logotitle { 
color: #00FF00; 
font-family:arial; 
font-size: 18pt; 
}

Note: You could name this class anything you wanted but make sure its starts with a . and make sure it doesn't match another class or it will conflict.

Next, I need to assign this class to the element we want to impact. In this case, I want the text from the text we added before to be impacted. I went to the header.hbs and added the following in bold:

<div class="logo">
{{#link 'help_center'}}
<img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
{{/link}}
<span class="logotitle">Your Text Here</span>
</div>

Publishing this would now have my text look like the following"

You can now add/edit the styling properties on the CSS class you created. w3schools CSS section has more ideas on styling properties if you need a reference.

Cheers!

Thanks Socorro! This seems to have worked for me but how do I replace Arial with the system font being used on the Copenhagen theme? 

Hi Henry!

Glad to hear it is working for you!

The fonts you set in the settings panel can be used here too. You will need to use one of the following variables which will reference the heading font or text fonts:

• $heading_font is the font for headings
• $text_font is the font for body text

Go ahead and replace arial font with the one from above:

.logotitle { 
color: $text_color; 
font-family: $heading_font;
font-size: 18pt; 
}

The default theme fonts essentially add the following font family:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

More tips and tricks on Customizing your Help Center found Here

Let me know if you run into any issues here. Thanks!

Rock on Socorro! Thanks for the help. Some text alignment issues but I'll try playing around with it to get it perfect.