Öfter mal was Neues - Mit der kostenlosen News-Funktion

Click here for the english version
Sharepoint Responsive Announcements

Haben Sie öfter mal etwas zu sagen? Dann nutzen Sie dafür doch Ihr SharePoint. Wir von SharePointConsult haben eine Zusatzfunktion entwickelt, die wir Ihnen jetzt kostenlos zur Verfügung stellen. Die Neuigkeiten-App können Sie einfach herunterladen und in wenigen Schritten als WebPart Ihrer Installation hinzufügen.
Unser Angebot ist wirklich kostenlos und ohne versteckte Klauseln. Es hat aber einen nachweislich hohen Nutzwert. Nur für die Neuigkeiten müssen Sie selbst sorgen …

  • Lassen Sie ihre Ankündigungen schön aussehen!
  • Auf allen Geräten die richtige Größe: Ob Notebook, Tablet oder 30-Zoll Monitor
  • Bessere Übersichtlichkeit, der Platz wird ideal ausgenutzt.
  • Basiert auf Announcements-WebPart

Download ZIP

Die Einrichtung

Ankündigungen-Webpart anlegen

Schritt 1: Legen Sie die App „Ankündigungen“ an

Klicken Sie zunächst auf das Symbol „Einstellungen - App hinzufügen“. Dann wählen Sie die App „Ankündigungen“ aus, geben ihr einen frei wählbaren Namen und klicken Sie auf „Erstellen“. Das System fügt die neue App automatisch in Ihre App-Sammlung ein. Sie wird umgehend in Ihrer persönlichen App-Liste angezeigt.

Webpart hinzufügen

Schritt 2: Fügen Sie die App als WebPart der Webseite hinzu

Die soeben erstellte App können Sie im Handumdrehen zur gewünschten Webseite hinzufügen.
Dazu klicken Sie zunächst auf das Symbol „Einstellungen“ auf der Webseite und anschließend auf „Seite bearbeiten“. Wählen Sie dann den Reiter „Einfügen“ in der oberen Menüleiste (Ribbon). Hier klicken Sie auf „App-Webpart“, um die neue App „Ankündigungen“ als Webpart hinzuzufügen.
Wählen Sie jetzt die richtige Ansicht im WebPart aus. Klicken Sie dazu oben rechts am Webpart auf den Pfeil und bearbeiten Sie die Ansicht.
Ändern Sie zunächst in der Werkzeugleiste rechts die ausgewählte Ansicht auf „Überblickansicht“ und bestätigen Sie die Auswahl, indem Sie auf „OK“ klicken. Damit die Änderungen übernommen werden, klicken Sie abschließend in der oberen Menüleiste auf „Seite“ und dann auf „Speichern“.

Webpart ID

Schritt 3: Finden Sie das passende WebPart

Jetzt gilt es, die ID des Webparts herauszufinden, um eine Verbindung zum CSS zu schaffen. Öffnen Sie durch Druck auf die Taste F12 die Entwickler-Tools Ihres Browsers und suchen Sie im WebPart die ID (z. B. WebPartWPQ5). Kopieren Sie die ID in den Texteditor oder notieren Sie sich diese.

CSS einfügen

Schritt 4: Fügen Sie unseren CSS-Code ein

Damit Ihr WebPart sich automatisch an jeden Bildschirm anpasst, müssen Sie nun noch unseren CSS-Code in ein Script Editor Webpart einfügen.
Klicken Sie erneut auf das Symbol „Einstellungen“ und dann auf „Seite bearbeiten“. Über den Reiter „Einfügen“ wählen Sie „Webpart“ aus. Fügen Sie nun über die Kategorie „Medien und Inhalt“ den Skript-Editor hinzu.
Um den Code hinzuzufügen, klicken Sie nun auf „Webpart bearbeiten“ und dann auf „Codeausschnitt bearbeiten“. Kopieren Sie dann den nachfolgenden Code und ersetzen Sie die ID „WebPartWPQ4“ durch die in Schritt 3 generierte ID. Speichern Sie abschließend das WebPart und Ihre Seite.
Ab sofort können Sie die neue Funktion nutzen!

<style type='text/css'>

/* Design der Ankündigungen über die WebpartID */
/* Hintergrund und Breite*/ div#WebPartWPQ4 {
	background-color: #F2F2F2;
	padding: 6px;
	max-width: 606px;
	position: relative;
	left: -1px;
	border: 1px solid #ababab;
    img{
    max-width: 596px;
    }
}

/* Groesse der Ueberschrift */
div#WebPartWPQ4 .ms-announcementtitle {
	font-family:"Segoe UI Semilight","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;font-size:1.46em
}

/* Farbe der Ueberschrift */
div#WebPartWPQ4 .ms-announcementtitle a {
	color: #444;
}

/* Responsible Breite*/
/* 17 Zoll */
@media
(max-width: 1200px) {
	div#WebPartWPQ4 {
		max-width: 446px;
	}
    img{
    max-width: 436px;
    }
}

/* 19 Zoll */
@media (min-width:
1280px) {
	div#WebPartWPQ4 {
		max-width: 606px;
	}
    img{
    max-width: 596px;
    }
}

/* 21-23 Zoll */
@media (min-width: 1600px) {
	div#WebPartWPQ4 {
		max-width: 856px;
	}
    img{
    max-width: 846px;
    }
}

/* 24-27 Zoll */
@media (min-width: 1920px) {
	div#WebPartWPQ4 {
		max-width: 1056px;
	}
    img{
    max-width: 1046px;
    }
}

/* 30+ Zoll */
@media (min-width: 2560px) {
	div#WebPartWPQ4 {
		max-width: 1656px;
    
	}
    img{
    max-width: 1646px;
    }
}     

</style>