CoverPhoto LoSti's World Erweiterte Memberliste

**Mipu**

Diskussion zum Artikel CoverPhoto LoSti's World Erweiterte Memberliste:

Zitat

Eine kleine Anleitung wie ihr die CoverPhotos in die "Erweiterte Memberliste von LoSti's World" bekommt

**Hitman**

Zitat von Andydeluxe97

Das haut nicht mehr hin, nur zur info

DankeIst geändert worden

**Andydeluxe97**

Zitat von Hitman

Danke Ist geändert worden

Kein Problem

**Andydeluxe97**

Hallo @Hitman,

Filebase wurde immernoch nicht Aktuallisiert, klick auf den link & steht "Seiten nicht gefunden". Kleiner Tipp

https://wbbsupport.de/filebase/entry/101/

**Mipu**

Woher hast du den Link, ich finde ihn nicht.

**Andydeluxe97**

misterpu Hier -> CoverPhoto LoSti's World Erweiterte Memberliste

**Hitman**

Sollte wieder passen...kommt alles noch von der Übernahme der alten Datenbank, da war der Eintrag noch auf 101

**Andydeluxe97**

Zitat von Hitman

Sollte wieder passen...kommt alles noch von der Übernahme der alten Datenbank, da war der Eintrag noch auf 101

Ah okey, ja na ich meinte es ja oben bei dem post #2, naja gut. Danke fürs ändern. Wir halten ausschau nach

**mystery2072**

Bekomme es irgendwie nicht hin

**Hitman**

Zitat von mystery2072

Bekomme es irgendwie nicht hin

Genau...deswegen schreiben wir auch immer das zu dem Problem eine detaillierte Beschreibung erfolgen soll.

Was sollen wir sonst mit deinem Beitrag anfangen...Glaskugel?

Was wurde gemacht
Wie wurde es gemacht
Evtl. Fehlermeldungen

Wie sieht denn aktuell deine Mitgiederliste aus?

Werden die Coverbilder überhaupt angezeigt?

**mystery2072**

werden nicht angezeigt habe aber noch etwas anderes gefunden .

CSS

/** Members, UsersOnline and Teammember Site **/
body[id="tpl_wcf_usersOnlineList"] {
@include screen-md-up {
.containerList {
.details.userInformation {
> dl.inlineDataList {
> dt {
font-weight: bold;
width: 100% !important;
}
> dd {
width: 100% !important;
text-align: left !important;
margin-bottom: 10px !important;
}
> dd:not(:last-of-type):after {
display: none;
}
}
}
}
}
}
body[id="tpl_wcf_usersOnlineList"] {
@include screen-md-up {
.content > .section {
background: transparent !important;
border: 0;
}
.sectionContainerList header.sectionHeader {
display: none;
}
.containerList.userList {
display: flex;
flex-wrap: wrap;
width: calc(100% + 20px);
margin-left: -10px;
> li {
display: flex;
justify-content: center;
padding: 10px;
border-bottom: none;
min-width: 220px;
background: transparent;
box-shadow: none;
border: none;
}
> li:hover {
background: transparent;
box-shadow: none;
border: none;
}
.containerHeadline {
z-index: 1;
width: 100%;
margin: 10px auto 0 auto;
padding: 0 10px;
p {
background: transparent;
text-align: center;
font-size: 12px;
}
> h3 {
display: flex;
flex-direction: column;
text-align: center;
padding: 0;
> .badge {
margin: 0 auto;
padding: 4px 6px;
border-radius: 0;
}
span.icon.icon16.fa-lock.jsUserBanned {
margin-top: -24px;
margin-bottom: 8px;
}
> a.username.userLink, a.username {
background: transparent;
padding: 5px;
}
}
}
.box48 {
position: relative;
flex-direction: column;
width: 100%;
background: white;
padding: 0;
min-height: 450px;
border: 1px solid #dadada;
&::before {
content: "";
position: absolute;
width: 100%;
height: 115px;
background: linear-gradient(45deg, #1e1e1e, #171717);
border-top: 33px solid white;
border-image: linear-gradient(45deg, #171717, #1e1e1e);
}
> :last-child {
width: 100%;
}
> a {
z-index: 1;
margin-bottom: 0;
}
.userAvatarImage {
border: 5px solid #dadada;
height: 140px;
width: auto;
margin-top: 40px;
}
> :first-child:not(:last-child) {
margin-right: 0;
z-index: 1;
}
}
.details.userInformation {
.inlineList {
margin-top: -2px;
justify-content: center;
> li {
text-align: center;
color: rgba($wcfSidebarBackground, 1);
font-size: 11px;
&:last-child {
width: 100%;
}
}
}
> ul.inlineList.commaSeparated {
position: absolute;
bottom: 1px;
right: 0;
left: 0;
padding: 5px 10px;
background: url("#{$style_image_path}categorieBackground.png");
}
> dl.plain.inlineDataList.small {
margin: 0 0 28px 0;
padding: 20px 10px;
}
> dl.inlineDataList {
> dt {
width: 70%;
}
> dd {
width: 28%;
text-align: right;
}
> dd:not(:last-of-type):after {
display: none;
}
}
}
}
.containerList > li .buttonGroupNavigation {
display: flex;
width: 100%;
justify-content: center;
opacity: 1;
right: 0;
top: 3px;
background: transparent;
padding: 3px 5px 13px 3px;
z-index: 1;
> ul {
background: transparent;
border: none;
border-radius: 0;
> li {
padding: 0;
> a {
margin-top: -180px;
margin-bottom: -10px;
&:hover > .icon {
color: rgba($wcfSidebarBackground, 1);
text-shadow: none;
}
> .icon {
color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
}
}
}
}
}
}
.containerList.userList > li {
@include screen-lg {
flex: 25%;
max-width: 25%;
}
@include screen-md {
flex: 33.33%;
max-width: 33.33%;
}
}
}


body[id="tpl_wcf_team"] {
@include screen-md-up {
.content > .section {
background: transparent !important;
border: 0;
}
.sectionContainerList header.sectionHeader {
display: none;
}
.containerList.userList {
display: flex;
flex-wrap: wrap;
width: calc(100% + 20px);
margin-left: -10px;
> li {
display: flex;
justify-content: center;
padding: 10px;
border-bottom: none;
min-width: 220px;
background: transparent;
box-shadow: none;
border: none;
}
> li:hover {
background: transparent;
box-shadow: none;
border: none;
}
.containerHeadline {
z-index: 1;
width: 100%;
margin: 10px auto 0 auto;
padding: 0 10px;
p {
background: transparent;
text-align: center;
font-size: 12px;
}
> h3 {
display: flex;
flex-direction: column;
text-align: center;
padding: 0;
> .badge {
margin: 0 auto;
padding: 4px 6px;
border-radius: 0;
}
span.icon.icon16.fa-lock.jsUserBanned {
margin-top: -24px;
margin-bottom: 8px;
}
> a.username.userLink, a.username {
background: transparent;
padding: 5px;
}
}
}
.box48 {
position: relative;
flex-direction: column;
width: 100%;
background: white;
padding: 0;
min-height: 450px;
border: 1px solid #dadada;
&::before {
content: "";
position: absolute;
width: 100%;
height: 115px;
background: linear-gradient(45deg, #1e1e1e, #171717);
border-top: 33px solid white;
border-image: linear-gradient(45deg, #171717, #1e1e1e);
}
> :last-child {
width: 100%;
}
> a {
z-index: 1;
margin-bottom: 0;
}
.userAvatarImage {
border: 5px solid #dadada;
height: 140px;
width: auto;
margin-top: 40px;
}
> :first-child:not(:last-child) {
margin-right: 0;
z-index: 1;
}
}
.details.userInformation {
.inlineList {
margin-top: -2px;
justify-content: center;
> li {
text-align: center;
color: rgba($wcfSidebarBackground, 1);
font-size: 11px;
&:last-child {
width: 100%;
}
}
}
> ul.inlineList.commaSeparated {
position: absolute;
bottom: 1px;
right: 0;
left: 0;
padding: 5px 10px;
background: url("#{$style_image_path}categorieBackground.png");
}
> dl.plain.inlineDataList.small {
margin: 0 0 28px 0;
padding: 20px 10px;
}
> dl.inlineDataList {
> dt {
width: 70%;
}
> dd {
width: 28%;
text-align: right;
}
> dd:not(:last-of-type):after {
display: none;
}
}
}
}
.containerList > li .buttonGroupNavigation {
display: flex;
width: 100%;
justify-content: center;
opacity: 1;
right: 0;
top: 3px;
background: transparent;
padding: 3px 5px 13px 3px;
z-index: 1;
> ul {
background: transparent;
border: none;
border-radius: 0;
> li {
padding: 0;
> a {
margin-top: -180px;
margin-bottom: -10px;
&:hover > .icon {
color: white;
text-shadow: none;
}
> .icon {
color: rgba(255,255,255,0.6);
text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
}
}
}
}
}
}
.containerList.userList > li {
@include screen-lg {
flex: 25%;
max-width: 25%;
}
@include screen-md {
flex: 33.33%;
max-width: 33.33%;
}
}
}


body[id="tpl_wcf_usersOnlineList"] {
@include screen-md-up {
.containerList {
.details.userInformation {
> dl.inlineDataList {
> dt {
font-weight: bold;
width: 100% !important;
}
> dd {
width: 100% !important;
text-align: left !important;
margin-bottom: 10px !important;
}
> dd:not(:last-of-type):after {
display: none;
}
}
}
}
}
}
body[id="tpl_wcf_membersList"] {
@include screen-md-up {
.content > .section {
background: transparent !important;
border: 0;
}
.sectionContainerList header.sectionHeader {
display: none;
}
.containerList.userList {
display: flex;
flex-wrap: wrap;
width: calc(100% + 20px);
margin-left: -10px;
> li {
display: flex;
justify-content: center;
padding: 10px;
border-bottom: none;
min-width: 220px;
background: transparent;
box-shadow: none;
border: none;
}
> li:hover {
background: transparent;
box-shadow: none;
border: none;
}
.containerHeadline {
z-index: 1;
width: 100%;
margin: 10px auto 0 auto;
padding: 0 10px;
p {
background: transparent;
text-align: center;
font-size: 12px;
}
> h3 {
display: flex;
flex-direction: column;
text-align: center;
padding: 0;
> .badge {
margin: 0 auto;
padding: 4px 6px;
border-radius: 0;
}
span.icon.icon16.fa-lock.jsUserBanned {
margin-top: -24px;
margin-bottom: 8px;
}
> a.username.userLink, a.username {
background: transparent;
padding: 5px;
}
}
}
.box48 {
position: relative;
flex-direction: column;
width: 100%;
background: #f9f9f9;
padding: 0;
min-height: 450px;
border: 1px solid #dadada;
&::before {
content: "";
position: absolute;
width: 100%;
height: 115px;
background: linear-gradient(45deg, #1e1e1e, #171717);
border-top: 33px solid white;
border-image: linear-gradient(45deg, #171717, #1e1e1e);
}
> :last-child {
width: 100%;
}
> a {
z-index: 1;
margin-bottom: 0;
}
.userAvatarImage {
border: 5px solid #dadada;
height: 140px;
width: auto;
margin-top: 40px;
}
> :first-child:not(:last-child) {
margin-right: 0;
z-index: 1;
}
}
.details.userInformation {
.inlineList {
margin-top: -2px;
justify-content: center;
> li {
text-align: center;
color: rgba($wcfSidebarBackground, 1);
font-size: 11px;
&:last-child {
width: 100%;
}
}
}
> ul.inlineList.commaSeparated {
position: absolute;
bottom: 1px;
right: 0;
left: 0;
padding: 5px 10px;
background: url("#{$style_image_path}categorieBackground.png");
}
> dl.plain.inlineDataList.small {
margin: 0 0 28px 0;
padding: 20px 10px;
}
> dl.inlineDataList {
> dt {
width: 70%;
}
> dd {
width: 28%;
text-align: right;
}
> dd:not(:last-of-type):after {
display: none;
}
}
}
}
.containerList > li .buttonGroupNavigation {
display: flex;
width: 100%;
justify-content: center;
opacity: 1;
right: 0;
top: 3px;
background: transparent;
padding: 3px 5px 13px 3px;
z-index: 1;
> ul {
background: transparent;
border: none;
border-radius: 0;
> li {
padding: 0;
> a {
margin-top: -180px;
margin-bottom: -10px;
&:hover > .icon {
color: white;
text-shadow: none;
}
> .icon {
color: rgba(255,255,255,0.6);
text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
}
}
}
}
}
}
.containerList.userList > li {
@include screen-lg {
flex: 25%;
max-width: 25%;
}
@include screen-md {
flex: 33.33%;
max-width: 33.33%;
}
}
}

Alles anzeigen

**mystery2072**

in dem Style ist es einfacher gelöst.

https://pluginstore.woltlab.com/file/3278-webexpanded-poly/

**Hitman**

Zitat von mystery2072

in dem Style ist es einfacher gelöst.

Ich dachte wir reden hier von den Cover-Bildern

Dort sind sie übrigens auch nicht vorhanden.

Der CSS-Code von Michel wird schon passen denke ich.

Trotzdem wissen wir immer noch wie aktuell deine Mitglieder-Liste aussieht und was du bis jetzt dafür getan hast.

Da hilft uns ein anderes Beispiel aus einem anderen Design auch nicht weiter.

**mystery2072**

sieht so aus

**Mipu**

Zitat von mystery2072

sieht so aus

Ist das jetzt durch das Plugin von LoSti`s oder durch den Stil, weil ich schätze das wenn es durch den Stil ist, das du da die css anpssen musst, das die CoverPhotos angezeigt werden.

**Hitman**

mystery2072

Ich empfinde es doch ziemlich motivationlos & kark was du uns hier schreibst.

Zu beachten ist hier auch das zusätzlich 2 Templates angepasst werden müssen, dazu hast du noch

garnicht geäußert.

Wenn du es nicht alleine schaffst das nach Michels Anleitung solltest du dir evtl. direkte Hilfe holen der das für macht oder jemanden

via PN anschreiben. Für die Umsetzung braucht man ca. 5-10min.

**mystery2072**

Zitat von Hitman

mystery2072
Ich empfinde es doch ziemlich motivationlos & kark was du uns hier schreibst.
Zu beachten ist hier auch das zusätzlich 2 Templates angepasst werden müssen, dazu hast du noch
garnicht geäußert.
Wenn du es nicht alleine schaffst das nach Michels Anleitung solltest du dir evtl. direkte Hilfe holen der das für macht oder jemanden
via PN anschreiben. Für die Umsetzung braucht man ca. 5-10min.

Alles anzeigen

die TPL habe ich angepasst , hat aber nicht geklappt

**mystery2072**

Zitat von mipu

Ist das jetzt durch das Plugin von LoSti`s oder durch den Stil, weil ich schätze das wenn es durch den Stil ist, das du da die css anpssen musst, das die CoverPhotos angezeigt werden.

ist durch das Style , habe es hier eingetragen Stilunabhängiges CSS und SCSS. Habe es nin Zei teile aufgteil weil nur 10000 Zeichen möglich

**mystery2072**

CSS

/** Members, UsersOnline and Teammember Site **/
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .content > .section {
            background: transparent !important;
            border: 0;
        }
        .sectionContainerList header.sectionHeader {
            display: none;
        }
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    min-width: 220px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                z-index: 1;
                width: 100%;
                margin: 10px auto 0 auto;
                padding: 0 10px;
                p {
                    background: transparent;
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        margin: 0 auto;
                        padding: 4px 6px;
                        border-radius: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: transparent;
                        padding: 5px;
                    }
                }
            }

Alles anzeigen

**mystery2072**

Code

.box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: white;
                padding: 0;
                min-height: 450px;
                border: 1px solid #dadada;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 115px;
                    background: linear-gradient(45deg, #1e1e1e, #171717);
                    border-top: 33px solid white;
                    border-image: linear-gradient(45deg, #171717, #1e1e1e);
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-bottom: 0;
                }
                .userAvatarImage {
                    border: 5px solid #dadada;
                    height: 140px;
                    width: auto;
                    margin-top: 40px;
                }
                > :first-child:not(:last-child) {
                    margin-right: 0;
                    z-index: 1;
                }
            }
            .details.userInformation {
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarBackground, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 0;
                    left: 0;
                    padding: 5px 10px;
                    background: url("#{$style_image_path}categorieBackground.png");
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: center;
            opacity: 1;
            right: 0;
            top: 3px;
            background: transparent;
            padding: 3px 5px 13px 3px;
            z-index: 1;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    > a {
                        margin-top: -180px;
                        margin-bottom: -10px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}

Alles anzeigen

CoverPhoto LoSti's World Erweiterte Memberliste

Jetzt mitmachen!

Gast

Unserer Forum

Empfehlungen

Social/Media

Forum online seit...

Datenschutzeinstellungen