Größe der Kacheln ändern

Andi Fandrich Als Antwort am 26 März 2015 08:29

Das ist leider alles außer einfach und man braucht dazu ziemlich gute HTML und JavaScript-Kenntnisse. Eine fertige Anleitung dazu kenne ich nicht.

Myfinal Als Antwort am 26 März 2015 08:33

Klingt leider überhaupt nicht zufriedenstellend.

Irgendwo im HTML-Code der Kacheln muss doch die Größe hinterlegt sein. Und ich hatte nun gehofft, dass man einfach an dieser Stelle andere Parameter angeben könnt?! In der Theorie klingt das für mich plausibel :D

Meine HTML Kenntnisse sind maximal durchschnittlich, meine JAVA Kenntnisse wenigstens etwas besser. Aber "ziemlich gut" ist natürlich auch relativ.

Andi Fandrich Als Antwort am 26 März 2015 09:14

Das Problem dabei ist, daß das HTML der Kacheln dynamisch erzeugt wird. Man kann also nicht einfach eine HTML-Datei bearbeiten und alles ist gut.

Die Größe ist auch noch per Inline-Style festgelegt und nicht über CSS-Klassen, die man einfach überschreiben könnte. Deshalb gibt es zwei Möglichkeiten, die beide per JavaScript umzusetzen sind. Entweder nach dem Rendern die Kacheln ausfindig machen und die Größe anpassen oder in den Rendering-Prozeß eingreifen und dort ändern.

Andreas St. Als Antwort am 26 März 2015 10:11

Hallo, ich ahbe das mal so gelöst: Einfach einen Contentedito-Webpart auf die Seite bringen und den folgenden Inhalt einfügen. Im CSS kann man dann die Parameter entsprechend setzen.

<style type="text/css">
            div.ms-promlink-body {
                height: 100px;
            }

            div.ms-tileview-tile-root {
                height: 110px !important;
                width: 110px !important;
            }

            div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox,  div.ms-tileview-tile-content > a > div > span {
                height: 100px !important;
                width: 100px !important;
            }

            div.ms-tileview-tile-content > a > div > img {
                max-width: 100%;
                width: 100% !important;
            }

            ul.ms-tileview-tile-detailsListMedium {
                height: 100px;
                padding: 0;
            }

            li.ms-tileview-tile-descriptionMedium {
                font-size: 11px;
                line-height: 16px;
            }

            div.ms-tileview-tile-titleTextMediumExpanded, div.ms-tileview-tile-titleTextLargeCollapsed, div.ms-tileview-tile-titleTextLargeExpanded {
                padding: 3px;
            }

            div.ms-tileview-tile-titleTextMediumCollapsed {
                background: none repeat scroll 0 0 #002E4F;
                font-size: 12px;
                line-height: 16px;
                min-height: 36px;
                min-width: 97px;
                padding-left: 3px;
                position: absolute;
                top: -36px;
            }

            li.ms-tileview-tile-descriptionMedium {
                font-size: 11px;
                line-height: 14px;
                padding: 3px;
            }

</style>

Andi Fandrich Als Antwort am 26 März 2015 10:15

Und das funktioniert? Ich habe mir das vorher mal angesehen und zumindest dort, wo ich geschaut habe, war die Größe per Inline-Style gesetzt und damit nicht überschreibbar.

Andreas St. Als Antwort am 26 März 2015 10:18

ja, habe das webpart ganz unten positioniert.

Andreas St. Als Antwort am 26 März 2015 10:27

kleiner Nachtrag: Habe es gerade eben nocheinmal mit einem Skript-Editor probiert. Es geht!

Myfinal Als Antwort am 26 März 2015 12:49

Habe heute leider kurfrzistig zwei andere Projekte zugewiesen bekommen, denen ich jetzt erstmal meine gesamte Aufmerksamkeit widmen muss. Aber früher oder später werde ich deine Variante auf jeden Fall mal testen - scheint ja doch relativ einfach realisierbar zu sein. Deshalb auf jeden Fall schon mal ein 'Danke' von meiner Seite - ich gebe hier natürlich Rückmeldung, sobald ich zeitlich dazu komme.

Henning Eiben Als Antwort am 30 März 2015 12:28

[quote user="Andi Fandrich"]

Und das funktioniert? Ich habe mir das vorher mal angesehen und zumindest dort, wo ich geschaut habe, war die Größe per Inline-Style gesetzt und damit nicht überschreibbar.

[/quote]

Ich denke wichtig ist hier das !important im CSS. Damit sollten die Inline-Styles übersteuert werden können.

Andi Fandrich Als Antwort am 30 März 2015 12:40

Ich hätte geschworen, daß man auch mit !important keine inline-Styles überschreiben kann. Da sieht man, daß ich eben doch besser bei C# & Co. bleiben sollte anstatt bei HTML und CSS ;-)

Mel89 Als Antwort am 18 Jan. 2016 14:41

Hallo zusammen

Vielen Dank für diesen hilfreichen Beitrag. Habe ich soeben ausprobiert und hat wunderbar geklappt. Nun sind aber die Hintergrundbilder der Kacheln zu gross. Die Grösse des Bildes wird automatisch vergeben - egal wie klein ich es hochlade.

Weiss jemand, wie man die Grösse der Bilder noch standardmässig anpassen kann?

Vielen Dank!

Matthias Als Antwort am 28 Sept. 2020 16:39

Moin Moin

Danke erst einmal für das CSS hier.

Im Prinzip funktioniert das hier auch. Mit einer Einschränkung. 
Das Hintergrundbild wird auf die ursprüngliche Größe von SharePoint hoch skalliert.
Ich habe eins mit 100 x 100 Pixel angelegt und wird falsch skalliert.
Hat jemand dafür eine Lösung?
Ich habe im Internet leider nichts gefunden.

Im Einsatz ist SharePoint 2016 Foundation.

Danke und Gruß

Matthias