• ModeratorWes

  • 21. Mai 2018 14:33

  

  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?

• Desiree Gregory

  • 21. Mai 2018 14:42

  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!

• Jessie Schutz

  • 29. Mai 2018 15:22

  Zendesk Customer Care

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

• Desiree Gregory

  • 12. Juni 2018 23:37

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

• Amie Barder

  • 15. April 2019 21:37

  Wes or Tom,

  How about adding text to the right of the logo?

  Thanks!

• Socorro Fernandez

  • 16. April 2019 17:30

  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!

• Henry Nahum

  • 24. April 2019 16:41

  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>

• Socorro Fernandez

  • 24. April 2019 18:48

  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!

• Henry Nahum

  • 24. April 2019 22:14

  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? 

• Socorro Fernandez

  • 24. April 2019 22:54

  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!

• Henry Nahum

  • 25. April 2019 14:52

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

Post ist für Kommentare geschlossen.