Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Das neue Xobor v6 Template basiert auf dem Grid System von Bootstrap.

Will man z.B. per SCSS für verschiedene Endgeräte unterschiedliche Bildschirmausgaben erzeugen kann man dabei auf die so genannten Breakpoints zurückgreifen.

Breakpoints sind vorgegebene Bildschirmgrößen, an denen bestimmte CSS-Codes je nach Definition ausgeführt werden oder eben nicht.

Die Standard-Breakpoints im neuen Template sind:

$grid-breakpoints: (
        xxxs: 0,
        xxs: 320px,
        xs: 568px,
        sm: 667px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1600px,
        xxxl: 1920px
);

Praxisbeispiel:

In der Foren-Übersicht gibt es 2 Spalten.

Spalte 1 hat die Klasse .forum_info und enthält Foreninfos und die Liste der Unterforen.
Spalte 2 hat die Klasse .forum_lastreply und enthält die Infos zum letzten Beitrag.

In der kleinsten Ansicht werden die Spalten untereinander angezeigt - beide Spalten haben also eine Breite von 100%.

Ab einer Auflösung von 668px werden die Spalten dann nebeneinander angezeigt. Die eine Spalte erhält dabei 8/12 der gesamten verfügbaren Breite, die andere 4/12 der gesamten Breite. Im SCSS schreibt man das dann so:

.forumlist .forum_lastreply{
    @include media-breakpoint-up(sm) {  //Wenn Bildschrimgroesse groesser als "sm" 
        @include make-col(4);  // Gib dieser Spalte 4/12 des verfuegbaren Platzes
    }    
}
.forumlist .forum_info{
    @include media-breakpoint-up(sm) {
        @include make-col(8);
    }
}

Um jetzt z.B. bei einer noch größeren Auflösung beide Spalten in gleicher Breite anzuzeigen könnte man folgendes im SCSS-Addon speichern:

.forumlist .forum_lastreply{
    @include media-breakpoint-up(sm) {  //Wenn Bildschrimgroesse groesser als "sm" 
        @include make-col(6);  //Gib dieser Spalte 6/12 des verfuegbaren Platzes
    }    
}
.forumlist .forum_info{
    @include media-breakpoint-up(sm) {
        @include make-col(6);
    }
}

Das gleiche geht natürlich auch in umgekehrter Richtung. Um z.B. auf allen Bildschirmen kleiner 668px Breite die Liste der Unterforen auszublenden könnte man Folgendes eintragen:

@include media-breakpoint-down(sm) {
   .subforumlist{display:none;}
 }

Weitere Infos dazu gibt es hier: https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints