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

Solved in post #2, click to view
  • 5 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.

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

      I'll be putting this to use tonight!

      1. In reply toKajMagnus:
        PAndreas Pieber @pieber2020-04-04 14:19:15.010Z

        This works like a charm! Thank you very much for posting it here! I like it!

        1. KajMagnus @KajMagnus2020-04-06 11:23:07.474Z

          Ok thanks for writing and letting me know it works :- )
          Now I marked that answer as the solution (until some day in the future when there's a user friendly menu builder).

      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)