Create fully custom header

مطور
1

Hello guys. Is there any way to create fully custom header and do modifications with code.
For example i need to move panel from header to list-controls container
to make something like this ?

Снимок-экрана-от-2017-09-15-18-18-55
Снимок-экрана-от-2017-09-15-18-18-551248×355 48.6 KB

2

so no any suggestions ?

3

These kinds of changes usually require a custom plugin.

If you’ve never built a Discourse plugin before, here’s a guide to get started:

If you’re stuck on a more concrete problem, I’m sure you’ll get an answer here :slight_smile:

Alternatively, if you don’t want to build the plugin yourself, you can also create a topic with your budget in Marketplace.

4

I need a plugin to move some html code ??? This is ridiculous

5

يمكنك تجربة شيء مثل هذا للبدء:

.panel.clearfix {top: 65px;}
#create-topic {margin-right: 130px;}

ولكن ستحتاج إلى اختبار جميع دقات الشاشات للأجهزة الأكثر استخدامًا، وتعديل CSS باستخدام استعلامات الوسائط، وتوقع جميع الحالات التي قد يواجه فيها المستخدم مشاكل.

D97Gnex
(لهذا السبب نصحك @fefiri بكتابة إضافة، فعادةً ما يكون ذلك أكثر قابلية للصيانة)

6

not a good idea. i need to move element from header, and make .d-header { display:none }

7

What is the purpose of making the entire header invisible if I can ask?

8

I’ll recommend you to think about your language :slight_smile:

Discourse isn’t just plain HTML and CSS. Your request will change how the normally structure is build, as far as i know. So that’s why people recommend you to make a plugin. You could also look into a theme-solution, but i would not recommend that for that kind of changes :slight_smile:

Update: Fixed typos. My keyboard isn’t happy about the English lang.

9

cause i need to insert another custom header

Снимок экрана от 2017-09-18 12-08-20
Снимок экрана от 2017-09-18 12-08-20748×111 2.33 KB

10

Do you really need to replace the existing header? If you’re fine with adding an additonal header (line) on top, things get way easier. You can get something like this up and running in a few minutes:

image
image1281×208 11 KB

11

Yes, I actually already do this. But my problem is not going anywhere. I need to move user panel right after the ‘new topic’ button. I can do this like @Trash say, but i think absolute positioning is not good way, because on another pages, this panel will be just floating in free space

Снимок экрана от 2017-09-18 12-18-39
Снимок экрана от 2017-09-18 12-18-391647×679 67.2 KB

12

Also consider hiding the discourse header means hide the title of the discussion (and eventually the category and tags) and moving the navigation menu outside the header means that a user has access to essential features only on the homepage.

Look for a way to integrate the two menus that do not involve making the discourse header invisible. Otherwise you could make your site really complicated to navigate.

Your custom menu is a dropdown menu?
If it is not, you can enter the menu into the discourse header for example.

13

I am still having trouble understanding when “docked” gets applied as a class to the body. And so I feel like I am playing whack-a-mole with the various pages and display: none-ing everywhere. What is the best way to have a custom home page and hide it everywhere else? (reference: https://community.mistyrobotics.io/)

14

One way to do that is to hide / show the custom content on based on the url.

Something like this:

<script type="text/discourse-plugin" version="0.8.16">
    api.onPageChange((url) => {
        // hero hidden by default 
        $('#home-hero').hide()
        // if on homepage(s), show hero
        if (url === '/' || url === '/latest' || url === '/top' || url === '/categories') {
            $('#home-hero').show()
        }
    });
</script>

This works but is not ideal as it checks on every page change.