Konfiguration des Info-Banners

[lang:de]

Konfiguration des Info-Banners

Der Banner folgt den Inhalten, die sich auf dieser Seite im Wiki befinden: https://wiki.aktivismus.org/books/movementwiki-infos/page/banner-content. Der Inhalt wird allerdings gecached und Änderungen werden daher ggf. erst nach bis zu 10 Minuten übernommen.

Um keinen Banner anzuzeigen, reicht es, die Banner Content - Seite leer zu lassen.

Auf der Banner Content - Seite lässt sich ein HTML-Layout hinterlegen, das den Nutzenden dann in Form eines Banners angezeigt wird. Hier ein Beispiel:

<style>
    .custom-banner-container {
        display: flex;
        align-items: stretch; /* This ensures both columns have the same height */
        gap: 2rem; /* The space between the columns */
    }

    .custom-banner-content {
        /* The left column for text */
        background-color: #f8f9fa;
        border: 1px solid #e2e2e2;
        /* CHANGED: Reduced vertical padding */
        padding: 1.5rem 2rem;
        
        /* This sets the width ratio to 1/3 on desktop */
        flex: 1; 

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .custom-banner-image-wrapper {
        /* The right column for the image */
        /* This sets the width ratio to 2/3 on desktop */
        flex: 2; 

        position: relative;
    }

    .custom-banner-image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; 
    }
    
    /* --- Content and Button styles remain the same --- */
    .custom-banner-content h2 {
        color: #613583;
        font-size: 2.2rem;
        margin-top: 0;
        line-height: 1.2;
        font-weight: bold;
    }

    .custom-banner-content p {
        color: #333;
        font-size: 1rem;
        /* CHANGED: Reduced space below the paragraph */
        margin-bottom: 1rem;
    }

    .custom-banner-content .button.positive {
        background-color: #26A269;
        color: #fff;
        font-size: 1.1rem;
        padding: 0.7rem 1.2rem;
        text-decoration: none;
        border: none;
        box-shadow: none;
        transition: background-color 0.2s;
        align-self: flex-start;
    }

    .custom-banner-content .button.positive:hover {
        background-color: #1f8050;
        color: #fff;
        box-shadow: none;
    }

    /* --- Responsive Styles for smaller screens --- */
    @media (max-width: 1200px) {
        .custom-banner-image-wrapper {
            /* This completely hides the image column on smaller screens */
            display: none;
        }

        .custom-banner-content {
            /* This makes the text box take up the full width */
            flex-basis: 100%;
            background-color: transparent;
            border: none;
            padding: 0;
        }
    }
</style>

<div class="custom-banner-container">
    <!-- Left Column (1/3 width on desktop, 100% on mobile) -->
    <div class="custom-banner-content">
        <h2>RAZ IT-Hilfe ist jetzt online 🎉</h2>
        <p>
            Neben dem Rechtshilfe-Wiki haben die Menschen von der RAZ e.V. jetzt auch ganz viele Informationen zum Thema IT-Hilfe zusammengetragen. Schaut gerne mal rein :)
        </p>
        <a href="https://wiki.aktivismus.org/shelves/raz-it-hilfe" class="button positive">Zum Buch</a>
    </div>
    <!-- Right Column (2/3 width on desktop, hidden on mobile) -->
    <div class="custom-banner-image-wrapper">
        <img src="https://wiki.aktivismus.org/uploads/images/gallery/2025-10/rryA1J9kaGmqU2k3-raz-it-hilfe-mw-banner.png" alt="RAZ IT-Hilfe Banner">
    </div>
</div>

[lang:en]

Configuration of the Info Banner

The banner follows the content that is on this page in the wiki: https://wiki.aktivismus.org/books/movementwiki-infos/page/banner-content. However, the content is cached and changes may only be applied after up to 10 minutes.

In order not to display a banner, it is sufficient to leave the Banner Content page empty.

An HTML layout can be stored on the Banner Content page, which is then displayed to the user in the form of a banner. Here is an example:

<style>
    .custom-banner-container {
        display: flex;
        align-items: stretch; /* This ensures both columns have the same height */
        gap: 2rem; /* The space between the columns */
    }

    .custom-banner-content {
        /* The left column for text */
        background-color: #f8f9fa;
        border: 1px solid #e2e2e2;
        /* CHANGED: Reduced vertical padding */
        padding: 1.5rem 2rem;
        
        /* This sets the width ratio to 1/3 on desktop */
        flex: 1; 

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .custom-banner-image-wrapper {
        /* The right column for the image */
        /* This sets the width ratio to 2/3 on desktop */
        flex: 2; 

        position: relative;
    }

    .custom-banner-image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; 
    }
    
    /* --- Content and Button styles remain the same --- */
    .custom-banner-content h2 {
        color: #613583;
        font-size: 2.2rem;
        margin-top: 0;
        line-height: 1.2;
        font-weight: bold;
    }

    .custom-banner-content p {
        color: #333;
        font-size: 1rem;
        /* CHANGED: Reduced space below the paragraph */
        margin-bottom: 1rem;
    }

    .custom-banner-content .button.positive {
        background-color: #26A269;
        color: #fff;
        font-size: 1.1rem;
        padding: 0.7rem 1.2rem;
        text-decoration: none;
        border: none;
        box-shadow: none;
        transition: background-color 0.2s;
        align-self: flex-start;
    }

    .custom-banner-content .button.positive:hover {
        background-color: #1f8050;
        color: #fff;
        box-shadow: none;
    }

    /* --- Responsive Styles for smaller screens --- */
    @media (max-width: 1200px) {
        .custom-banner-image-wrapper {
            /* This completely hides the image column on smaller screens */
            display: none;
        }

        .custom-banner-content {
            /* This makes the text box take up the full width */
            flex-basis: 100%;
            background-color: transparent;
            border: none;
            padding: 0;
        }
    }
</style>

<div class="custom-banner-container">
    <!-- Left Column (1/3 width on desktop, 100% on mobile) -->
    <div class="custom-banner-content">
        <h2>RAZ IT-Hilfe ist jetzt online 🎉</h2>
        <p>
            Neben dem Rechtshilfe-Wiki haben die Menschen von der RAZ e.V. jetzt auch ganz viele Informationen zum Thema IT-Hilfe zusammengetragen. Schaut gerne mal rein :)
        </p>
        <a href="https://wiki.aktivismus.org/shelves/raz-it-hilfe" class="button positive">Zum Buch</a>
    </div>
    <!-- Right Column (2/3 width on desktop, hidden on mobile) -->
    <div class="custom-banner-image-wrapper">
        <img src="https://wiki.aktivismus.org/uploads/images/gallery/2025-10/rryA1J9kaGmqU2k3-raz-it-hilfe-mw-banner.png" alt="RAZ IT-Hilfe Banner">
    </div>
</div>