Problemas de identidade visual que podem ocorrer durante a atualização para o SharePoint 2013

Artigo
03/08/2023

APLICA-SE A: yes-img-13 2013 no-img-16 2016 no-img-19 2019 no-img-se Subscription Edition no-img-sop SharePoint no Microsoft 365

O SharePoint 2013 introduz uma nova interface de usuário leve, rápida e fluida. Essa interface do usuário foi criada usando novos estilos CSS, temas e páginas mestras. Para aproveitar essa nova experiência, você deve atualizar para a nova interface do usuário. Mas as alterações significativas que foram feitas para dar suporte à nova interface do usuário podem prejudicar a atualização para alguns cenários onde você usa identidade visual personalizada.

No Produtos do SharePoint 2010, você pode usar a identidade visual da sua marca no site de várias maneiras diferentes:

Aplicando uma folha de estilos personalizada ao seu site que substitui os estilos padrão do SharePoint.
Aplicando um tema personalizado (arquivo THMX) ao seu site.
Copiando e alterando uma página mestra que está incluída com o SharePoint 2013.
Criando uma página mestra personalizada completamente nova em um site de publicação, onde a página mestra personalizada usa estilos personalizados e é referenciada por layouts de página personalizados.

Quando você atualiza seu conjunto de sites para o SharePoint 2013, esses tipos de personalizações não funcionam porque os estilos de CSS padrão, temas e páginas mestras foram alterados. Em vez disso, você deve criar sua identidade visual personalizada novamente. Isso requer que você use os novos estilos, temas ou páginas mestras disponíveis no SharePoint 2013 e aplique o design recém-criado novamente no conjunto de sites atualizado.

As alterações aos estilos padrão do SharePoint, temas e páginas mestras foram necessárias para criar uma interface do usuário mais rápida e fluida e para tornar mais previsíveis as atualizações seguintes.

Por esse motivo, se o seu conjunto de sites tem identidade visual personalizada, recomendamos que, antes de atualizar, você primeiro crie um conjunto de sites de avaliação onde possa testar e recriar sua identidade visual personalizada em um ambiente do SharePoint 2013. Para obter mais informações sobre uma coleção de sites de avaliação, consulte Atualizar uma coleção de sites.

As seções a seguir mostram problemas de identidade visual que podem ocorrer quando você atualiza para o SharePoint 2013.

CSS personalizada

A maneira mais comum de aplicar a identidade visual personalizada a um site do Produtos do SharePoint 2010 é criar um arquivo CSS com estilos que substituam os estilos padrão do SharePoint.

Para tornar a nova interface do usuário mais rápida e fluida, o SharePoint 2013 introduziu alterações fundamentais na forma como o CSS é implementado:

Os tamanhos do arquivo CSS estão reduzidos.
O aninhamento de seletores de CSS está limitado.
A herança de CSS é usada sempre que possível.
As classes são definidas em apenas um local.
As classes relacionadas são agrupadas no arquivo CSS.
Os estilos inline e a declaração !importante não são utilizados porque não podem ser substituídos.
Os estilos usam uma estrutura consistente e uma convenção de nomenclatura.

No SharePoint 2013, os estilos usam uma estrutura consistente e uma convenção de nomenclatura.

PARTE DE NOMENCLATURA	MS-	<FUNCIONALIDADE>-	<NOME>
Explicação	Indica que esta é uma classe da Microsoft.	O nome do recurso ao qual este item está associado ou "núcleo" se ele for usado como parte da interface do usuário principal.	Um nome descritivo do item, como título, link e assim por diante

Devido a essas alterações em como o SharePoint 2013 implementa o CSS, quando você atualiza, os estilos CSS personalizados não são aplicados ao seu site. Para resolver isso, você deve primeiro criar um conjunto de sites de avaliação e usar esse site como o ambiente onde você possa identificar os novos estilos do SharePoint 2013 que precisa substituir. Crie um arquivo CSS para esses estilos e aplique o CSS ao site atualizado.

Tema personalizado

No Produtos do SharePoint 2010, você pode usar um programa do Office como o PowerPoint 2010 para criar um arquivo THMX. Em seguida, você pode carregar esse arquivo de tema para o Produtos do SharePoint 2010 e aplicar o tema ao seu site.

No SharePoint 2013, o mecanismo de temas foi aprimorado para os temas ficarem mais rápidos e flexíveis, permitindo que sejam atualizados com mais facilidade no futuro. O modelo de temas usa marcação em estilo de comentário no CSS e substitui partes do CSS com base em parâmetros como fontes e esquemas de cores que os usuários selecionam. Os temas no SharePoint 2013 são definidos por arquivos XML:

SPColor.xml define a paleta de cores, na qual os slots agora têm nomes semânticos para que fique mais claro quais elementos da interface do usuário são afetados quando você altera um valor de cor. Além disso, os temas agora dão suporte à definição de opacidade.
O SPFont.xml define o esquema de fontes e dá suporte a vários idiomas, fontes seguras da Web e fontes da Web.

Mas não há suporte para atualizar um arquivo THMX do Produtos do SharePoint 2010 para o SharePoint 2013. Se você aplicou um tema personalizado ao site do Produtos do SharePoint 2010, quando atualizar para o SharePoint 2013, os arquivos do tema permanecerão no lugar. Mas o tema não será mais aplicado ao site, e o site será revertido para o tema padrão.

