• Resolved aakerro

    (@aakerro)


    Hi
    As you can see on the linked test site, the footer widget area has a photo of the moon surface as its background, taken from one of the “Earthrise” images from NASA. I want the globe to still be zoomable, but to fill the whole space of the browserwindow, and be behind the logo, navigation and footer widget area image.

    I’ve been trying to do this by chatting wiht GPT4, since I’m no coder.

    Cheers,
    Karl

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    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

    Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    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 */
    
    }
    Thread Starter aakerro

    (@aakerro)

    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 4 months, 2 weeks ago by aakerro.
    Thread Starter aakerro

    (@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 4 months, 2 weeks ago by aakerro.
    Plugin Author Carlos Moreira

    (@carlosmoreirapt)

    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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.