Como a: personalizar estilos
Em muitos casos, um designer deseja preservar o aspecto e sensação de uma página da Web aplicando determinado personalizado estilos para de conteúdo a página. Isso torna possível a alterando a definição de estilo planilhas para alteração de aspecto e sensação da página agora sem afetar o página de conteúdo In the future. O Microsoft Office do SharePoint Server 2007 editor de HTML oferece suporte a capacidade para o autor página para personalizado aplicar estilos para o de conteúdo, usando uma lista predefinida de estilos que fornece o designer.
Por padrão, o editor de HTML apresenta o conjunto usar como padrão de estilos, mas um designer layout página pode substituir o usar como padrão definir Adicionando referências ao estilo folhas no layout de página. Se o editor de HTML detectar novas classes Cascading Style Sheet (CSS) cujos nomes têm o prefixo ms-rteCustom-XXXX
, onde XXXX
é o nome do exclusivo de classes para os autores página exibir, ele exibe o novo conjunto de personalizado estilos em vez do conjunto de usar como padrão.
O editor de HTML detecta classes específicas para determinadas marcas e exibe-los para o usuário somente se de conteúdo especificado está selecionado. O drop-down menu sempre exibe estilos que não estão definidos para uma marca específica. De exemplo, um designer layout página pode desejar fazer o seguinte personalizado disponível estilo para o autor página usando um arquivo folhas de estilo em cascata incluído no layout de página. Enquanto o autor página estiver edição uma página criada a partir de layout, ele ou ela pode usar o botão Selecionar na barra de ferramentas a HTML Editor para realce uma lista na página, clique o botão Estilo **** e escolher o estilo lista mostrado aqui e aplicá-lo para a lista selecionada.
Ol.ms-rteCustom-RomanNumberList {
font-family:Times New Roman; font-size:10pt; color:#000000;
text-indent:0; text-align:left; list- style-type:upper-roman;
margin-left:30; margin-right:10; padding-left:10px; margin-top:1;
text-transform:capitalize
Você pode especificar um exclusivo prefixo do nome classe folhas de estilo em cascata para cada editoração controle campo HTML para que você pode apresentar personalizado diferente estilos para diferentes seções da página.
No layout de página onde o RichHTMLField Control for especificado, você pode substituir o PrefixStyleSheet T:Microsoft.SharePoint.Publishing.WebControls.HtmlEditor.PrefixStyleSheet propriedade. De exemplo, se você especificar:
<PublishingWebControls:RichHtmlField id="Content" Fieldname="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>
O editor de HTML procura por classes folhas de estilo em cascata com o prefixo PageContentStyleCustom
PageContentStyleCustom no associado sintaxe folhas de estilo em cascata. Se encontrar personalizado estilos que contêm esse prefixo, ele exibe os estilos na drop-down list estilos de acordo com o atual seleção.
Personalizar estilos de Links de resumo, do conteúdo e de conteúdo por Web Parts de consulta
O controle campo Summary Link e consulta Web Part de Conteúdo apresente links criados na sua página. Você pode de base esses links em um conjunto de estilos disponível para o site.
O sumário e modos de exibição orientado a dados exibir Content Query Web Parts de navegação e consultas de conteúdo site, respectivamente. Você pode também estilo os itens e cabeçalhos GRUPO nesses Web Parts para que eles usam um conjunto de disponível estilos para processar.
Microsoft Office do SharePoint Server 2007 usa folhas estilo XSL para apresentar essas Web Parts. Você pode personalizar e estender estilos para coincidir com a cor e identificação de marca do seu site.
A seguinte tabela mostra o mapeamento dos arquivos folha estilo XSL e o correspondente Web Parts.
Folha de estilos XSL | Finalidade | Correspondente da Web Part |
---|---|---|
ContentQueryMain.xsl |
"Aplicativo" folha estilo XSL |
Consultas de conteúdo |
Header.xsl |
Cabeçalhos de grupo para consultas de conteúdo e Summary Links, cabeçalhos de título para Table of Contents |
Índice analítico consulta, Links de resumo, conteúdo |
ItemStyle.xsl |
Consultas de conteúdo e vincular resumo estilos item |
Consulta de conteúdo, Links de resumo |
LevelStyle.xsl |
Índice analítico nível estilos, que inclui o site e suas páginas |
Índice analítico |
SummaryLinkMain.xsl |
"Aplicativo" XSL para Links de resumo |
Links de resumo |
TableOfContentsMain.xsl |
"Aplicativo" XSL para índice analítico |
Índice analítico |
Procedimentos
Para localizar e modificar estilos vínculo de resumo
Navegue para o home page do seu site e clique View All Site Content .
Clique em Biblioteca Tipo .
Clique em folhas estilos XSL . A lista de XSL arquivos disponível no Style Library para todos os três tipos Web Part aparece.
Para ver um exemplo, aberto, que controla a exibir itens Summary Link e Content Query Web Part, ItemStyle.xsl para modificá-lo. Em seguida, considere a possibilidade de estrutura e conteúdo do arquivo.
O modelo XSL é simplesmente HTML com variáveis a few ( @ImageURL, @LinkURL, @Description e assim por diante).
Você pode ocultar os dados Summary Link, adicionando ou removendo essas variáveis ou apresentação.
Você também pode escolher a alteração como a HTML ao redor torna essas variáveis aparecem.
Cada modelo XSL mapeia para um estilo que um autor pode escolher.
A primeira seção do amostra de código inclui modelos XSL que O Office SharePoint Server 2007 chama, dados passa, e obtém modificado versões dos dados do.
A seção inclui o HTML processado com o resultado das funções.
<xsl:template name="Default" match="*" mode="itemstyle"> // This section includes a set of functions, or xsl templates, which MOSS 2007 calls, passes data into, and gets modified versions of the data from. The product does this primarily to improve security. <xsl:variable name="SafeLinkUrl"> <xsl:call-template name="OuterTemplate.GetSafeLink"> <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="SafeImageUrl"> <xsl:call-template name="OuterTemplate.GetSafeStaticUrl"> <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="DisplayTitle"> <xsl:call-template name="OuterTemplate.GetTitle"> <xsl:with-param name="Title" select="@Title"/> <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="LinkTarget"> <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if> </xsl:variable> // Includes the rendered HTML with the results of the functions. <div id="linkitem" class="item"> <xsl:if test="string-length($SafeImageUrl) != 0"> <div class="image-area-left"> <a href="{$SafeLinkUrl}" target="{$LinkTarget}"> <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" /> </a> </div> </xsl:if> <div class="link-item"> <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/> <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}"> <xsl:value-of select="$DisplayTitle"/> </a> <div class="description"> <xsl:value-of select="@Description" /> </div> </div> </div> </xsl:template>
Para criar um novo estilo
Repita as etapas de 1 a 4 no procedimento anterior para navegar para o arquivo ItemStyle.xsl.
Abra o arquivo ItemStyle.xsl e adicionar o seguinte codificar.
<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle"> </xsl:template>
Adicionar nome de modelo, variáveis, parâmetro informações e outros detalhes entre o aberto e fechar marcas no arquivo de ItemStyle.xsl quando necessário.
Adicionar HTML e o apropriado instruções XSL para exibir as variáveis de forma apropriada na Web Part.