Change styles including fonts in SharePoint Online modern pages


Following article is the output for my investigation on SharePoint online branding techniques, which shows how to brand SharePoint online modern pages to match your company guidelines. This includes changing the color scheme of SharePoint Online and Office suite and using your company approved fonts for the pages.

As of now, May 2nd, 2019, Microsoft doesn’t support Alternate CSS or any other out of the box way to use custom style in modern pages in SharePoint online.

I have tried this exhaustively and following are my findings:

Using Classic Themes in modern pages doesn’t change font, only color scheme and background image is taken into consideration.

Following excerpts is taken from SharePoint site theming overview article from Microsoft

Description on using classic theme in SharePoint modern pages

Further more, Master page updates has no effect on Modern design and SharePoint modern user interface ignores custom master pages and alternate CSS.

Reference Link : https://docs.microsoft.com/en-us/sharepoint/branding-sharepoint-online-sites-modern-experience

Description of Site Branding in Classic Experience in SharePoint online

Reference Link 2: https://docs.microsoft.com/en-us/sharepoint/dev/transform/modernize-branding

Description on modernize site branding

So, you wanted to brand your site with a specific font and specific styles but so far you can only create a custom theme and change the color combination.

To do this, you will first have to find a suitable color combination using the Theme Generator site from Microsoft.

https://developer.microsoft.com/en-us/fabric#/styles/themegenerator

Once you are satisfied with your theme colors, copy the output from the the ‘Output’ section of the page and chose ‘PowerShell’ option.

Theme Palate from Theme Generator site

Now, check the following site which contains PowerShell commands which would let you install your new theme:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-powershell

Here is your code:


$adminUPN="admin@yourorganization.onmicrosoft.com"
$orgName="yourorganization"
$userCredential = Get-Credential -UserName $adminUPN -Message "Type the password."
Connect-SPOService -Url https://$orgName-admin.sharepoint.com -Credential $userCredential

$themepalette = @{
"themePrimary" = "#0078d4";
"themeLighterAlt" = "#eff6fc";
"themeLighter" = "#deecf9";
"themeLight" = "#c7e0f4";
"themeTertiary" = "#71afe5";
"themeSecondary" = "#2b88d8";
"themeDarkAlt" = "#106ebe";
"themeDark" = "#005a9e";
"themeDarker" = "#004578";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#c2c2c2";
"neutralSecondary" = "#858585";
"neutralPrimaryAlt" = "#4b4b4b";
"neutralPrimary" = "#333333";
"neutralDark" = "#272727";
"black" = "#1d1d1d";
"white" = "#ffffff";
}

Add-SPOTheme -Identity "Custom-Theme" -Palette $themepalette -IsInverted $false

Next step,

  1. go to your SharePoint site and apply this new theme.
  2. Then, chose an appropriate color for the header, which would be now based on your theme.

Check this article from Microsoft if you don’t know how to:

https://support.office.com/en-us/article/Change-the-look-of-your-SharePoint-site-06bbadc3-6b04-4a60-9d14-894f6a170818

You can also chose to brand the Office 365 suite bar. Here is how: https://docs.microsoft.com/en-us/office365/admin/setup/customize-your-organization-theme?view=o365-worldwide

At this point, you should be able to brand your site with your company colors.

What’s left? Font’s and other styles in the page which you might want to modify further. So, you want to chose a custom font for your SharePoint online modern page, how to apply it? SharePoint Framework Extension Application Customizer is your best choice now.

Using SharePoint framework extension application customizer, you can inject custom css to the SharePoint modern pages. Please check the following tutorial to understand how you can create one for yourself:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

I would suggest to go one step further and check the phase 2 of the solution where they show how to add custom scss file in your project and use it:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

How to make it useful for our case?

Step 1: Download your font. If you are using Google Fonts, then go to https://fonts.google.com, chose your font and get the import URL, which would look like below:

