Búsqueda de sitios web

SharePoint Online: ¿Cómo inyectar CSS usando una acción personalizada en PowerShell?

Requisito: Agregar CSS personalizado a SharePoint Online sin editar la página maestra.

PowerShell para agregar CSS a SharePoint Online:

Agregar CSS personalizado a su sitio de SharePoint Online puede ayudarlo a personalizar la apariencia o aplicar la marca a su sitio y hacerlo más atractivo visualmente. Puede usar PowerShell para agregar CSS a su sitio de SharePoint Online rápidamente sin tener que preocuparse con el código de la página maestra. Esta publicación de blog le mostrará cómo usar PowerShell para agregar CSS a SharePoint Online.

Suponiendo que tiene el archivo "Custom.CSS" subido a la biblioteca "Activos del sitio", aquí está el PowerShell para insertar CSS en el sitio de SharePoint Online.

¡Este método sólo funciona en la experiencia clásica! Para sitios modernos, utilice: ¿Cómo inyectar CSS personalizado en sitios modernos?

#Load SharePoint CSOM Assemblies
Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\ISAPI\Microsoft.SharePoint.Client.dll"
Add-Type -Path "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\16\ISAPI\Microsoft.SharePoint.Client.Runtime.dll"
  
#Set parameter values
$SiteURL="https://Crescent.sharepoint.com/"
$CustomActionTitle = "Custom Branding CSS"
 
Try{
    #Get Credentials to connect
    $Cred= Get-Credential
    $Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Cred.Username, $Cred.Password)
  
    #Setup the context
    $Ctx = New-Object Microsoft.SharePoint.Client.ClientContext($SiteURL)
    $Ctx.Credentials = $Credentials

    #Get Existing Custom Actions
    $Site = $Ctx.Site
    $UserCustomActions= $Site.UserCustomActions
    $Ctx.Load($UserCustomActions)
    $Ctx.ExecuteQuery()

    #Check if the CustomAction Exists already
    $CustomAction = $UserCustomActions | Where { $_.Title -eq $CustomActionTitle }

    If($CustomAction -eq $Null)
    {
        #Add new custom action
        $UserCustomAction = $Ctx.Site.UserCustomActions.Add()

        #Insert CSS link in Head: <link rel="stylesheet" href="https://Crescent.sharepoint.com/SiteAssets/Custom.css" type="text/css">
        $Url = "https://Crescent.sharepoint.com/SiteAssets/Custom.css"
        $ScriptBlock = "var head = document.querySelector('head');
                        var styleTag = document.createElement('style'); 
                        var linkTag = document.createElement('link');
                        linkTag.rel = 'stylesheet'; 
                        linkTag.href = '$($Url)'; 
                        linkTag.type = 'text/css'; 
                        head.appendChild(styleTag);
                        head.appendChild(linkTag);"

        #Set the Properties of the custom action
        $UserCustomAction.Name = $CustomActionTitle
        $UserCustomAction.CommandUIExtension
        $UserCustomAction.Title = $CustomActionTitle
        $UserCustomAction.Location = "ScriptLink"
        $UserCustomAction.Sequence = 1000
        $UserCustomAction.ScriptBlock  = $ScriptBlock
        $UserCustomAction.Update()
        $Ctx.ExecuteQuery()

        Write-Host -f Green "Custom Action Added Successfully!"
    }
    Else
    {
         write-host -f Yellow "Custom Custom Already Exists!"
    }
}
Catch {
        write-host -f Red "Error Adding Custom Action!" $_.Exception.Message
}

¡Este script de PowerShell crea una acción personalizada que inyecta la etiqueta CSS dentro de la etiqueta HEAD! Para verificar, vaya a la pestaña de la consola de las herramientas Firebug o IE Dev, presione "head" y el marcado HTML debe incluir "

Artículos relacionados