Add Background Header To SharePoint Online Site

In this post, I am going to show you how to add header image as background to SharePoint online site, this will be very simple all we need is a image, and CSS class.

The beauty of the approach what we follow now is… we neither touch existing master page nor existing CSS

We will implement this by using an  alternate CSS approach So, let’s work out

I have two files, an image named as header.png and a custom CSS named as style.css this custom CSS has a single class referring the image as background.

Header image

Header image

Style.css

#s4-titlerow
{
	height: 176px;
	background-image:url('/sites/Demo/Style%20Library/images/header.png');
}

Let’s upload the header.png under style library > images folder

Upload header image to style library > images folder

Upload header image to style library > images folder

Then after, upload the style.css file to style library > style folder (if you don’t see style by default, create one)

Upload style.css file to style library > style folder

Upload style.css file to style library > style folder

Now, the final step is to set the alternate css, grab the uploaded style.css link, the link will be like https://<your-sharepoint-online-domain>/sites/Demo/Style Library/style/style.css
Once you have the link, got to site gear > Site settings, under look and feel section, click on Master page
scroll down to the bottom of the page, expand Alternate CSS, the select the radio button to Specify a CSS file to be used by this site and all sites that inherit from it: provide the style.css location, then click OK
Updated Alternate CSS URL

Updated Alternate CSS URL

After you complete the all the steps, you will be able to see the header as below 🙂
SharePoint online custom header

SharePoint online custom header

Insert items into SharePoint custom list using Angular

In this example, I am going to show you how to insert items into SharePoint custom list using AngularJs

I want to make this post very short and simple, the code snippet you will see in the article will be very minimal, only related to insert items into custom list using Angular.

In one of my previous article I had show how to insert items into custom list using server object model, you may visit the link if you need the code snippet using server object model.

Primarily, I have a simple custom list naming Employees with columns…

Title [Single line of text]

FirstName [Single line of text]

LastName [Single line of text]

Designation [Single line of text]

Employee List

Employee List

Then I added the script files in js folder of Style library (you may create one js folder inside Style Library)

Style Library - Script files

Style Library – Script files

You may download the Jquery and AngularJs directly from the website (I’m using Jquery 3.2.1 and Angular 1.5.6)

Also, you can see the addcontroller.js and AddItemstoEmployeeList.html file in the above style library. The code snippet for the files is below

addcontroller.js


var myApp = angular
                .module("SharePointApp", [])               

                .controller("addcontroller", function ($scope, $http) {
                    var restUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Employees')/items";
                    var field = $scope;
                    field.insertEmployee = function () {
                        return $http({
                            headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() },
                            method: "POST",
                            url: restUrl,
                            data: {
                                'Title':field.Title,
                                'FirstName': field.FirstName,
                                'LastName':field.LastName,
                                'Designation': field.Designation
                            }
                        })
                        .then(insertItem)
                        .catch(function (message) {
                            console.log("insertEmployee() error: " + message);
                        });
                        function insertItem(data, status, headers, config) {
                            alert("New Employee Record Inserted!");
                            return data.data.d;
                        }
                    }
                });

AddItemstoEmployeeList.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="/Style%20Library/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/Style%20Library/js/angular.min.js"></script>
<script type="text/javascript" src="/Style%20Library/js/addcontroller.js"></script>
<style>
.style1{
width:200px;
}
</style>
</head>
<body ng-app="SharePointApp" ng-controller="addcontroller">
<h3><strong>Add Items To Employee List</strong></h3>

<Table >
<tr>
<td class="style1">Title: </td>
<td>
<input type="text" id="title" ng-model="Title" />
</td>
</tr>
<tr>
<td class="style1">First Name: </td>
<td> <input type="text" id="firstName" ng-model="FirstName" /></td>
</tr>
<tr>
<td class="style1">Last Name: </td>
<td> <input type="text" id="lastName" ng-model="LastName" /></td>
</tr>
<tr>
<td class="style1">Designation: </td>
<td> <input type="text" id="designation" ng-model="Designation" /></td>
</tr>
<tr>
<td class="style1">&nbsp;</td>
<td><input type="button" id="btnInsertEmployee" value="Submit" ng-click="insertEmployee()" /></td>

</tr>
</table>
</div>
</body>
</html>

Copy the code snippets controller.js and AddItemstoEmployeeList.html and upload both to style library, refer the html in a content editor webpart on SharePoint page. you will see the output as below

Insert into custom list using Angular

Insert into custom list using Angular

A Quick Look On Sharepoint 2010 Managed Client Object Model Programs

I have a practice of posting handy code snippets which takes less time to read, understand and save in mind with very little space of memory
Please look into few of my previous handy code snippet articles below: Read the rest of this entry »

SharePoint Document Counter Counts The Document Downloads

In this post I’m going to show you how to count the document events of SharePoint site, after going through this post you will learn how to count the document downloads, views, updates, deletion, restoration etc.

I remember this solution has been asked by few people on this blog. Read the rest of this entry »

Understanding SharePoint Delegate Control

In this article I’m going to explain about delegate control, before we jump start into the technical talk we will understand first what is the meaning of Delegates

As I believe most of us we know that in general delegates are also called as ambassadors, diplomats, representatives etc. Read the rest of this entry »

Most Common Custom WebParts Part 4 – Flash Media WebPart

In my previous post you can view the most commonly used custom webparts, Tree View WebPart Shows Sites and Sub-Sites, Menu WebPart Shows Sites and Sub-Sites in Fly-Out Mode, Windows Media Player WebPart Read the rest of this entry »

Most Common Custom WebParts Part 3 – Windows OR YouTube Media Player WebPart

In my previous post you can view the most commonly used custom webparts, Tree View WebPart Shows Sites and Sub-Sites and Menu WebPart Shows Sites and Sub-Sites in Fly-Out Mode

Now I got one more chance to continue the series of most commonly used custom webparts, so once again I come up with a simple Read the rest of this entry »

Single Zone Split DNS

Single Zone Split DNS –  This terminology is not correlated to SharePoint, but still I want to post in my blog, since I had stretch lot of my time to configure forward lookup zones on my Windows Server 2008 R2.

You may think why I want to configure forward lookup zones, that is not my job and it is related to Windows administrator Read the rest of this entry »

Connecting an Excel SpreadSheet to SharePoint 2010 list

Sharepoint 2010 has a feature of connecting an Excel workbook
Whenever an item is added/updated/deleted in SharPoint list the record is also added/updated/deleted in the connected Excel workbook Read the rest of this entry »

Configure SharePoint 2010 Metadata Navigation and Filter

We have to discuss about the most thrilling and useful feature for the document library today.

Yes I’m talking about Metadata Navigation Settings in SharePoint 2010 document library.

SharePoint 2010 Metadata Navigation is the new piece of feature that supports to navigate and filter the documents in a library by Read the rest of this entry »