Conteúdo da biblioteca de estilos no SharePoint 2010

Controles CSS da Web no SharePoint

Os controles do servidor Web são responsáveis ​​por gerenciar e renderizar links de arquivos CSS e folhas de estilo. Por padrão, os controles do servidor Web estão localizados nas páginas mestras do SharePoint. Para encontrar páginas mestras, procure na Galeria de páginas mestras e layouts de página ou, no SharePoint Foundation, na galeria de páginas mestras. O caminho relativo para a galeria é /_catalogs/masterpage/Forms/AllItems.aspx.

Localizando a página mestra

Para examinar os controles do servidor Web CSS no SharePoint, você deve obter uma cópia da página mestra usada no site. Mas para baixar uma cópia da página mestra do seu site, você precisa saber qual página mestra o seu site usa.

Use um ou mais dos seguintes itens para determinar qual página mestra seu site usa:

• Em um site do SharePoint Server 2010 em que os recursos de publicação estão habilitados e ativados, acesse a página Configurações da página mestra do site por meio de Ações do site,  .Página mestra , clique no link Aparência. Em seguida, na seção Configurações, Site

• Em vez de usar o menu para localizar a página Configurações da página mestra do site, anexe o seguinte snippet de URL ao final do endereço do servidor do seu site: /_layouts/ChangeSiteMasterPage.aspx; por exemplo, https://contoso.com/\_ layouts/ChangeSiteMasterPage.aspx

• Em um site do SharePoint Foundation, você pode usar o Windows PowerShell para determinar qual página mestra o site usa, conforme mostrado na Figura 4. Veja a seguir um exemplo de script.

  PowerShell

  $web = get-spweb("https://contoso.com");$web.masterurl

Figura 4. v4.master em um site de equipe do SharePoint

A Tabela 4 lista todos os controles de servidor Web relacionados ao CSS e disponíveis no SharePoint Server. Você pode encontrar esses controles no namespace Microsoft.SharePoint.WebControls, que faz parte do assembly Microsoft.SharePoint.dll.

Tabela 4. Controles de servidor Web CSS no SharePoint 2010

Expandir tabela

As seções a seguir descrevem cada controle listado na Tabela 4 e resumem os benefícios de cada um.

CSSLink

O controle web CSSLink está nas páginas mestras do SharePoint e é responsável por renderizar o HTML <LINK> elemento. O controle CSSLink funciona com os controles CSSRegistration. Se houver controles CSSRegistration na página, o controle CSSLink registrará e renderizará as referências de arquivo CSS adicionais feitas pelo controle de registro.

O controle CSSLink possui os seguintes membros:

• UIVersion (opcional) — permite que os proprietários de sites alterem a aparência de um site do SharePoint atualizado ou migrado. Permite a visualização do site na interface de usuário do SharePoint ou na interface de usuário do Microsoft Office SharePoint Server (MOSS) 2007. Defina o valor como 4 para o SharePoint e como 3 para sites do MOSS 2007.

• Versão (opcional) — Substitui a versão de controle da classe SPControl.

• Alternativo (opcional) — Sinaliza se o CSS principal (Core.css ou Corev4.css) é renderizado com outras referências de arquivo CSS ou se um CSS alternativo é renderizado. O valor padrão é False, que especifica que o arquivo css principal (core.css ou corev4.css) é renderizado.

• DefaultUrl (opcional) — Define ou obtém o URL padrão usado para o arquivo CSS.

  O exemplo a seguir mostra como esse controle pode ser renderizado.

  HTML

  <link rel="folha de estilo" type="texto/css" href="/_layouts/1033/styles/Themable/search.css?rev=Uoc0fsLIo87aYwT%2FGX5UPw%3D%3D"/> <link rel="folha de estilo" type="texto/css" href="/_layouts/1033/styles/Themable/wiki.css?rev=9pXM9jgtUVYAHk21JOAbIw%3D%3D"/> <link rel="folha de estilo" type="texto/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>

O controle CSSLink adiciona um parâmetro de string de consulta ?rev= à referência do arquivo para controlar o cache do navegador e forçar o navegador a obter uma nova cópia do arquivo.

O controle CSSLink também é responsável pelos comportamentos descritos na seção a seguir.

Registro CSS

O controle da web CSSRegistration é usado com o controle CSSLink para registrar arquivos CSS para que possam ser renderizados na página. Registre arquivos CSS por URL relativo ou estático.

O controle CSSRegistration possui os seguintes membros:

