Hello World - Customizing a theme basics
Note: Two things I wish this forum supported is:
1) A better solution for including images in posts. Maybe a simple button to insert an image from ImgBB? Currently I have to go post my image somewhere like imgbb.com then dig down to get the actual image file by coping image link then use that on this forum. It works but seems like that should be something with more support on a forum. Or maybe (dev time permitting) just support image uploads directly like inline image pastes?
2) A way to post a spoiler/quote/code/text block of some type. Currently pasting a snippet from one of the theme files looks horrible and makes the post look huge. I personally love the way they do it on the stack exchange sites (such as stackoverflow.com) with syntax highlights etc.
Trying to understand how custom theming works. My goal is to simply change things to render some optional text on the Pi's monitor.
Currently I have a screen that looks like this…
A snippet of the current HTML file located at…
“%LOCALAPPDATA%\MoBro\app-1.0.0-beta2\resources\resources\public\theme\dubbadhar\”:
<h1>CPU</h1>
<h2 id="mobro-cpu-name" class="text-nowrap text-truncate"></h2>
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive-item centered">
<div class="row row-gutter--3">
<div class="col-6">
<span class="text-left d-block">LOAD - <span>%</span></span>
<h3 class="text-right" id="cpu-current-load"></h3>
<div class="chart-wrapper">
<canvas id="cpu-chart-line" width="100%" height="60%" data-name="LOAD" data-unit="%"></canvas>
</div>
</div>I want to change the text of “LOAD - %” to “HELLO WORLD - %”.
So I copied the file “index.html” from the theme folder (dubbadhar) to the folder…
“%LOCALAPPDATA%\MoBro_Local\public\theme\”.
Then I edited the index.html file to show the following…
<h1>CPU</h1>
<h2 id="mobro-cpu-name" class="text-nowrap text-truncate"></h2>
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive-item centered">
<div class="row row-gutter--3">
<div class="col-6">
<span class="text-left d-block">HELLO WORLD - <span>%</span></span>
<h3 class="text-right" id="cpu-current-load"></h3>
<div class="chart-wrapper">
<canvas id="cpu-chart-line" width="100%" height="60%" data-name="LOAD" data-unit="%"></canvas>
</div>
</div>After editing the span under the CPU node containing the "LOAD - " text I see no change on the display (also viewing it via browser on my local machine). I was hoping to see a change that looks like the following…
So what I'm I doing wrong? Is there any type of new tutorial about how to make your own Hello World custom theme from scratch?
Hey @Arvo Bowen III
So I think you are pretty close to the solution here. Did you create a folder “dubbadhar” in the “%LOCALAPPDATA%\MoBro_Local\public\theme\” folder and pasted the html in that folder? Oh and also after a change you would need to refresh the browser or restart the pi (or just reload the theme by switching to another theme and then back again)
There is currently no real in depth tutorial because the whole “how to create a theme” will change completely once we are finished with our theme customization feature.
To your two notes:
1) Yes that would be great, it's just then we are hosting images and that's a legal issue for us. We're currently talking to a legal team so we can set something up like a image upload. It's just so much more work then we initially thought because we just wanted to share our free software. Now there are lot's of things to consider and laws to follow, as well as costs that we need to invest in. But yes, we want that as well!
2) Yep that's also already in the works!
Hey @Arvo Bowen III
So I think you are pretty close to the solution here. Did you create a folder “dubbadhar” in the “%LOCALAPPDATA%\MoBro_Local\public\theme\” folder and pasted the html in that folder? Oh and also after a change you would need to refresh the browser or restart the pi (or just reload the theme by switching to another theme and then back again)
There is currently no real in depth tutorial because the whole “how to create a theme” will change completely once we are finished with our theme customization feature.
To your two notes:
1) Yes that would be great, it's just then we are hosting images and that's a legal issue for us. We're currently talking to a legal team so we can set something up like a image upload. It's just so much more work then we initially thought because we just wanted to share our free software. Now there are lot's of things to consider and laws to follow, as well as costs that we need to invest in. But yes, we want that as well!
2) Yep that's also already in the works!
Awesome @GhosTz ! I have not tried adding the theme folder just yet but I'm sure that's what I was missing! Thanks for everything.
Hey @Arvo Bowen III
We've now updated the website and added features you requested from the initial posting. You can now upload images directly to our website and also add code-highlighting as snippets in postings and comments.
Oh and you can now also add your custom profile image ?
~ Mike
Nice! Thanks Mike.
I wish I knew just a tiny bit of coding…. When I try and change the CPU load to a doughnut style it crashes the theme lol (because I'm only editing the HTML file and don't know what I'm doing haha)