@import url(‘https://fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Caption|PT+Sans+Narrow’);
 
Step 2: Use this import statement in your Application customizer scss file but remove ‘url’ portion, so it would look like,
 
@import ‘https://fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Caption|PT+Sans+Narrow’;
 
Then you can use the font like:

font-family: ‘PT Sans Caption’, sans-serif;

font-family: ‘PT Sans Narrow’, sans-serif;

font-family: ‘PT Sans’, sans-serif;

You can also put the fonts in a Shared location of your SharePoint site and import from there.

Step 3: Use CSS selectors to find out areas where you wan to change the style. As an example, if you want to change the style of the title for all SharePoint webparts in your page, then you might have to use the CSS selector span[role=heading] , this would match all the ‘span’ withing your modern page with ‘role’ attribute value as ‘heading’, which is for most of the Web Part Titles.
 
Like,

span[role=heading]
{
font-size: 40pt;
color: orangered;
font-weight: bold;
font-family: 'PT Sans Caption', sans-serif;
}
 
Check this article from W3Schools to understand the usage of CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp
 
If you are unsure which selectors to use, I would suggest opening the site using ‘Developer Tools’ and check which style classes are taking precedence for the component you want and then use a CSS selector to map it, like below style which would update the left and top navigation menu links:
Following selector would match all the CSS classes that starts with “link-“, which are the left and top navigation menu links:
[class^="link-"],
[class*=" link-"] {
font-family: 'PT Sans Narrow', sans-serif;
}
 
Step 4: Debug your code. Make sure to do hard refresh (CTRL+F5) to check your changes.
 
Step 5: Deploy your solution to tenant level or site collection level or the level you want.
 
Here is one ready made example where you can inject a custom css to you SharePoint modern page, which would be stored in your SharePoint online location.
You can use this example and define the CSS style the above mentioned way to make it work for your need. However, I haven’t tested it myself, so I wouldn’t be able to tell you if that works or not.
 
I hope it would solve your problem of branding your SharePoint modern pages with custom font and custom CSS styles.
 
Following is the screenshot from one of my test sites. I know, it looks ugly, but it proves the point, right 😉
 

How to inject custom css on SharePoint online modern pages using SharePoint Framework (spfx) extensions/ How to add custom css to SharePoint online modern pages/ How to change fonts in SharePoint online modern pages.

How to Store and Retrieve an Object from Cookie in ASP.NET C#


Hi,

The name of the article suggests a typical problem which the developers come around whenever they are designing a login Form or want to store some useful object in the Cookie.

Unfortunately, cookies are unsecured and they can store string value only. So, to come out of this problem one need to understand that all data can not be / must not be saved in the Cookie. Some basic information like Login Name, user name, email can be saved but not password. Also, the developer need to make sure that no one can read the information except the website for which it is designed.

Solution?

1. First you need to prepare the object: How? – This can be done by serializing the object as a string. XML, JSON, base-64 of arbitrary binary etc.

2. Now, once your object is prepared, you need to add some security. In other word you need to encrypt the string such a way that the content can be readable by you only.

3. Last step: very easy, store the encrypted content as a string in the Cookie.

How to retrieve?

Just do the opposite.

1. Get the content of the cookie as a string

2. Decrypt the string

3. Deserialize it

4. Use the object as you like.

Now, lets see an example code.

here is the class whose object I want to store in my Cookie:

public class clsAdmin
{
private string _name;

public string Name
{
get { return _name; }

set { _name = value; }
}

private int _id;

public int AdminId
{
get { return _id; }
set { _id = value; }
}
}

Now, to serialize the object we can use the following code:

clsAdmin admin = new clsAdmin();

admin.Name = “UBK”;

admin.AdminId = 1;

//  Serialize it

String _serAdmin = SerializeAnObject(admin);

So, you have your serialized string. Now, you need to encrypt it. For this you can refer to this article or use your own code.

String _encVal = EncDec.Encrypt(_serAdmin, “YOUR PASSWORD”);

This time your data is ready to be saved in a cookie.

try
{
HttpCookie myCookie = new HttpCookie(“admin_cookie”);
DateTime now = DateTime.Now;

// Set the cookie value.
myCookie.Value = _encVal;

// Set the cookie expiration date.
myCookie.Expires = now.AddDays(14);

// Add the cookie.
Response.Cookies.Add(myCookie);
}
catch (Exception _e)
{
//Failed to add Cookie
throw _e;
}

Once your Cookie is added, this is time to use it in our code.

try
{
HttpCookie myCookie = new HttpCookie(“admin_cookie”);
myCookie = Request.Cookies[“admin_cookie”];

// Read the cookie information and display it.
if (myCookie != null)
{
string _admStr = EncDec.Decrypt(myCookie.Value, “YOUR PASSWORD”);
clsAdmin _adm = DeSerializeAnObject(_admStr, typeof(clsAdmin)) as clsAdmin;

if (null != _adm && _adm.Login.Length > 0)
{
//DO Whatever you want with the object
}
}
else
Response.Write(“not found”);
}
catch (Exception _e)
{
//Failed to read cookie?
throw _e;
}

For XML Serializer I have used the wonderful code from http://weblogs.asp.net/stevewellens/archive/2009/07/02/serializing-and-deserializing-objects-to-and-from-xml.aspx

/// ---- SerializeAnObject -----------------------------
/// <summary>
/// Serializes an object to an XML string
/// </summary>
///AnObject">The Object to serialize
/// <returns>XML string</returns>

public static string SerializeAnObject(object AnObject)
{
    XmlSerializer Xml_Serializer = new XmlSerializer(AnObject.GetType());
    StringWriter Writer = new StringWriter();      

    Xml_Serializer.Serialize(Writer, AnObject);
    return Writer.ToString();
}
 

/// ---- DeSerializeAnObject ------------------------------
/// <summary>
/// DeSerialize an object
/// </summary>
///XmlOfAnObject">The XML string
///ObjectType">The type of object
/// A deserialized object...must be cast to correct type

public static Object DeSerializeAnObject(string XmlOfAnObject, Type ObjectType)
{       
    StringReader StrReader = new StringReader(XmlOfAnObject);
    XmlSerializer Xml_Serializer = new XmlSerializer(ObjectType);
    XmlTextReader XmlReader = new XmlTextReader(StrReader);
    try
    {
        Object AnObject = Xml_Serializer.Deserialize(XmlReader);
        return AnObject;
    }
    finally
    {
        XmlReader.Close();
        StrReader.Close();
    }
}

Hope this will help someones quest :)