Use SharePoint 2013 with Less (Dynamic Style Sheet) (on-premise)

My Experience is when I build custom solutions with SharePoint 2013 that the design manager “Out-of-the-box” made design are easy. When I build a custom web part with custom style class to fix my design issues in a custom style sheet. The behavior is that when an administrator change the design that I used within my custom css file are not changed.

I have fixed this issue with .less.

version one Theme01:

image

version two Theme02:

image

I have nothing changed in my code, only change the theme and reset the MasterPage. My custom WebPart restyled the custom style automatically.

The output result in my HTML file are:

<script>
less.modifyVars({
‘@DisabledLines’: ‘rgba(58,86,96,1)’
});
</script>

The Software Architecture

image

The library I used for this is:
jquery-1.11.0.min.js
less-1.3.3.min.js

The instructure change iis manage has .less not as default mime type. you can use this commando with PowerShell to add this on every server in the farm.

add-webconfigurationproperty //staticContent -name collection -value @{fileExtension=’.less’; mimeType=’text/css’}

—————————————————————————————————–

We started with the SPColor file. The DisabledText has an value B1B1B1. We would like to use the color in the .less file on the client library.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:colorPalette isInverted=”false” previewSlot1=”BackgroundOverlay” previewSlot2=”BodyText” previewSlot3=”AccentText” xmlns:s=”http://schemas.microsoft.com/sharepoint/”&gt;
<s:color name=”DisabledText” value=”B1B1B1″ />

——————————————————————————————————

This methode get the color from the default spcolorfile. SharePoint overwrite everytime with an apply the default spcolor file. When you use this, you get the new colors from the site theme.

public static string GetColorCodeFromSpColorFile(SPSite site, string staticColorName)
{
    SPFile file = site.RootWeb.GetFile(site.RootWeb.ThemedCssFolderUrl + “/theme.spcolor”);

var color = SPColor.Open(file);
byte r = color.Colors[staticColorName].DefaultColor.R;
byte g = color.Colors[staticColorName].DefaultColor.G;
byte b = color.Colors[staticColorName].DefaultColor.B;
byte a = color.Colors[staticColorName].DefaultColor.A;
decimal alpha = decimal.Round((decimal) a/(decimal) 255, 2);
return string.Format(“rgba({0},{1},{2},{3})”, r, g, b, alpha.ToString().Replace(“,”,”.”));

}

——————————————————————————————————–

Best Practice is here to reuse the names that are used in the color file.

DisabledLines = SPThemeControlHelper.GetColorCodeFromSpColorFile(site, ColorFileContstants.ColorConstDisabledLines);

——————————————————————————————————-

In the master file head put the this code before reference the library.

<script>
less = {
async: false,
fileAsync: false,
dumpLineNumbers: “comments”,
relativeUrls: false
};
</script>

<script type=”text/javascript” src=”/_layouts/15/ProjectName/less-1.3.3.min.js”></script> ( we use an old library compatibility )

——————————————————————————————————–

Control to load in masterpage

<script>
less.modifyVars({
‘@DisabledLines’: ‘<%= DisabledLines %>’
});
</script>

.less file
/* Footer */
#footer {
background-color: @DisabledLines;
position:relative;
clear:both;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.