Background globe

Hi @aakerro
You will need some custom css to place the logo below the logo and navigation, but let’s start with the most simple step, which would be to place the globe in the page, in the main content area, where you have the image right now.

The globe should take 100% of the available space, so then it will be a matter of adjusting with custom css. This is in the realm of customizations, but we’ll try to guide you.

Greetings, Carlos

Oh, I see you already have the globe there on the https://united-earth.net/en/interactive-globe/ page. Half the work is done. Now it’s a matter of being able to interact with the globe with the mouse, correct?

You can try this custom css, instead of the ones you currently have:

.globe_wrapper {
    margin: 0;
    width: 100%;
    max-height: 300px; /* Add this line to make the wrapper take the full viewport height */
    position: relative; /* Add this line to fix the position relative to the viewport */
    top: 0;
    left: 0;
    min-height: 30vh; /* Set a minimum height for the globe */
}

.site-footer {
 position:relative;
 z-index:100;
}

.globe_aspect_ratio {
    max-height:500px;
    overflow:hidden;
    padding-top:50% !important;
}

.globe {
    width: 100%;
    height: auto; /* Adjust height to maintain aspect ratio, or set to 100% to fill */
    position: absolute;
    top: 0;
    left: 0;
	pointer-events: auto; /* This will allow interaction with the globe */
    min-height: 30vh; /* Ensure it has a minimum height */

}

• This reply was modified 9 months, 3 weeks ago by Carlos Moreira.

That was a great improvement. The globe is behind the moon surface and interaction is possible. But is it also possible to let the globe fill the whole background, including behind the transparent logo and the primary menu element, and at the same time as we make sure the footer sticks to the bottom of the screen (no empty space, like we have now)?

• This reply was modified 9 months, 3 weeks ago by aakerro.

A GPT4 session solved most of it by

1) changing .globe_wrapper:
position: absolute;

2) adding:

body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }

.content-area { flex: 1; /* Takes up all available space */ }

.site-footer { z-index: 10; /* Above the globe */ margin-top: auto; /* Pushes the footer to the bottom */ }

The only thing now is that the footer bar is cut off a little bit, so the text in it doesn’t show. It would be nice if the bottom of it is what sticks to the bottom of the screen (But this isn’t very important right now).

***

Thanks for your input, it was very important and helpful.

I have many more ideas for this plugin, since I have well defined needs for the site https://united.earth (soon to open). United Earth is a project for a political movement to create the next step of our political evolution as stewards of the planet: a global democracy capable of tackling all the global threats to our biosphere and humanity as a whole.

We need to create a visualization lab for the project, as well as a data collection project with adequate high level geographical data. We want to propose a better geopolitical organization and need to illustrate how this may look like and gradually implemented.

Tell me if you would be interested in joining this work.

best regards
Karl

• This reply was modified 9 months, 3 weeks ago by aakerro.

Thank you for the update! Glad you managed to solve it! Impressive use of chatGPT ??
Thank you for the positive rating also! We do plan to improve the plugin, so all feedback is welcomed.
Most of the suggestions you listed in the review we will try to implement, if the plugin gains traction.
Thank you once again for the positive feedback!