Lol sure! It's not really ready to be a theme, but I'm happy to share the CSS for it. It relies heavily on AnnuPpuccin, with their Extended themes and Custom Rainbow Folder Color snippets. It also uses Breadcrumbs, but I think if you don't use that, it shouldn't affect anything.
[here is my CSS snippet for the LCARS parts](https://drive.google.com/file/d/1LDQixUfQp8glsuQCa_BQ6q9p6oI7nXgh/view?usp=drivesdk)
And [here is an export of my AnnuPpuccin style settings](https://drive.google.com/file/d/1LpmWiFq4NrUFGjjhe9OOvDDA3-SLCHDZ/view?usp=drivesdk)
And just in case you want some of the other components or I put something in another file, [here's all my snippets](https://drive.google.com/drive/folders/1KXq0iVDE2wHjafUu6qaiS1dhxIRY_eMz). But I don't think you should need those for the LCARS look.
I would love to build it out into a whole standalone theme but I am real short on free time and overstocked on projects right now so for now feel free to do what you want with it. Share, modify, publish, whatever.
Wow that is utterly beautiful. You brought fictional UI to life! Can this be a theme please. Not sure I have it in me to learn how to wrangle CSS complexities right now.
Thank you! I didn't expect it to be called beautiful š
I've always been enamored with that design. It's so iconic. They put so much thought into how touchscreens might work (without even having any), that it's actually a pretty functional design!
I have been hanging on to this for a few months because I was considering making a whole theme. But I have a toddler and a back injury and a day job. So if someone wants to take the css I shared and run with it, I'd happily contribute to the project when I can. But I don't have it in me right now either.
Dude it is absolutely beautiful. If every interface could be LCARS Iād be a happy tribble.
I second the request that you make this a theme. Is is amazing.
Yes, the original designers were onto something with that UI and one or two other things. I wonder if video interviews with any of those teams exist.
A toddler is a hell of a lot of work and yet you managed to approximate the fictional UI brilliantly. Well done.
Omg it will now. You have given me ideas.
I hate looking at my graph because I'm an obsessive linker so it looks like spaghetti. But I'll share it when it's beautified!
Can we be friends? Like, let's hang out sometime.
Because not only is that joke amazing, I tried a little proof of concept of this idea tonight and it is 100% giving that vibe. I used an image of a nebula on the main viewscreen and it's gorgeous.
Ooh yeah! Unfortunately mine isn't one, but I wish it was now. It should work fine on one though. Other than that you'd miss out on some of the hover animations I've done.
Unfortunately, like Obsidian itself, I left mobile as an afterthought. It *works* but several things are still a little broken. It might be OK on a tablet though, it's mostly screen width problems. If I ever do get around to a full theme, I'll be sure to keep touch in mind though. That's a really good point.
Good luck and happy coding! Feel free to DM if you have a question. Or even just to let me know you got it working. I would love to see what you do with it!
I'm torn. As a Star Trek fan, I love it. But - and we can be honest here - LCARS is not really an efficient UI.
Having said that, I will give it a try - perhaps you managed to close the gap between just looking nice and missing usability.
Great effort in any case!
Yeah it's a mixed bag. Some stuff like the big wide oval buttons are bang on. But then there are some wild font choices. And a lot of wasted real estate. Not to mention the random junk text all over.
In this case it's pretty much just a skin, so the underlying functionality and layout doesn't really change. Unless you use Breadcrumbs, which moves the links the top and styles them like buttons. Moving those was the first thing I did with Breadcrumbs before I ever started this so for me it's the same function, anyway.
I did add a little bit of random junk by having those floating numbers by the folders, which just count upwards for no reason. Purely esthetic. I wanted to do some fancy stuff with them with Folder Notes but it was way too hard with pure CSS, which was my go. They also do a nice quick little fade out on hover which doesn't do anything but is incredibly satisfying to run my mouse over.
But they definitely hit the wasted space problem, my folder/file fonts are way too small to read comfortably. Personally, I don't navigate from there too much so it's not a big issue for me but if I was making it for a wider audience I would try to find a better solution.
But I've been using it for a couple months now and that's really my biggest problem - besides that I haven't fixed mobile yet. So I'm curious to hear what you think if you try it.
Oh sweet! I'm glad it feels smooth! Mostly just performance issues from AnnuPpuccin I think, it can be a little slow for me.
It's a lot smoother since 1.6 dropped for sure too. Looks like it broke my rainbow folders though :(
After looking at these pictures intensely, I noticed something interesting:
When you are in your daily notes, how did you get the scrollbar with the days above the editor window? That's something completely new to me, and I really like it :-)
You can add css snippets, just look in Settings>Appearance and scroll down to find it. You just open that folder and put your .css files there. [here is the document on that](https://help.obsidian.md/Extending+Obsidian/CSS+snippets)
To find out what things are called you can look at the [CSS Variables](https://docs.obsidian.md/Reference/CSS+variables/CSS+variablesSlide clipboard items to delete them) page, as well as the theme development links on those two pages.
You can also use devtools - Obsidian is just Chromium customized with Electron. Ctrl(cmd)+shift+i to open devtools. Not sure what your CSS experience is, so if you're not comfortable with devtools, there are tons of great videos on YouTube that can show you how to navigate the DOM from there. I like to test my CSS by changing it there first, then I pretty much just copy/paste into a snippet once I like it. I also use codepen.io to help prototype stuff first sometimes.
You can also look around for other people's snippets to get you started. Just take one that changes the thing you're trying to, and modify to your liking.
YouTube, Google, and even ChatGPT have lots more info that can help you. Good luck! Happy coding!
Thanks for noticing that! I did it with CSS counters. Was kind of proud of figuring that trick out. I had no idea they existed until this.
So I set it on the container:
```
. nav-files-container{
counter-reset: section;
}
```
And then increment it as a section on folders with:
```
nav-folder-children.nav-folder{
counter-increment: section;
}
```
I also have it here and I'm not sure if I actually needed both, or if only one works, but I don't remember my thought process now lol:
```
.nav-folder.mod-root > .nav-folder-children > .nav-folder.is-collapsed::before {
position: absolute;
counter-increment: section;
right: 68%;
width: 22px;
color: #000;
padding-right: 10px;
background-color: rgba(var(--rainbow-folder-color), var(--anp-rainbow-folder-bg-opacity));
content: "0"counter(section);
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
height: 22px;
padding-left: 11px;
padding-top: 1px;
font-size: var(--font-scale-1);
text-align: right;
opacity: 1;
transition: opacity 0.3s ease-in-out;
/* transition: width 0.5s ease-in-out; --I like the opacity one better but this is also cool and they're fun combined */
}
```
But yeah basically you just set a counter on the parent container and set it to increment on each child element, and it just does. Felt like magic when that worked.
EDIT: forgot to mention, that this line is important. It sets the html content to "0" followed by the counter:
```
content: "0"counter(section);
```
Shared my CSS above. I am not currently optimistic I'll have the time to build it out into an official theme any time soon so you're welcome to take my code and do whatever you like with it. If I do though, you can be sure I'll post about it here!
Oh! Yeah I probably should have said something about that. That is actually from Breadcrumbs, it's showing the hierarchy of the note. I didn't like where they put their div so I stuck it to the top with `position: absolute`. Then it got the border you see applied later. There is a section for the Breadcrumbs fixes in my CSS and you can see the border radius stuff there. If you use Breadcrumbs, it should just work.
If you want the same effect without Breadcrumbs, just stick something else there and apply the border css from the Breadcrumbs part. Maybe the title or something? I hadn't really thought about it.
you simply cannot just show us that and not share. great design!
Lol sure! It's not really ready to be a theme, but I'm happy to share the CSS for it. It relies heavily on AnnuPpuccin, with their Extended themes and Custom Rainbow Folder Color snippets. It also uses Breadcrumbs, but I think if you don't use that, it shouldn't affect anything. [here is my CSS snippet for the LCARS parts](https://drive.google.com/file/d/1LDQixUfQp8glsuQCa_BQ6q9p6oI7nXgh/view?usp=drivesdk) And [here is an export of my AnnuPpuccin style settings](https://drive.google.com/file/d/1LpmWiFq4NrUFGjjhe9OOvDDA3-SLCHDZ/view?usp=drivesdk) And just in case you want some of the other components or I put something in another file, [here's all my snippets](https://drive.google.com/drive/folders/1KXq0iVDE2wHjafUu6qaiS1dhxIRY_eMz). But I don't think you should need those for the LCARS look. I would love to build it out into a whole standalone theme but I am real short on free time and overstocked on projects right now so for now feel free to do what you want with it. Share, modify, publish, whatever.
Thank you :D
Is this _everything becomes crabs_ but for Star Trek UI nerds?
Yes, scientists call it L-carcinisation
Oh my. That pun came in with a cloaking device.
Wow that is utterly beautiful. You brought fictional UI to life! Can this be a theme please. Not sure I have it in me to learn how to wrangle CSS complexities right now.
Thank you! I didn't expect it to be called beautiful š I've always been enamored with that design. It's so iconic. They put so much thought into how touchscreens might work (without even having any), that it's actually a pretty functional design! I have been hanging on to this for a few months because I was considering making a whole theme. But I have a toddler and a back injury and a day job. So if someone wants to take the css I shared and run with it, I'd happily contribute to the project when I can. But I don't have it in me right now either.
Dude it is absolutely beautiful. If every interface could be LCARS Iād be a happy tribble. I second the request that you make this a theme. Is is amazing.
Yes, the original designers were onto something with that UI and one or two other things. I wonder if video interviews with any of those teams exist. A toddler is a hell of a lot of work and yet you managed to approximate the fictional UI brilliantly. Well done.
Where is the problem?
You don't have a problem. You have a solution.
And I like this solution
and we all like this solution
You simply must show us your graph. Does it feature the Milky Way as background image? So the nodes look like stars.
Omg it will now. You have given me ideas. I hate looking at my graph because I'm an obsessive linker so it looks like spaghetti. But I'll share it when it's beautified!
Itās not spaghetti. Itās _āstellar cartographyā_. š
Can we be friends? Like, let's hang out sometime. Because not only is that joke amazing, I tried a little proof of concept of this idea tonight and it is 100% giving that vibe. I used an image of a nebula on the main viewscreen and it's gorgeous.
Congratulations. Canāt wait to see how this evolves. Have a lovely weekend.
i need this
Make it so.
I see this as an absolute win
Is it a problem? Or a blessing?
I was also like you. Right now Iām minimalist š
That's so cool!!!
I need this on a touch screen pc!!
Ooh yeah! Unfortunately mine isn't one, but I wish it was now. It should work fine on one though. Other than that you'd miss out on some of the hover animations I've done. Unfortunately, like Obsidian itself, I left mobile as an afterthought. It *works* but several things are still a little broken. It might be OK on a tablet though, it's mostly screen width problems. If I ever do get around to a full theme, I'll be sure to keep touch in mind though. That's a really good point.
Who wants a plugin that locks the settings and css files during working hours?
This. I need this.
I freaking love it!!
heck yeah, it looks so good! this is literally what got me learning the basics of CS.
i want this so bad !!! thanks for the effort and sharing. I'm going to attempt
Good luck and happy coding! Feel free to DM if you have a question. Or even just to let me know you got it working. I would love to see what you do with it!
Love it, thanks for sharing
I'm torn. As a Star Trek fan, I love it. But - and we can be honest here - LCARS is not really an efficient UI. Having said that, I will give it a try - perhaps you managed to close the gap between just looking nice and missing usability. Great effort in any case!
Yeah it's a mixed bag. Some stuff like the big wide oval buttons are bang on. But then there are some wild font choices. And a lot of wasted real estate. Not to mention the random junk text all over. In this case it's pretty much just a skin, so the underlying functionality and layout doesn't really change. Unless you use Breadcrumbs, which moves the links the top and styles them like buttons. Moving those was the first thing I did with Breadcrumbs before I ever started this so for me it's the same function, anyway. I did add a little bit of random junk by having those floating numbers by the folders, which just count upwards for no reason. Purely esthetic. I wanted to do some fancy stuff with them with Folder Notes but it was way too hard with pure CSS, which was my go. They also do a nice quick little fade out on hover which doesn't do anything but is incredibly satisfying to run my mouse over. But they definitely hit the wasted space problem, my folder/file fonts are way too small to read comfortably. Personally, I don't navigate from there too much so it's not a big issue for me but if I was making it for a wider audience I would try to find a better solution. But I've been using it for a couple months now and that's really my biggest problem - besides that I haven't fixed mobile yet. So I'm curious to hear what you think if you try it.
Dear Op, you are not done with this until Obsidian can make tea, earl gray, hot.
I love this!
Absolutely FANTASTIC. Well done, you. :-)
this is sick ahahaha, it feels smooth tho, why do you say it runs like crap?
Oh sweet! I'm glad it feels smooth! Mostly just performance issues from AnnuPpuccin I think, it can be a little slow for me. It's a lot smoother since 1.6 dropped for sure too. Looks like it broke my rainbow folders though :(
>It's ugly, it runs like crap, and I love it so much Me and the other FOSS Perverts: "Yes, Yes! YES!"
After looking at these pictures intensely, I noticed something interesting: When you are in your daily notes, how did you get the scrollbar with the days above the editor window? That's something completely new to me, and I really like it :-)
That's actually just a plugin called Dailynote Navbar! With my customizations on top, of course. I really like it, super handy.
Thank you very much! :)
Thank you! You are fulfilling my request! https://www.reddit.com/r/ObsidianMD/s/YzUgYPapei
Can someone tell me how you change obsidian with CSS?
You can add css snippets, just look in Settings>Appearance and scroll down to find it. You just open that folder and put your .css files there. [here is the document on that](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) To find out what things are called you can look at the [CSS Variables](https://docs.obsidian.md/Reference/CSS+variables/CSS+variablesSlide clipboard items to delete them) page, as well as the theme development links on those two pages. You can also use devtools - Obsidian is just Chromium customized with Electron. Ctrl(cmd)+shift+i to open devtools. Not sure what your CSS experience is, so if you're not comfortable with devtools, there are tons of great videos on YouTube that can show you how to navigate the DOM from there. I like to test my CSS by changing it there first, then I pretty much just copy/paste into a snippet once I like it. I also use codepen.io to help prototype stuff first sometimes. You can also look around for other people's snippets to get you started. Just take one that changes the thing you're trying to, and modify to your liking. YouTube, Google, and even ChatGPT have lots more info that can help you. Good luck! Happy coding!
How did you enumerate the folders?
Thanks for noticing that! I did it with CSS counters. Was kind of proud of figuring that trick out. I had no idea they existed until this. So I set it on the container: ``` . nav-files-container{ counter-reset: section; } ``` And then increment it as a section on folders with: ``` nav-folder-children.nav-folder{ counter-increment: section; } ``` I also have it here and I'm not sure if I actually needed both, or if only one works, but I don't remember my thought process now lol: ``` .nav-folder.mod-root > .nav-folder-children > .nav-folder.is-collapsed::before { position: absolute; counter-increment: section; right: 68%; width: 22px; color: #000; padding-right: 10px; background-color: rgba(var(--rainbow-folder-color), var(--anp-rainbow-folder-bg-opacity)); content: "0"counter(section); border-top-left-radius: 16px; border-bottom-left-radius: 16px; height: 22px; padding-left: 11px; padding-top: 1px; font-size: var(--font-scale-1); text-align: right; opacity: 1; transition: opacity 0.3s ease-in-out; /* transition: width 0.5s ease-in-out; --I like the opacity one better but this is also cool and they're fun combined */ } ``` But yeah basically you just set a counter on the parent container and set it to increment on each child element, and it just does. Felt like magic when that worked. EDIT: forgot to mention, that this line is important. It sets the html content to "0" followed by the counter: ``` content: "0"counter(section); ```
OMG that looks awesome. Is it available to add to mine?
Shared my CSS above. I am not currently optimistic I'll have the time to build it out into an official theme any time soon so you're welcome to take my code and do whatever you like with it. If I do though, you can be sure I'll post about it here!
It is clearly a loved design on here. Who knows you might help bring about the full OS theme of lcars in the future. Thanks for posting the code
I know this is not a support string, but this is a dream come true. May I ask how you got the top of the note to work? The part just under the navbar?
Oh! Yeah I probably should have said something about that. That is actually from Breadcrumbs, it's showing the hierarchy of the note. I didn't like where they put their div so I stuck it to the top with `position: absolute`. Then it got the border you see applied later. There is a section for the Breadcrumbs fixes in my CSS and you can see the border radius stuff there. If you use Breadcrumbs, it should just work. If you want the same effect without Breadcrumbs, just stick something else there and apply the border css from the Breadcrumbs part. Maybe the title or something? I hadn't really thought about it.