Adding text to header in Help Center

Répondu

11 Commentaires

  • Wes Drury
    Actions pour les commentaires Permalien

    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?

    0
  • Desiree Gregory
    Actions pour les commentaires Permalien

    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!

    0
  • Jessie Schutz
    Actions pour les commentaires Permalien

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

    1
  • Desiree Gregory
    Actions pour les commentaires Permalien

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

    0
  • Amie Barder
    Actions pour les commentaires Permalien

    Wes or Tom,

    How about adding text to the right of the logo?

    Thanks!

    0
  • Socorro Fernandez
    Actions pour les commentaires Permalien

    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!

    0
  • Henry
    Actions pour les commentaires Permalien

    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>
    0
  • Socorro Fernandez
    Actions pour les commentaires Permalien

    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!

    0
  • Henry
    Actions pour les commentaires Permalien

    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? 

    0
  • Socorro Fernandez
    Actions pour les commentaires Permalien

    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!

    0
  • Henry
    Actions pour les commentaires Permalien

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

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk