Originally this post was a question on how to configure the status buffer by only having tabs and modes. But I figured it out so I edited the irrelevant bits away so it is easier to navigate for future curious folks. I go over what I did below.
Deleted. No longer relevant.
I did it! Thanks @jmercouris for your config I’ve been piecing together things from it and figured this out thanks to that and trial and error. For all future people I’ll have a brief explanation below.
First do note that I have a style.lisp separate from my init.lisp. So first in my init.lisp I have:
(defun my-format-status (window)
(let ((buffer (current-buffer window)))
(markup:markup
(:div :id "container"
(:div :id "tabs"
(markup:raw (format-status-tabs)))
(:div :id "modes"
(markup:raw
(format-status-load-status buffer)
(format-status-modes buffer window)))))))
(define-configuration window
((status-formatter #'my-format-status)))
This is what (by my understanding) is telling the status buffer container what to include and where. Pay attention to the arguments listed in the functions for format-status-xxxxx as those need to be included. The div id part is referencing your css; which leads me to the below in my style.lisp:
(define-configuration status-buffer
((style (str:concat
%slot-default%
(cl-css:css
'(("#container"
;; Columns: tabs, modes
:grid-template-columns "90% 10%")
("#modes"
:background-color "black"
:border-top "1px solid white")
(".button:hover" :color "white")
("#tabs"
:background-color "black"
:color "white"
:border-top "1px solid white")
(".tab:hover" :color "white"))))))))
So obviously the colors are just what I wanted but the important bit is your #container section as using the :grid-template-columns tells the sections we defined in the init.lisp how much space to take up. I just used percentages to keep things flexible. The order of those corresponds with the order of your divs in the init file.
So if I did :grid-template-columns "10% 90%" instead then the tabs would take up 10% of what is available and the modes would have 90%.
As a further example if you just wanted to quickly customize the sizes of what is currently there (controls, url, tabs, modes) you can just add the below.
(define-configuration status-buffer
((style (str:concat
%slot-default%
(cl-css:css
'(("#container"
;; Columns: controls, url
:grid-template-columns "25% 25% 25% 25%")))))))
And that would give each div a quarter of the space available. Obviously, you could of course swap those values out for other css like px and fr values. So that’s all. Image of mine below.
1 Like
Glad you figured it out! Looks super cool 
Also, thank you for providing the explanation! That will help people in the future hopefully!
Nice! Thanks for sharing.
Here is also a nice thing that you can try, open the Nyxt REPL, then:
(ffi-inspector-show (status-buffer (current-window)))
then you can inspect and see how things are rendered. Helps quite a bit
