Mozilla Bunsenlabs

marens · 2023-10-03 12:59:42

For years, my hobby has been editing Firefox without installing addons and themes.
Home (Start) pages have never been something I'm particularly interested in.
Today I tried to create a Mozilla Bunsenlabs page using an old one that I used a long time ago.

If you want to try it:

Everything is provided as is, i made this for personal use.

Download mozilla_bunsenlabs.tar.xz file:
https://workupload.com/file/P4zJ9ETjg4J

Extract in Downloads.
You will get mozilla_bunsenlabs folder.
Copy and paste in HOME folder.
Rename in .mozilla_bunsenlabs.

Open ~/.mozilla_bunsenlabs folder > Right click on index.html file > Copy.
Open Firefox and paste in URL bar > Enter.
Note:
Data by OpenWeather

Clicking on the weather widget provides a detailed forecast for your location.

If you like it, add it to your bookmarks or set it as your home page.
If you don't like it just delete ~/.mozilla_bunsenlabs folder.

You can find other instructions in the readme file.

Last edited by marens (2023-10-03 13:17:03)

johnraff · 2023-10-04 04:58:27

Thanks! That works nicely.

As soon as you post something like this, greedy users will ask for enhancements...

How hard would it be to make the logo at the bottom a clickable link to the BL forums? Just asking.

marens · 2023-10-04 12:16:16

@johnraff

It's just a background image and I don't think it's possible to link the Bunsenlabs forums.

It was important to me that the position could be easily changed.
For example the code below gives the position of the logo (index.html) at the bottom right:

background-position: 90% 100%

If we open the ~/.mozilla_bunsenlabs/style.css file in the same way, we can change position the weather and time (left, top, width).
That way, everyone can set up the Mozilla Bunsenlabs page as they like.

My color scheme for weather widget (index.html) now looks like this:

<a class="weatherwidget-io" href="https://forecast7.com/en/48d862d35/paris/" data-label_1="Paris" data-label_2="Weather" data-theme="original" data-days="7" data-highcolor="#ff6060" data-lowcolor="#0060ff" data-suncolor="#e08020" data-mooncolor="#c4c400" data-cloudcolor="#8a8e90" data-raincolor="#5294e2" data-snowcolor="#ffffff" data-windcolor="#c4c400" data-fogcolor="#778899" data-textcolor="#dadada" data-thundercolor="#e08020" data-dayscolor="#2cb8bc" data-tempcolor="#d4d400" data-label1color="#c4c4c4" data-label2color="#0060ff" data-desccolor="#e4e4e4" data-basecolor="rgba(0, 0, 0, 0)" >Weather</a>

Last edited by marens (2023-10-04 12:29:55)

hhh · 2023-10-04 12:34:38

johnraff wrote:

As soon as you post something like this, greedy users will ask for enhancements...

You're darn tootin' we will!

Mine would be to add the "most visited sites" strip and maybe the search bar that one sees when you open a new tab.

Nice work, @marens!

marens · 2023-10-04 16:45:25

@johnraff
@hhh

Thanks.

I found a compromise solution.
I made a Bunsenlabs forums button on the top right.
Of course, changes are needed.

Now the index.html file looks like this:

