No internet connection
  1. Home
  2. Support

How to show header like your site like Talkyard Community forum

By Arjun @exam4india2018-07-06 06:51:16.177Z

Hi Kaj,

Is there already a way to show header and logo in Talkyard-Prod. I need to do customization of Talkyard. Can you suggest something for it.

Regards
Arjun Singh

  • 3 replies
  1. KajMagnus @KajMagnus2018-07-06 15:01:50.559Z

    Hi Arjun, Yes, click your name menu (upper right corner), then click Admin, click Look and feel, then click HTML, then type something in the Header HTML textarea. This what I use:

    <div id="topbar">
    <div class="container">
      <div style="float:left">
      <a class="logo-slogan" href="/">
        <img src="https://...link-to-out-of-date-logo..."><span class="logo">Talkyard</span>
      </a>
      </div>
      <nav id="site-nav">
          <a href="/">Home</a>
          <a href="/forum/">Community</a>
          <a href="/about">About</a>
          <a href="/pricing">Pricing</a>
          <a href="/dev/-81n25/technical-information">For developers</a>
      </nav>
    </div>
    </div>
    

    And then you'll want to add some CSS too, if you click JS and CSS to the left. I had a look, seems this is all (?) I've added:

    #topbar>.container a {
        color: hsl(0, 0%, 83%);
        font-size: 15px;
    }
    #topbar .logo-slogan img {
        width: 40px;
        display: inline;
        margin: 0 10px 0 0;
        padding: 1px;
        vertical-align: middle;
        top: -2px;
        position: relative;
    }
    .logo {
      font-size: 18.7px;
      font-style: normal;
      font-weight: bold;
      vertical-align: middle;
    }
    .esActiveHeaderLink:not(.logo-slogan) {
        font-weight: bold;
        text-decoration: underline;
        cursor: default;
    }
    

    Maybe I forgot something. ... I'd like to make this more easy to customize, so people won't need to understand HTML and CSS. Maybe this'll include refactoring CSS class names, and maybe the CSS styling of your top header will then partly break — and I can add a note about notifying you about that in advance, so hopefully we can avoid that.

    1. CCody @codywarmbo2018-08-25 15:24:19.937Z

      I'll be putting this to use tonight!

    2. In reply toexam4india:
      KajMagnus @KajMagnus2018-07-20 15:33:11.029Z

      Hi Arjun @exam4india, what happened, did you get time to try this? Or does the "solution" maybe look a bit too complicated?

      Could you maybe share a link to a website where I can see how your logo and header looks? (You could send a private message if you want, click my name)

      Then I can keep that in mind, later when I start building a user friendly interface for customizing colors, fonts, header and logo. (CSS isn't really user friendly I suppose (or what do you think) ... except maybe for designers)