I customized Heimdall's custom CSS and JS

[KingKorg]

Hello, sorry for my english I use google translate

I customized Heimdall's custom CSS and JS, here is my code for you to adapt so that it works with your settings

https://jsfiddle.net/8wnv1qam/

[sudoshi]

This is beautiful work! I will examine your code and see if I can implement for myself. I would like to add a floating logo/emblem to the dashboard but I am not good with CSS/HTML.

[sudoshi]

I am developing this for a group of 2000+ medical researchers worldwide.

I would like to figure out how to customize the top of the page to include a logo and some other 'widgets' like @KingKorg has done.

[ghost]

Hi, would it make sense to create some sort of theme collection? (if it doesn't already exist)

[jdelamater99]

@KingKorg Super boulot!

I extended the weather data to include more of the available data, and converted it to imperial, because I'm a filthy American, though, I included C as well, as I have several friends that live in UK & EU and it makes discussing weather with them easier.

Here's the portion of the code that I customized. I was also lazy and just reused the ville-temp-container class, though, I may update that later if I feel like customizing the formatting of the newly added data.

function getDirection(degree){
    const directions = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"];
    const index = Math.round(degree / 22.5) % 16;
    return directions[index];
}

  function afficherMeteo(latitude, longitude) {
    const apiKey = "API_TOKEN"; // Remplacez ceci par votre clé API OpenWeatherMap

    fetch('https://api.openweathermap.org/data/2.5/weather?lat='+latitude+'&lon='+longitude+'&appid='+apiKey+'&units=imperial')
      .then(response => response.json())
      .then(data => {
        const temperature = Math.round(data.main.temp); // Arrondir la température à l'entier le plus proche
      	const ville = data.name;
        const icon = data.weather[0].icon;
        const description = data.weather[0].description;
        const humidity = data.main.humidity;
        const pressure = data.main.pressure;
        const windSpeed = data.wind.speed;
        const windDir = data.wind.deg;

        // Affichage de la météo dans la div 'meteo'
        meteoDiv.innerHTML = `<div class="ville-temp-container"><div class="temperature">${temperature}°F / ${Math.round(((temperature-32)*5)/9)}°C</div><div class="icon"><img src="http://openweathermap.org/img/wn/${icon}.png"></div></div><div class="ville-temp-container"><span class="ville">humidity: ${humidity}%</span><span class="description">pressure: ${pressure}mbar</span></div><div class="ville-temp-container"><span class="ville">wind speed: ${windSpeed}mph</span><span class="description">wind direction: ${getDirection(windDir)}</span></div><div class="ville-temp-container"><span class="ville">${ville}</span><span class="description">${description}</span></div>`;
      })
      .catch(error => {
        console.error('Erreur lors de la récupération des données météo', error);
        meteoDiv.textContent = 'Unable to retrieve weather data';
      });
  }

[activ8xpgithub]

How do I get my setup like yours then ? the smaller icons etc ?

[jdelamater99]

I don't remember what exactly of this is needed, but here's my css. Should be enough to get you started.

section.module-container{
width:200%;
}

div.title {
visibility: hidden;
}

div.title.black, div.title.white {
visibility: visible;
font-size: 9px;
}

#app #sortable.categories .category {
background-color: rgba(0,0,0,0);
margin: 0;
width: 190px;
}

.app-icon-container {
flex: 0 0 60px;
margin-right: 5px;
}

.item .link{
font-size: 14px;
line-height: 30px;
}

.item::after {
top: -25px;
right: 97px;
}

.item {
margin: 0;
width: 190px;
height: 25px;
}

.searchform {
position: fixed;
top: -50px;
max-width: 100%;
border-radius: unset;
right: 0;
}

.homesearch {
height: 25px;
}

.searchform button {
font-size: 14px;
line-height: 20px;
}

.item .title {
font-size: 12px;
}

#app #sortable, #app main {
padding: 20px 10px;
align-content: unset;

}

[rogales]

any walkthrough on how to start with custom css? What should I download?

[jdelamater99]

You really don't need anything to get started with css. Whatever text editor you have on your computer will work, but since Heimdall has a text box to put custom css in, you really don't even need that.

That said, the two programs that use for writing/editing html, css, javascript, etc is notepad++ and visual studio code. Both have color formatting and code hinting which is a nice convenience. After that, the only other tool you need is the inspect tool built into your browser. That's used for navigating through the html and identifying the elements that you want to edit, their names, and temporarily modify the css of the page elements (everything is restored on refresh).

Those are the tools that you'll use, but the most important thing you'll need is knowledge. HTML and CSS are the bare minimums, though javascript can be useful as well, as you can use that to add and modify html elements on the page, like how I added the video backgrounds (see my other thread). Not really a short cut here, you just kind of have to dive in and start learning.

W3School is a good resource for looking up specifics, but not sure how good it is at teaching, but there's tons of sites and videos out there to help you get started. Can't really give you any pointers to what sites are good though because I've been doing this for about 30 years now. Don't really need the "learning css" courses. Google is your friend there. And once you learn the basics, Kevin Powell on youtube pretty much specifically focuses on css and has great information.