SharePointCommunity

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

CSS in SharePoint

Dieser Beitrag hat 10 Antworten

43 Beiträge

SharePointUser102010 erstellt 18 Nov. 2015 17:27

Hallo,

mich interessiert, wo in SharePoint 2013 CSS Dateien abgelegt werden. SP muss ja für die Navigation und Co auf irgendwelche CSS Elemente zugreifen, jetzt ist die Frage, wo stecken diese Dateien?

Für eine Antwort wäre ich sehr dankbar!

Alle Antworten

234 Beiträge

Patrick Als Antwort am 19 Nov. 2015 09:45

Einige CSS Dateien wie z.B. die COREV15.css liegen bei mir hier:

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES

1033 ist dabei die Sprache.

1033 = Englisch

1031 = Deutsch

Grüße

Patrick

Zu meinem SharePoint Blog: afraIT

19231 Beiträge

Andi Fandrich Als Antwort am 19 Nov. 2015 10:44

Ergänzend dazu noch der Hinweis, daß sich der Pfad ändert, wenn Themes angewendet wurden. Und vor allem der Hinweis, daß man an diesen Dateien nicht rumfummeln darf. Man bindet stattdessen eigene CSS-Dateien ein und überschreibt dort die Standard-Styles.

Viele Grüße
Andi

af @ evocom de
Blog

43 Beiträge

SharePointUser102010 Als Antwort am 20 Nov. 2015 14:19

"Ergänzend dazu noch der Hinweis, daß sich der Pfad ändert, wenn Themes angewendet wurden. Und vor allem der Hinweis, daß man an diesen Dateien nicht rumfummeln darf. Man bindet stattdessen eigene CSS-Dateien ein und überschreibt dort die Standard-Styles."

Das wäre meine nächste Frage gewesen, ich würde nämlich gerne die Menüleiste auf der rechten Seite bearbeiten sollen, bsp. die Farbe sobald die Maus über die Schaltfläche fährt.

Wüsste hier einer, wie ich das machen kann.

Mit CSS und html kenne ich mich zwar aus, ich weiß nur nicht, wie ich das in die seattle.html einbinden kann/soll

19231 Beiträge

Andi Fandrich Als Antwort am 20 Nov. 2015 17:00

Das Prinzip sieht so aus: erstelle eine CSS-Datei und lege sie in eine Bibliothek wie Site Assets oder Style Library. Oder auch in die Masterpage Galery. Diese Datei verlinkst Du in der Masterpage ganz am Ende von <head>, so daß sie nach allen anderen geladen wird.

Jetzt mußt Du die Elemente untersuchen, deren Aussehen Du ändern möchtest, d.h. herausfinden, durch welches CSS sie so aussehen wie sie gerade aussehen. Das kann man z.B. mit den Entwicklertools im IE machen (F12) oder was auch immer man am liebsten benutzt. Die gefundenen CSS-Klassen überschreibst Du dann in der eigenen Datei.

Viele Grüße
Andi

af @ evocom de
Blog

43 Beiträge

SharePointUser102010 Als Antwort am 22 Nov. 2015 12:06

Ah danke das hilft mir doch mal wieder weiter.

Jetzt habe ich noch eine Frage. Wenn ich jetzt mal herausfinde, wie ich den Seitentitel veränder beispielsweise die Farbe. Dann kann ich das in eine CSS packen. Jetzt ist aber die Frage, wie und wo ich das jetzt angeben muss.

Möglichkeit 1:

<head>

</head>

Möglichkeit 2:

<head>

<SharePoint:CssRegistration Name="https://tam.seite.de/cssstyle/Mystyle.css" runat="server" />

</head>

Ich hätte diesen Code jetzt einfach in die seattle.html eingefügt wäre das richtig gewesen oder muss ich da eine andere Datei nehmen?

Was von beiden Ansätzen ist den jetzt besser? Oder muss ich beide benutzen? Worin besteht der Unterscheid?

Ich würde mich wieder über hilfreiche Antworten freuen!

19231 Beiträge

Andi Fandrich Als Antwort am 23 Nov. 2015 08:16

Über das <link> Element wird die Datei ganz einfach fest eingebunden und in den meisten Fällen ist das völlig OK. Über das CSSRegistration-Control bekommt SharePoint noch die Möglichkeit einzugreifen. Z.B. kann damit gewährleistet werden, daß ein Theme auch auf Deine Datei angewendet wird (vorausgesetzt Dein CSS ist dafür vorbereitet).

Viele Grüße
Andi

af @ evocom de
Blog

43 Beiträge

SharePointUser102010 Als Antwort am 23 Nov. 2015 16:34

Danke mal wieder für deine gute Antwort!

Ich habe aktuell eine CSS Navigation in die Ribbon eingebunden, also eher vor die Ribbon sozusagen dort, wo das blaue bei seattle.html theme ist. Das ist jetzt vllt keine besonders gute Beschreibung gewesen, aber die Navigation also solches funktioniert im Browser ohne SharePoint super.

Aber beim einbinden in SharePoint erscheint die Navigation zwar, aber sobald ich das Dropdown Menü anklicke ist dieses sehr transparent, also eher sogar hinter dem was SharePoint anzeigt. Wo könnte hier ein Fehler sein?

Das Bild beschreibt vllt. besser was ich meine:

19231 Beiträge

Andi Fandrich Als Antwort am 23 Nov. 2015 16:45

Tut mir leid, da kann ich Dir absolut nicht weiterhelfen. Ich bin Entwickler, kein Designer.

Ich kann Dir aber sagen, daß Du Dir da die so ziemlich anspruchsvollste Stelle ausgesucht hast. Rund um das Ribbon wird das mit dem Design sehr schnell sehr kompliziert. Hier hat SharePoint bereits von Haus aus mehrere Layer, die bei Bedarf aus- und eingeblendet werden und die sich gegenseitig überlagern. Und (was Du vielleicht noch gar nicht bemerkt hast) das Ganze hat auch Einfluß auf das Scrollverhalten. Also unbedingt auch mit nach unten langen Seiten testen.

Viele Grüße
Andi

af @ evocom de
Blog

43 Beiträge

SharePointUser102010 Als Antwort am 23 Nov. 2015 19:05

Danke für deine Antwort, also macht es mehr Sinn das Menü unter die Ribbon zu packen. Ich versuche das morgen mal. Aber dieser Transparenz- Verlust ist schon komisch?

496 Beiträge

Derby Als Antwort am 27 Nov. 2015 16:23

Da wo du im Screenshot das Menu einbaust, bist du aber nicht in der SharePoint Navigation, sondern in der "suitbarLeft". Weis nicht ob Dir das bewusst ist. In der suitbarRight sind zum Beispiel die Links zur MySite.

Die eigentliche Navigation ist die neben dem Logo --> "Umgebung LINKS BEARBEITEN".

In die Suitbar sollte man nur Info´s oder Links einfügen, die für die gesamte Farm gelten soll, da die suitbar in allen SC gleich angezeigt wird. So wie du das Menu baust, sieht man in anderen SiteCollections (vorausgesetzt ihr habt mehrere) Links von anderen SiteCollections. Den Aufbau würde ich nochmal überdenken.

Derby

CC BY-NC-ND - Michael Greth

Datenschutzerklärung

Sponsored by

CSS in SharePoint

Dieser Beitrag hat 10 Antworten

Alle Antworten