- Teambeitrag
Das ist seltsam, erhöhe mal den Wert bei:
top: 30px;
auf 40px
Systembox mit Text auf Bild
-
Das ist seltsam, erhöhe mal den Wert bei:
top: 30px;
auf 40px
Ja Toll, das sieht gut aus in der Destop version.
Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen. In der Tablet oder Handy Version:
TABLET VERSION
Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen. HANDY VERSION
Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen. PS: Auch daran denken das Hintergrundbild in der Handyversion anzupassen. danke
-
Hallo,
wie kann ich die Bildgröße anpassen, das das Bild ein wenig grösser wird?
Seh zur Zeit den Wald vor lauter Bäumen nicht.
Gruß
-
Kann den hier niemand helfen?
-
Du müsstest dann wohl Zeile 37 anpassen:
CSSpadding: 20px;und da sowas wie padding: 50px 20px; draus machen.
Ich gucke die Tage noch mal drüber, da sind ja noch ein paar Fehler drin sehe ich gerade,
Hallo, ich habe die Welcome Box etwas angepasst Tom, also an meine private Bedürfnisse, damit es auch an das globale Layout passt. Bei dieser version funktioniert auch das Anpassen des Bildes an das Handyformat usw...: Du kannst das ja gerne einmal verifizieren. Danke
CSS
Alles anzeigen/* --- GRADIENT ACCENT FOR WELCOME BOX --- */ .welcomeBox { /* Wir stellen sicher, dass das ::before Element an der Box ausgerichtet wird */ position: relative !important; } .welcomeBox::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; /* Strichdicke passend zu den Artikel-Karten */ background: linear-gradient(90deg, #f58220, #009e60, #ad2878, #1e64b4); z-index: 20; /* Muss höher sein als .welcomeBoxContent (z-index 1) */ pointer-events: none; } .welcomeBox { background-color: rgba(0,0,0,0) !important; border-radius: var(--wcfBorderRadius); display: grid; position: relative; padding: 0 !important; overflow: hidden; min-height: 450px; grid-template-areas: "welcomeBoxContent" "welcomeBoxFooter"; grid-template-rows: 1fr min-content; .boxImage { margin: 0; overflow: hidden; display: flex; position: absolute; left: 0; bottom: 0; top: 0; width: 100%; height: 100%; border-radius: var(--wcfBorderRadius); max-height: initial; img { object-fit: cover; object-position: top; width: 100%; height: 100%; max-width: initial; border-radius: var(--wcfBorderRadius); } } /* KORREKTUR: Selektor vereinfacht (ohne doppeltes .welcomeBox) */ .boxImage::before { content: ""; inset: 0; position: absolute; background-image: linear-gradient(to right, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.0) 100%); z-index: 0; } .boxContent { display: contents; } .welcomeBoxContent { grid-area: welcomeBoxContent; color: #fff; padding: 20px; @include screen-xl { width: 40%; } @include screen-lg-only { width: 80%; } height: 100%; display: flex; flex-direction: column; justify-content: center; background-image: linear-gradient(to right, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.0) 100%); z-index: 1; h2 { @include screen-md-down { font-size: 28px; } @include screen-lg { font-size: 36px; } font-weight: 700; text-transform: uppercase; } h2 + h2 { @include screen-md-down { font-size: 36px; } @include screen-lg { font-size: 48px; } font-weight: 700; text-transform: uppercase; } p { margin: 20px 0; } } .welcomeBoxFooter { grid-area: welcomeBoxFooter; color: #fff; display: grid; grid-auto-flow: row; background-color: rgba(0,0,0,0.5); padding: 10px; border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); @include screen-md-down { grid-template-columns: repeat(2, 50%); row-gap: 10px; } @include screen-lg { grid-template-columns: repeat(4, 25%); } .welcomeBoxFooterItem { display: flex; } small { color: rgba(255,255,255,0.65); } .welcomeBoxFooterItemIcon { flex-basis: 45px; text-align: center; } } } -
Nutze die Systembox mit Text auf Bild.
Eine Anpssung wäre schön, dafür ist eure Unterstützung erforderlich (bin Code-Nichtkönner).
Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen. Möchte den Text über die gesamte Breite aufteilen (siehe Bild).
Jetziger Code:
HTML
Alles anzeigen<div class="welcomeBoxContent"> <h2>Willkommen auf<br /> wsc-user.org</h2> <p>Die unabhängige Plattform rund um die WoltLab Suite</p> </div> <div></div> <div class="welcomeBoxFooter"> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='info-circle' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Unabhängig & Privat</p> <p><small>Reine Community-Plattform</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='shop' type='solid'} </div> <div class="welcomeBoxFoote<div class="welcomeBoxContent"> <h2>Willkommen auf<br /> wsc-user.org</h2> <p>Die unabhängige Plattform rund um die WoltLab Suite</p> </div> <div></div> <div class="welcomeBoxFooter"> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='info-circle' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Unabhängig & Privat</p> <p><small>Reine Community-Plattform</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='shop' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Keine geschäftliche Verbindung</p> <p><small>zur WoltLab GmbH</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='store' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Keine kommerziellen Interessen</p> <p><small>100% privates, werbefreies Projekt</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> </div> <div class="welcomeBoxFooterItemContent"> </div> </div> </div>rItemContent"> <p>Keine geschäftliche Verbindung</p> <p><small>zur WoltLab GmbH</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='store' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Keine kommerziellen Interessen</p> <p><small>100% privates, werbefreies Projekt</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> </div> <div class="welcomeBoxFooterItemContent"> </div> </div> </div>Würde mir bitte jemand helfen ?
-
Alles anzeigen
Nutze die Systembox mit Text auf Bild.
Eine Anpssung wäre schön, dafür ist eure Unterstützung erforderlich (bin Code-Nichtkönner).
Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen. Möchte den Text über die gesamte Breite aufteilen (siehe Bild).
Jetziger Code:
HTML
Alles anzeigen<div class="welcomeBoxContent"> <h2>Willkommen auf<br /> wsc-user.org</h2> <p>Die unabhängige Plattform rund um die WoltLab Suite</p> </div> <div></div> <div class="welcomeBoxFooter"> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='info-circle' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Unabhängig & Privat</p> <p><small>Reine Community-Plattform</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='shop' type='solid'} </div> <div class="welcomeBoxFoote<div class="welcomeBoxContent"> <h2>Willkommen auf<br /> wsc-user.org</h2> <p>Die unabhängige Plattform rund um die WoltLab Suite</p> </div> <div></div> <div class="welcomeBoxFooter"> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='info-circle' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Unabhängig & Privat</p> <p><small>Reine Community-Plattform</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='shop' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Keine geschäftliche Verbindung</p> <p><small>zur WoltLab GmbH</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='store' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Keine kommerziellen Interessen</p> <p><small>100% privates, werbefreies Projekt</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> </div> <div class="welcomeBoxFooterItemContent"> </div> </div> </div>rItemContent"> <p>Keine geschäftliche Verbindung</p> <p><small>zur WoltLab GmbH</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> {icon size=16 name='store' type='solid'} </div> <div class="welcomeBoxFooterItemContent"> <p>Keine kommerziellen Interessen</p> <p><small>100% privates, werbefreies Projekt</small></p> </div> </div> <div class="welcomeBoxFooterItem"> <div class="welcomeBoxFooterItemIcon"> </div> <div class="welcomeBoxFooterItemContent"> </div> </div> </div>Würde mir bitte jemand helfen ?
hallo, sieh dir einmal in dem vorherigen Post meinen Code an und zwar hier .welcomeBoxFooter mit dieser Änderung sollte es funktionieren. Bei mir wird es es aktuell auf der Webseite richtig angezeigt.
-
Funktioniert mit einer kleinen Anpassung:
grid-template-columns: repeat(3, 33%);
Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen. Dankeschön
-
Ich habe eine Fragfe zu dieser Box, ich habe nun das alles so erstellt.
Im Stil das andere CSS eingefügt ... man sieht es auch aber es wird jetzt überall angezeigt, auf jeder Seite und jedem Menupunkt .
Muss ich da nun überall den Haken rausnehmen oder kann man das mit einem Befehl erstmal Deaktivieren und ich setze den Haken wo ich es sehen möchte .... !?
Wäre wie immer Dankbar ...
