Change the application header


(Andrej) #1

Hello guys.
I would like to ask you how can the header be customized.
Currently i need this stuff:

  • Insert login-signup buttons to the menu from the right (where we can see the Latest/Badges/Users);
  • Insert the text to the application header near the login/signup buttons;

Is that possible?
BTW i am impressed by this application. Very good and professional work.

Thanks guys!


(Simon Cossar) #2

You can customize above and below the header very easily through the admin>customize menu.

In the attached screen shot, the area with the green background is customized through admin>customize>header. The area with the red border is customized through admin>customize>top.

To change the actual header - the area between the two custom areas - will probably require overriding the template with a plugin. It’s not that hard to do, but it could cause problems if they ever update the site in a way that isn’t compatible with the changes you make.


(Andrej) #3

Thanks!
Unfortunately there is no section named “Header” inside the admin/customize/header menu.
In addition, you are suggesting to change the custom header below the admin menu. Is that possible to change the admin menu from the top?


(Mittineague) #4

Maybe you’re thinking of something else or not looking in the right place?
Admin -> Customize -> CSS/HTML

You can name the “group” whatever of course, I named mine “ACP Cusomizations” and added divs like
<div id="inheader">added in ACP Customize Header</div>

checked “enabled” the "Saved"
after a refresh they show (with some CSS rules applied) as


(Simon Cossar) #5

Yeah, I missed the CSS/HTML step. :slight_smile: Do you have a mock-up of what you are trying to achieve?


(Tom Newsom) #6

It’s possible to push content into that row with position: fixed; and so on, but I haven’t been able to get things consistently aligned with the existing buttons.


(Mittineague) #7

Depending on what you mean by “near” the login button it will be easier or more work.

If you mean “above” it should be relatively easy using the ACP Customize interface.

If you mean “to the left of”, not so much.
What is added to “Header” is “outside” of the main content section which includes the logo, notification, search, hamburger and avatar etc and everything else i.e.

<div id="inheader">added in ACP Customize Header</div>
<section class="ember-application" id="main"></section>

- but - it can be done. eg.

If you want to add links in the hamburger menu, that’s relatively easy as a plugin by using the site-map-links plugin-outlet, links showing after “Users” and before “Keyboard Shortcuts”


(Andrej) #8

Hey guys,
thanks for the responses!
Let me explain more.
Here https://dl.dropboxusercontent.com/u/20470861/sample/sample.jpg you can see the previous screen. Is that possible to change the layout of the menu which is highlighted in blue?
Here’s the live project https://dl.dropboxusercontent.com/u/20470861/sample/sample3.png . Is that possible to paste the login/logout links in the dropdown menu which i highlighted with the rectangle?


(Mittineague) #9

You might want to hold off on that for now, changes are on the way
Though you could over-ride the template if you don’t mind the risk of things breaking after an upgrade.
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/header.hbs

the plugin-outlet works well for adding links (outlined in blue), possible problem being “Log Out” is not a link but some JavaScript magic.


(Andrej) #10

Thanks guys! I think this is what i am looking for.


(Andrej) #11

Hey guys,
one more question. I found that the folder with the application possible encoded - there only *.bin files and config files. Is there a way to change the application view files? Or this is impossible?
Thanks!


(Kane York) #12

Look at Sam's personal "minimal" topic list design for an example of how to customize the layouts.


(Andrej) #13

Thanks! It is helpful.
I expand the Discourse app on the localhost and the signup/login buttons placement was changed with success.
But, guys, when i am trying to find the application placement on the development server the search is fails. I can’t find the application on the dev server. Can you help me to find the default place where the application will be installed by default? It is rackspace hosting.