• Nome (obrigatório) — O nome do arquivo a ser registrado. Se o nome não for fornecido, o SharePoint gera o erro mostrado na Figura 5. O valor da propriedade Name deve ser um nome de arquivo ou URL. Se um nome de arquivo for usado, o arquivo CSS deverá existir na pasta LAYOUTS Style.

  O exemplo a seguir mostra como usar o arquivo custom.css mencionado acima e que foi implantado na pasta Styles (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\{Locale- ID}\ESTILOS).

  XAML

  <SharePoint:CssRegistration runat="servidor" Nome="custom.css" />

  O exemplo a seguir mostra como o controle CSSLink renderiza o registro custom.css.

  HTML

  <link rel="folha de estilo" type="texto/css" href="/_layouts/1033/styles/custom.css?rev=pFayZ3XaoWhaMymtxOLHNA%3D%3D"/>

  Além de fazer referência a um arquivo localizado no diretório LAYOUTS\{Locale ID}\Styles, você pode registrar um arquivo usando uma URL. Especifique uma única URL na propriedade Name usando tokens. Alguns tokens de URL conhecidos são: ~site, ~sitecollection e ~language. Use esses tokens junto com um construtor de expressão, como SPUrl. O token ~idioma é mapeado para uma string de cultura de idioma, como en-us.

  Adicionando uma entrada semelhante ao exemplo a seguir…

  XAML

  <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~idioma/Custom/2ndcustom.css %>" runat="servidor" />

  …gera o seguinte HTML, conforme mostrado na Figura 5.

  HTML

  <link rel="folha de estilo" type="texto/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>

Figura 5. Erro de página do SharePoint

• Depois (opcional) — Especifica a ordem de renderização do arquivo CSS que você está registrando. Por exemplo, se você quiser renderizar uma folha de estilo personalizada chamada custom.css após core4.css, use o código a seguir para configurar o controle de registro.

  XAML

  <SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/~idioma/Custom/2ndcustom.css %>" runat="servidor" Depois="core4.css" />

  Isso força o controle da web CSSLink a renderizar seu arquivo personalizado após o link do arquivo core4.css.

  HTML

  <link rel="folha de estilo" type="texto/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/> <link rel="folha de estilo" type="texto/css" href="/Style%20Library/en-US/Custom/2ndcustom.css"/>

   Observação

  Você pode usar o construtor de expressões SPUrl somente em sites do SharePoint Server; ele não está disponível no SharePoint Foundation.

• EnableCSSTheming: sinaliza se você deseja que suas folhas de estilo sejam adaptáveis, o que significa que elas podem ser aplicadas como parte de temas personalizados do SharePoint.

  • Defina a propriedade EnableCSSTheming do controle CSSRegistration como true.

  • Adicione comentários temáticos às suas classes de estilo CSS. Para ver alguns exemplos, examine o diretório Themable instalado com o SharePoint (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14 \TEMPLATE\LAYOUTS\{Locale-ID}\STYLES\Themable).

    O exemplo a seguir mostra a classe CSS ms-toolbar no Themable Corev4.css. Se você aplicar um tema, toda vez que a classe ms-toolbar for usada, o tema substituirá a cor #0072BC pela cor do tema Hyperlink que está definida no próprio tema.

    .ms-toolbar{família de fontes:verdana; tamanho da fonte: 8pt; decoração de texto: nenhum; /* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC; }

• ConditionalExpression — Usado para especificar se esta folha de estilo deve ser aplicada a uma versão específica do navegador. Por exemplo, um valor IE 9.0 especifica que o registro é aplicado ao Internet Explorer versão 9.0. O controle CSSLink detecta o valor.

Tema

O controle de servidor Web Tema aplica um tema a um site do SharePoint. Existem diversas ferramentas disponíveis que você pode usar para criar temas; por exemplo Theme Builder no Microsoft Connect. Depois de criar um tema (arquivos .thmx), faça upload dele para a galeria Temas , localizada na página Configurações (/_catalogs/theme/ Formulários/AllItems.aspx). Para aplicar um tema, acesse a página Tema do Site (/_layouts/themeweb.aspx).

O seguinte é um exemplo.

HTML

<link rel="folha de estilo" type="texto/css" href="/_catalogs/theme/Themed/54E2D43/search-7E1AFF02.css?ctag=1"/> <link rel="folha de estilo" type="texto/css" href="/_catalogs/theme/Themed/54E2D43/wiki-ECF524AA.css?ctag=1"/> <link rel="folha de estilo" type="texto/css" href="/_catalogs/theme/Themed/54E2D43/corev4-8A0ABD2F.css?ctag=1"/>

Quando você aplica um tema, o SharePoint cria uma nova pasta de tema que inclui todos os arquivos CSS e de imagem necessários para renderizar o tema. A nova pasta de tema não aparece em Configurações do site ou em Ver todo o conteúdo. Ao usar o SharePoint Designer, você pode visualizar arquivos de tema, conforme mostrado na Figura 6.

Figura 6. Temas do SharePoint