No internet connection
  1. Home
  2. Support

How to show header like your site like Talkyard Community forum

By Arjun @exam4india
    2018-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. 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 @codywarmbo
          2018-08-25 15:24:19.937Z

          I'll be putting this to use tonight!

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

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

              1. 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).

            • In reply toexam4india:

              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)