SharePointCommunity
Die deutschsprachige Community für SharePoint, Microsoft 365, Teams, Yammer und mit Azure

Größe der Kacheln ändern

bewertet von 0 Usern
Nicht beantwortet Dieser Beitrag hat 0 Geprüfte Antworten | 12 Antworten | 3 Followers

Ohne Rang
15 Beiträge
Myfinal erstellt in 26 Mrz 2015 8:12

Hallo,

in einem anderen Beitrag hier habe ich bereits gelesen, dass es möglich ist, die Größe der Kacheln zu ändern. Damit hat sich meine erste Frage bereits erledigt ;-)
Die zweite Frage wäre nun, wie genau ich das anstelle? Über das Menüband wird es wohl nicht funktionieren, sondern vermutlich nur, wenn man sich den HTML-Code anschaut und dort entsprechendes verändert. Da meine HTML Kenntnisse allerdings noch ausbaufähig sind, ist mir auf den ersten Blick nicht direkt ersichtlich, wo und was ich ändern muss, ohne direkt alles zu zerstören.
Anmerkung: Ich hätte die Kacheln natürlich gerne etwas kleiner - denn wenn man kein Icon als 'Hintergrund' für die einzelnen Kacheln setzt, sind diese einfach unnötig groß.

Ergänzung: Könnte man theoretisch jede Kachel individuell bearbeiten, was die Größe angeht oder funktioniert das nur einheitlich?

Danke im Voraus.

Beste Grüße

Alle Antworten

Top-10-Beitragsschreiber
19.144 Beiträge

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

Viele Grüße
Andi
af @ evocom de
Blog
Ohne Rang
15 Beiträge

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.

Top-10-Beitragsschreiber
19.144 Beiträge

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.

Viele Grüße
Andi
af @ evocom de
Blog
Top-25-Beitragsschreiber
452 Beiträge

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>

Top-10-Beitragsschreiber
19.144 Beiträge

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.

Viele Grüße
Andi
af @ evocom de
Blog
Top-25-Beitragsschreiber
452 Beiträge

ja, habe das webpart ganz unten positioniert.

Top-25-Beitragsschreiber
452 Beiträge

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

Ohne Rang
15 Beiträge

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.

 

Top-10-Beitragsschreiber
643 Beiträge

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.

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

Henning Eiben
busitec.de

Top-10-Beitragsschreiber
19.144 Beiträge

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 ;-)

Viele Grüße
Andi
af @ evocom de
Blog
Top-500-Beitragsschreiber
49 Beiträge

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!

Ohne Rang
13 Beiträge

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

Seite 1 von 1 (13 Elemente) | RSS