Para resolver isso, você deve primeiro criar um conjunto de sites de avaliação e usar os novos recursos de temas no SharePoint 2013 para criar o tema novamente. Veja mais informações sobre os novos temas nos seguintes artigos no MSDN:

Importante

[!IMPORTANTE] Prosseguindo, se você quer usar identidade visual personalizada e se quer que essa identidade visual funcione após atualizações futuras, recomendamos que você use temas para implementar seu design. Os temas terão suporte de atualização quando futuras atualizações estiverem disponíveis. Se os temas não funcionam no seu cenário ou se você tem uma identidade visual mais extensa, recomendamos usar um site de publicação junto com o Gerenciador de Design. Mas entenda que, se você investir na criação de páginas mestras personalizadas e layouts de página, talvez precisará retrabalhar ou atualizar seus arquivos de design durante e após cada atualização do SharePoint.

Copiar e alterar uma página mestra que acompanha o SharePoint 2013

No Produtos do SharePoint 2010, uma maneira comum de fazer personalizações menores na interface do usuário é copiar e alterar uma página mestra que acompanha o Produtos do SharePoint 2010. Por exemplo, você pode alterar a página mestra para remover ou ocultar recursos de usuários.

Quando você atualiza um site do Produtos do SharePoint 2010 para o SharePoint 2013, a página mestra é redefinida para usar a página mestra padrão no SharePoint 2013. Portanto, após a atualização, seu site exibe sua identidade visual personalizada. A página mestra personalizada que foi criada no Produtos do SharePoint 2010 ainda reside no site, mas você não deve aplicar a página mestra antiga ao novo site porque o novo site não será exibido como esperado.

Para dar suporte à nova interface do usuário no SharePoint 2013, foram feitas alterações às páginas mestras padrão. Por esse motivo, você não pode aplicar uma página mestra que foi criada no Produtos do SharePoint 2010 para um site no SharePoint 2013.

Para resolver esse problema, você deve criar um conjunto de sites de avaliação e criar a página mestra novamente no site do SharePoint 2013. Depois de verificar se a nova página mestra funciona conforme o esperado, mova a página mestra para o novo conjunto de sites e aplique-o ao site. Se os sites são de publicação, você pode usar o Gerenciador de Design para exportar e importar a página mestra como parte de um pacote de design. Caso contrário, pode mover a página mestra como parte de uma solução em área restrita ou carregando o arquivo para a Galeria de Páginas Mestras.

Importante

[!IMPORTANTE] O SharePoint Foundation 2013 não é compatível com sites de publicação. Você precisa do SharePoint 2013 para usar sites de publicação.

Página mestra personalizada em um site de publicação

Se você quiser um site totalmente com marca como um site de intranet de comunicações corporativas, use um site de publicação que tem uma página mestra totalmente personalizada e layouts de página personalizados anexados à página mestra personalizada.

Quando você atualiza um site do Produtos do SharePoint 2010 para o SharePoint 2013, a página mestra é redefinida para usar a página mestra padrão no SharePoint 2013. Portanto, após a atualização, seu site não exibe sua identidade visual personalizada. A página mestra personalizada e o layout de página criados no Produtos do SharePoint 2010 ainda residem no site, mas você não deve aplicar a página mestra antiga ao novo site porque o novo site não será exibido como esperado.

Para resolver esse problema, você deve criar um conjunto de sites de avaliação que é um site de publicação e criar a página mestra novamente no site do SharePoint 2013. Depois de verificar se a nova página mestra funciona conforme o esperado, conclua as etapas a seguir:

Exporte a página mestra como parte de um pacote de design.
Importe o pacote de design para o novo conjunto de sites.
Aplique a nova página mestra ao site.

Espaços reservados de conteúdo personalizados em uma página mestra personalizada

Importante

[!IMPORTANTE] Se a sua página mestra personalizada contém um espaço reservado para conteúdo personalizado e layouts de página personalizados também contêm esse espaço reservado personalizado, um erro pode impedir que a home page do seu site seja renderizada após a atualização. Em vez de renderizar após a atualização, você pode ver a mensagem de erro "Erro inesperado".

Para determinar se você tem esse problema, crie um conjunto de sites de avaliação que também seja um site de publicação e defina a página mestra para a página mestra que acompanha o SharePoint 2013. Se o site ainda é exibido, isso significa que você não tem esse problema. Se o site não for exibido e você receber um "erro inesperado" com uma ID de correlação, isso significará que você provavelmente tem esse problema.

Para resolver esse problema, proceda da seguinte forma:

Crie um conjunto de sites de avaliação que seja um conjunto de sites de publicação.
Crie uma página mestra do SharePoint 2013.
Adicione o espaço reservado para conteúdo personalizado à página mestra do 2013.
Aplique a nova página mestra ao site.
Crie um layout de página que não contenha o espaço reservado para conteúdo personalizado.

O layout de página será associado com a nova página mestra que foi aplicada ao site.
Altere todas as páginas que usam o layout de página antigo para usar o novo layout de página.

Você pode editar manualmente cada página individualmente no navegador e usar a opção na faixa de opções ou pode usar o modelo de objeto do lado do cliente para o SharePoint para atualizar as páginas por programação.
Exclua o layout de página antigo que contém o espaço reservado para conteúdo personalizado.