Modernizar a identidade visual do site

Artigo
04/08/2023

Importante

As ferramentas de modernização e todos os outros componentes PnP são ferramentas de código aberto, sustentadas por uma comunidade ativa que fornece suporte a eles. Não há SLA para suporte de ferramentas de código aberto a partir dos canais oficiais de suporte da Microsoft.

A interface do usuário do SharePoint moderno manipula a marca de maneira diferente do SharePoint clássico, especialmente porque ela simplesmente ignora as páginas mestras personalizadas ou as configurações alternativas de CSS (que são incompatíveis na interface do usuário moderna). É possível optar por manter essas configurações em vigor no seu site modernizado, de modo que ainda se aplique a uma página exibida em uma interface de usuário clássica, mas fica mais limpo retornar as páginas mestras OOB e remover a configuração alternativa de CSS.

Além dessas páginas mestras e das configurações alternativas de CSS, seria possível usar um tema clássico personalizado. Esses temas clássicos personalizados funcionam em páginas clássicas e modernas, mas o modelo preparado para o futuro é o novo tema do SharePoint controlado por locatário que, obviamente, se aplica às páginas clássicas e modernas.

Detectar sites que usam CSS alternativo ou páginas mestras

A abordagem recomendada para descobrir quais sites usam uma página mestra personalizada ou a opção de CSS alternativa é executar o Verificador de modernização do SharePoint. Esta ferramenta realiza uma análise profunda de todos os sites no locatário e cria relatórios que fornecem os detalhes sobre sites que ainda têm páginas mestras ou configurações de CSS alternativas incompatíveis. Com base na saída do verificador, é possível corrigir esses sites.

Reverter para a configuração padrão

A seguir está um script do PowerShell PnP que mostra como reverter para a configuração padrão:

$minimumVersion = New-Object System.Version("2.24.1803.0")
if (-not (Get-InstalledModule -Name SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -ErrorAction Ignore))
{
    Install-Module SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -Scope CurrentUser
}
Import-Module SharePointPnPPowerShellOnline -DisableNameChecking -MinimumVersion $minimumVersion

Connect-PnPOnline -Url "<your site url>"

# Set out-of-the-box master page
Set-PnPMasterPage -MasterPageSiteRelativeUrl _catalogs/masterpage/seattle.master -CustomMasterPageSiteRelativeUrl _catalogs/masterpage/seattle.master

# Remove the alternate CSS setting
$web = Get-PnPWeb -Includes AlternateCssUrl
$web.AlternateCssUrl = ""
$web.Context.ExecuteQuery()

Observação

O PnP PowerShell é uma solução de software livre com uma comunidade ativa de suporte. Não há nenhuma SLA para o suporte da ferramenta de software livre por parte da Microsoft.

Usar um tema do SharePoint controlado pelo locatário

O SharePoint oferece uma série de temas padrão prontos que podem ser usados, mas se você quiser enviar a marca da empresa, recomendamos criar o tema da empresa e ocultar os temas prontos. Depois que essa configuração é concluída, os usuários podem selecionar os temas do SharePoint da empresa que você configurou e podem definir programaticamente um tema como parte do trabalho de modernização.

Adicionar um tema do SharePoint da empresa

A seguir há um exemplo de script do PowerShell PnP mostrando como adicionar um tema do SharePoint da empresa:

$minimumVersion = New-Object System.Version("2.24.1803.0")
if (-not (Get-InstalledModule -Name SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -ErrorAction Ignore))
{
    Install-Module SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -Scope CurrentUser
}
Import-Module SharePointPnPPowerShellOnline -DisableNameChecking -MinimumVersion $minimumVersion

Connect-PnPOnline -Url "<your tenant admin url>"

# Define your company theme colors
$themepalette = @{
      "themePrimary" = "#00ffff";
      "themeLighterAlt" = "#f3fcfc";
      "themeLighter" = "#daffff";
      "themeLight" = "#affefe";
      "themeTertiary" = "#76ffff";
      "themeSecondary" = "#39ffff";
      "themeDarkAlt" = "#00c4c4";
      "themeDark" = "#009090";
      "themeDarker" = "#005252";
      "neutralLighterAlt" = "#f8f8f8";
      "neutralLighter" = "#f4f4f4";
      "neutralLight" = "#eaeaea";
      "neutralQuaternaryAlt" = "#dadada";
      "neutralQuaternary" = "#d0d0d0";
      "neutralTertiaryAlt" = "#c8c8c8";
      "neutralTertiary" = "#a6a6a6";
      "neutralSecondaryAlt" = "#767676";
      "neutralSecondary" = "#666666";
      "neutralPrimary" = "#333";
      "neutralPrimaryAlt" = "#3c3c3c";
      "neutralDark" = "#212121";
      "black" = "#000000";
      "white" = "#fff";
      "primaryBackground" = "#fff";
      "primaryText" = "#333"
     }

# Add the company theme
Add-PnPTenantTheme -Identity "CustomCompanyTheme" -Palette $themepalette -IsInverted:$false

Usar seu tema do SharePoint da empresa

Para usar seu tema do SharePoint da empresa use o script a seguir:

$minimumVersion = New-Object System.Version("2.24.1803.0")
if (-not (Get-InstalledModule -Name SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -ErrorAction Ignore))
{
    Install-Module SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -Scope CurrentUser
}
Import-Module SharePointPnPPowerShellOnline -DisableNameChecking -MinimumVersion $minimumVersion

Connect-PnPOnline -Url "<your site url>"

# Set the company theme
Set-PnPWebTheme -Theme "CustomCompanyTheme"