<!DOCTYPE html>
<html>

    <link rel="icon" 
      type="image/png" 
      href="flame.png" />

    <title>Mozilla Bunsenlabs</title>
    
    <a href="https://forums.bunsenlabs.org"><button title="Go to the Bunsenlabs forums" >Bunsenlabs forums</button></a>
    
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="style.css"/>
    
    <style>
    body,h1,h2 {margin: 0}
    h1 {color: #c4c4c4; text-align: center}
    h2 {color: #d4d400; font-size: 19px; padding-left: 4px; text-align: center}
    body, html {margin: 0; height: 100%; overflow: hidden}
    body {
    background-color: #202020;
    background-image: url("./bunsenlabs.png");
    background-size: 240px 240px;
    background-repeat: no-repeat;
    background-position: 50% 100%
    }
    
    button {background-color: #006000; color: #dedede; border-color: #101010; border-radius: 6px}
    button:hover {background-color: gold; color: #404040}
    button:active {background-color: white}
    
    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>

<body>
<div class=time>
<div class="w3-display-middle w3-text-white w3-center">
    <h1 class="w3-jumbo"><span id="time"></span></h1>
    <h2><span id="date"></span></h2>    
</div>
</div>
<div class="weather">
    <a class="weatherwidget-io" href="https://forecast7.com/en/48d862d35/paris/" data-label_1="Paris" data-label_2="Weather" data-theme="original" data-days="7" data-highcolor="#ff6060" data-lowcolor="#0060ff" data-suncolor="#e08020" data-mooncolor="#c4c400" data-cloudcolor="#8a8e90" data-raincolor="#5294e2" data-snowcolor="#ffffff" data-windcolor="#c4c400" data-fogcolor="#778899" data-textcolor="#dadada" data-thundercolor="#e08020" data-dayscolor="#2cb8bc" data-tempcolor="#d4d400" data-label1color="#c4c4c4" data-label2color="#0060ff" data-desccolor="#e4e4e4" data-basecolor="rgba(0, 0, 0, 0)" >Weather</a>
    <script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
    </script>
</div>

<script>
    function timer(){
        const date = moment().format("dddd, D MMM YYYY");
        const time = moment().format("HH:mm:ss");
        document.getElementById('date').innerHTML = date;
        document.getElementById('time').innerHTML = time;
        // update every second
        setTimeout(timer,1000);
    }
    timer();
    </script>

</body>
</html>

And style.css file:

.weather {
    position: absolute;
    left: 5%;
    top: 5%;      
    width: 40%;
    display: block;
}

.time {
    position: absolute;
    left: 55%;
    top: 45%;      
    width: 40%;
    display: block;
}

button {
    position: absolute;
    left: 82%;
    top: 3%;
    display: block;
}

Screenshots:

Last edited by marens (2023-10-04 21:51:05)

johnraff · 2023-10-05 07:00:21

That works.

marens · 2023-10-06 12:07:03

My resolution is 1440x900.
I mostly use a unmaximized Firefox window (1000x700).

Now I see that the Bunsenlabs Forums button is not where I want it to be when the window is maximized (1376x845).
It's not hard to fix, open it style.css file and replace the button section with:

button {
    position: absolute;
    right: 20px;
    top: 20px;
    padding-top: 3px;
    display: block}

When you hover over the Bunsenlabs forums button there is no cursor 'hand icon'.
I just added at the end of this line (index.html file) 'cursor: pointer'.

button {background-color: #006000; color: #dedede; border-color: #101010; border-radius: 6px; cursor: pointer}

marens · 2023-10-09 16:05:24

johnraff wrote:

How hard would it be to make the logo at the bottom a clickable link to the BL forums? Just asking.

Done.

In the same folder, create an index_BL.html file with content:

<!DOCTYPE html>
<html>

    <link rel="icon" 
      type="image/png" 
      href="flame.png" />

    <title>Mozilla Bunsenlabs</title>
    
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="style.css"/>
    
    <style>   
    
    body,h1,h2 {margin: 0}
    h1 {color: #c4c4c4; text-align: center}
    h2 {color: #d4d400; font-size: 19px; padding-left: 4px; text-align: center}
    body, html {margin: 0; height: 100%; overflow: hidden}
    body {
    background-color: #202020;
    }
    
    #logo a img.clickable-logo {position: absolute; height: 240px; width:  240px; left: 40%; top: 60%; display: block}
    
    </style>
    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>

<body>

<div id="logo">
     <a href="https://forums.bunsenlabs.org">
         <img class="clickable-logo" src="bunsenlabs.png" alt="logo">
     </a>
</div>

<div class=time>
<div class="w3-display-middle w3-text-white w3-center">
    <h1 class="w3-jumbo"><span id="time"></span></h1>
    <h2><span id="date"></span></h2>    
</div>

</div>
<div class="weather">
    <a class="weatherwidget-io" href="https://forecast7.com/en/48d862d35/paris/" data-label_1="Paris" data-label_2="Weather" data-theme="original" data-days="7" data-highcolor="#ff6060" data-lowcolor="#0060ff" data-suncolor="#e08020" data-mooncolor="#c4c400" data-cloudcolor="#8a8e90" data-raincolor="#5294e2" data-snowcolor="#ffffff" data-windcolor="#c4c400" data-fogcolor="#778899" data-textcolor="#60ff60" data-thundercolor="#e08020" data-dayscolor="#2cb8bc" data-tempcolor="#d4d400" data-label1color="#c4c4c4" data-label2color="#0060ff" data-desccolor="#e4e4e4" data-basecolor="rgba(0, 0, 0, 0)" >Weather</a>
    
    <script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
    </script>
</div>

<script>
    function timer(){
        const date = moment().format("dddd, D MMM YYYY");
        const time = moment().format("HH:mm:ss");
        document.getElementById('date').innerHTML = date;
        document.getElementById('time').innerHTML = time;
        // update every second
        setTimeout(timer,1000);
    }
    timer();
    </script>

</body>
</html>

Copy index_BL.html file and paste in Firefox URL bar > Enter.

dhalgren · 2023-10-09 23:12:54

@marens: Lovely, thank you.Excellent addition to Firefox.

johnraff · 2023-10-10 04:40:58

Nice!

marens · 2023-10-28 17:20:04

Another interesting start page.

I found a nice gif of the flame, but it wasn't easy to remove the black background.
Of course, ImageMagick always helps.

If you like the idea of seeing a burning flame (click on flame to Bunsenlabs forums):

In the ~/.mozilla_bunsenlabs folder, create an index_BL_gif.html file with content:

<!DOCTYPE html>
<html>

    <link rel="icon" 
      type="image/png" 
      href="flame.png" />

    <title>Mozilla Bunsenlabs</title>
    
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="style.css"/>
    
    <style>   
    
    body,h1,h2 {margin: 0}
    h1 {color: #c4c4c4; text-align: center}
    h2 {color: #d4d400; font-size: 19px; padding-left: 4px; text-align: center}
    h3 {position: relative; color: #808080; font-size: 14px; text-align: center; top: 62%; margin-left: -15px}
    body, html {margin: 0; height: 100%; overflow: hidden}
    body {
    background-color: #202020;
    background-image: url("./bunsenlabs2.png");
    background-size: 272px 40px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 90%
    }
    
    #logo a img.clickable-logo {position: absolute; height: 120px; width:  100px; left: 50%; bottom: 10%; transform: translate(-50%, -2%); display: block}
    
    </style>
    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>

<body>

     <h3>Click on flame to Bunsenlabs forums</h3>
<div id="logo">
     <a href="https://forums.bunsenlabs.org">
         <img class="clickable-logo" src="flame2.gif" alt="logo">
     </a>
</div>

<div class=time>
<div class="w3-display-middle w3-text-white w3-center">
    <h1 class="w3-jumbo"><span id="time"></span></h1>
    <h2><span id="date"></span></h2>    
</div>

</div>
<div class="weather">
    <a class="weatherwidget-io" href="https://forecast7.com/en/48d862d35/paris/" data-label_1="Paris" data-label_2="Weather" data-theme="original" data-days="7" data-highcolor="#ff6060" data-lowcolor="#0060ff" data-suncolor="#e08020" data-mooncolor="#c4c400" data-cloudcolor="#8a8e90" data-raincolor="#5294e2" data-snowcolor="#ffffff" data-windcolor="#c4c400" data-fogcolor="#778899" data-textcolor="#60ff60" data-thundercolor="#e08020" data-dayscolor="#2cb8bc" data-tempcolor="#d4d400" data-label1color="#c4c4c4" data-label2color="#0060ff" data-desccolor="#e4e4e4" data-basecolor="rgba(0, 0, 0, 0)" >Weather</a>   
    
    <script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
    </script>
</div>

<script>
    function timer(){
        const date = moment().format("dddd, D MMM YYYY");
        const time = moment().format("HH:mm:ss");
        document.getElementById('date').innerHTML = date;
        document.getElementById('time').innerHTML = time;
        // update every second
        setTimeout(timer,1000);
    }
    timer();
    </script>

</body>
</html>

Download flame2.gif and bunsenlabs2.png images and copy/paste in ~/.mozilla_bunsenlabs folder.

flame2.gif:
https://i.postimg.cc/Mpv6sRNG/flame2.gif

bunsenlabs2.png:
https://i.postimg.cc/FYTxxfTg/bunsenlabs2.png

Done.

Copy ~/.mozilla_bunsenlabs/index_BL_gif.html file and paste in Firefox URL bar > Enter.

Last edited by marens (2023-10-28 17:33:08)

marens · 2023-11-02 17:53:13

If you don't want the top of the candle under the flame make index_BL_gif2.html in ~/.mozilla_bunsenlabs with content:

<!DOCTYPE html>
<html>

    <link rel="icon" 
      type="image/png" 
      href="flame.png" />

    <title>Mozilla Bunsenlabs</title>
    
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="style.css"/>
    
    <style>   
    
    body,h1,h2 {margin: 0}
    h1 {color: #c4c4c4; text-align: center}
    h2 {color: #d4d400; font-size: 19px; padding-left: 4px; text-align: center}
    h3 {position: relative; color: #808080; font-size: 14px; text-align: center; top: 62%; margin-left: -15px}
    body, html {margin: 0; height: 100%; overflow: hidden}
    body {
    background-color: #202020;
    background-image: url("./bunsenlabs2.png");
    background-size: 272px 40px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 90%
    }
    
    #logo a img.clickable-logo {position: absolute; height: 80px; width:  100px; left: 50%; bottom: 14%; transform: translate(-50%, -2%); display: block}
    
    </style>
    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>

<body>

     <h3>Click on flame to Bunsenlabs forums</h3>
<div id="logo">
     <a href="https://forums.bunsenlabs.org">
         <img class="clickable-logo" src="flame3.gif" alt="logo">
     </a>
</div>

<div class=time>
<div class="w3-display-middle w3-text-white w3-center">
    <h1 class="w3-jumbo"><span id="time"></span></h1>
    <h2><span id="date"></span></h2>    
</div>

</div>
<div class="weather">
    <a class="weatherwidget-io" href="https://forecast7.com/en/48d862d35/paris/" data-label_1="Paris" data-label_2="Weather" data-theme="original" data-days="7" data-highcolor="#ff6060" data-lowcolor="#0060ff" data-suncolor="#e08020" data-mooncolor="#c4c400" data-cloudcolor="#8a8e90" data-raincolor="#5294e2" data-snowcolor="#ffffff" data-windcolor="#c4c400" data-fogcolor="#778899" data-textcolor="#60ff60" data-thundercolor="#e08020" data-dayscolor="#2cb8bc" data-tempcolor="#d4d400" data-label1color="#c4c4c4" data-label2color="#0060ff" data-desccolor="#e4e4e4" data-basecolor="rgba(0, 0, 0, 0)" >Weather</a>   
    
    <script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
    </script>
</div>

<script>
    function timer(){
        const date = moment().format("dddd, D MMM YYYY");
        const time = moment().format("HH:mm:ss");
        document.getElementById('date').innerHTML = date;
        document.getElementById('time').innerHTML = time;
        // update every second
        setTimeout(timer,1000);
    }
    timer();
    </script>

</body>
</html>

Download flame3.gif and copy/paste in ~/.mozilla_bunsenlabs folder.

flame3.gif:
https://i.postimg.cc/CKqzZNBs/flame3.gif

Done.

Right click on ~/.mozilla_bunsenlabs/index_BL_gif2.html file > Open With Firefox Web Browser.

P.S.
Now you have several options for the Mozilla Bunsenlabs home (start) page.
Everything is made so that it can be easily changed and adjusted according to your taste.

Last edited by marens (2023-11-02 22:42:13)

marens · 2024-03-12 00:43:18

As you have noticed, the BL forums page got a new favicon (tab icon image).
It looks very nice and if you want you can use it instead of the old one (yellow flame).

You can download the new favicon:
https://postimg.cc/LJqXD9PC

You will get a flame2.png icon.
Copy/Paste to ~/.mozilla_bunsenlabs folder.

Open the index file you are using with a text editor and replace the line:

href="flame.png" />

with:

href="flame2.png" />

Done.

marens · 2024-06-16 00:44:20

When you move (hover, hold) the cursor over the weather icons, you will get a tooltip with a description of the weather.
Tonight I tried to see if any other languages are supported (besides English).

I researched the source (forecast7.com) and found the answer.
This is a list of supported languages:

hreflang="bg"
hreflang="cs"
hreflang="da"
hreflang="de"
hreflang="en"
hreflang="el"
hreflang="es"
hreflang="fr"
hreflang="hr"
hreflang="hu"
hreflang="it"
hreflang="no"
hreflang="nl"
hreflang="pl"
hreflang="pt"
hreflang="ro"
hreflang="ru"
hreflang="sk"
hreflang="sr"
hreflang="sv"
hreflang="tr"
hreflang="uk"
hreflang="ja"
hreflang="zh"
hreflang="zh-tw"
hreflang="he"
hreflang="ar"

How to use if your language is supported?

Very easy.
Open your index.html file and change the address.

Example: Paris, France (just change en to fr)

Replace:

href="https://forecast7.com/en/48d862d35/paris/"

With:

href="https://forecast7.com/fr/48d862d35/paris/"

Then replace:

data-label_1="Paris" data-label_2="Weather"

With:

data-label_1="Paris" data-label_2="Météo"

Done.

P.S.
Now when you click on the widget, forecast7.com will open with a detailed forecast in the language you want.

altman · 2024-06-16 17:46:31

Great work @marens.

JasonMehmel · 2024-06-22 20:19:48

I love this idea!

BTW, the config file linked to in the first post isn't there anymore; can a fresh link be posted?

marens · 2024-06-23 00:12:20

JasonMehmel wrote:

I love this idea!
BTW, the config file linked to in the first post isn't there anymore; can a fresh link be posted?

Yes indeed.
It doesn't seem to work.
Maybe it's better that way.

It's time for a new version of mozilla_bunsenlabs_V2.
There are only two index files that I usually use.

You can download here:
https://workupload.com/file/jWGDVCaywGT

After downloading, open the ~/Downloads folder and find the file mozilla_bunsenlabs_V2.tar.xz.

Then > right click > Extract Here.
You will get a mozilla_bunsenlabs_V2 folder.
Open the folder and you will see the hidden folder .mozilla_bunsenlabs_V2.
Copy/Paste in HOME.

Done.

How to use?

Open ~/.mozilla bunsenlabs_V2 > right click on index.html (or index_gif.html) > Open with Firefox.

OR*

Copy the file and paste it into the Firefox address bar > Enter.

P.S.
If you like it, add it to your bookmarks.

#1 2023-10-03 12:59:42

Mozilla Bunsenlabs

#2 2023-10-04 04:58:27

Re: Mozilla Bunsenlabs

#3 2023-10-04 12:16:16

Re: Mozilla Bunsenlabs

#4 2023-10-04 12:34:38

Re: Mozilla Bunsenlabs

#5 2023-10-04 16:45:25

Re: Mozilla Bunsenlabs

#6 2023-10-05 07:00:21

Re: Mozilla Bunsenlabs

#7 2023-10-06 12:07:03

Re: Mozilla Bunsenlabs

#8 2023-10-09 16:05:24

Re: Mozilla Bunsenlabs

#9 2023-10-09 23:12:54

Re: Mozilla Bunsenlabs

#10 2023-10-10 04:40:58

Re: Mozilla Bunsenlabs

#11 2023-10-28 17:20:04

Re: Mozilla Bunsenlabs

#12 2023-11-02 17:53:13

Re: Mozilla Bunsenlabs

#13 2024-03-12 00:43:18

Re: Mozilla Bunsenlabs

#14 2024-06-16 00:44:20

Re: Mozilla Bunsenlabs

#15 2024-06-16 17:46:31

Re: Mozilla Bunsenlabs

#16 2024-06-22 20:19:48

Re: Mozilla Bunsenlabs

#17 2024-06-23 00:12:20

Re: Mozilla Bunsenlabs

Board footer