More often something new - With the free news function

Klicken Sie hier für die deutsche Version
Sharepoint Responsive Announcements

Do you often have something to say? Then use your SharePoint to do so. SharePoint Consult has developed a free additional Feature. You can just download the news app and add it as WebPart to your SharePoint in a few steps.
Our offer is for free with no hidden clauses. However, it has proven to be valuable. The only thing you have to take care of is the news.

  • Let your announcements look beautiful!
  • On all devices the right size: Whether notebook, tablet or 30-inch monitor
  • Improved clarity, the place is ideal exploited. - Based on Announcements WebPart
  • Based on the Announcements-WebPart

Download ZIP

The Setup

Ankündigungen-Webpart anlegen

Step 1: Add the app "Announcements"

First, click on Settings - Add App. Then select the App „Announcements“, give it a name of your choice and click "Create". The system automatically adds the new app in your app collection. It will instantly appear in your personal app list.

Webpart hinzufügen

Step 2: Add the App as a WebPart to your website

Add the app you just created to the desired website. For this, first click on the "Settings" icon on the web page and then "Edit page". Then select the tab "Insert" in the top menu bar (Ribbon). Here click "App WebPart" to add the new app "announcements" as a WebPart. Now select the correct view for the WebPart. To do so, click the arrow on the top-right corner of the WebPart, and edit the view. First change the selected view to "outline view" in the toolbar on the right and confirm the selection by clicking "OK". In order for the changes to take effect, click on the top menu bar on "page" and then „Save".

Webpart ID

Step 3: Find the right WebPart ID

Now it is time to find out the ID of the WebPart to create a connection to the CSS. Open the developer tools on your browser by pressing the F12 key, and look for the WebPart ID (for e.g. WebPartWPQ5). Copy the ID in a text editor or write it down.

CSS einfügen

Step 4: Insert our CSS code

In order that your WebPart automatically adjusts on each screen, you must add our CSS code in a ScriptEditor WebPart.Click again on "Settings" and then on "edit page". Navigate to the tab "Insert", select "WebPart". Now add from the category "media and content" the Script Editor. To add the code, click "Edit Web Part" and then "edit code fragment “. Copy the code below and replace the ID "WebPartWPQ4" by the generated ID in Step 3 and save conclusively the WebPart and your page. Now you can use the new function!

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