Marca trechos usando CSS no SharePoint

Para um trecho de estilo, você deve substituir os estilos padrão com o CSS personalizado. Você pode usar as IDs de CSS e seletores de elemento substituir todos os estilos padrão aplicados aos elementos ou você pode usar um editor de HTML ou uma ferramenta como as ferramentas de desenvolvedor F12 no Internet Explorer para identificar e substituir estilos padrão específico.

Introdução aos trechos de estilo com CSS

Após converter uma página mestra do HTML ou criar um layout de página HTML, você pode visualizar nessa página na visualização do lado do servidor do Gerenciador de Design. Na página preview, você pode navegar na Galeria de trechos e copie trechos ao seu arquivo HTML. Um trecho é uma representação de HTML de um controle do SharePoint como um controle de navegação superior ou uma caixa de pesquisa.

Depois de copiar um trecho de código para o arquivo HTML em sua unidade mapeada e salve as alterações, é possível atualizar a visualização do servidor do arquivo HTML para ver como o controle é processado. Trechos de código contêm a marcação que fornece uma visualização de tempo de design no seu editor de HTML de escolha, mas você não deve editar essa marcação porque ele é somente leitura e não afeta como o controle é processado no servidor. Por outro lado, a visualização do servidor mostra uma visualização de fidelidade total com dados ao vivo, se disponível — por exemplo, um controle de navegação mostrará a estrutura de navegação atual do site com dados ao vivo de sua fonte de dados, como um repositório de termos do SharePoint para a navegação gerenciada.

Por padrão, os trechos herdam os estilos das folhas de estilo do SharePoint, como corev15.css. Para um trecho de estilo, você deve substituir essas estilos padrão com o seu CSS personalizado. Para fazer isso, você pode:

• Use seletores de elemento e IDs de CSS para substituir completamente os estilos padrão aplicados aos elementos escolhidos.

• Use uma ferramenta baseada em navegador, como as ferramentas de desenvolvedor F12 no Internet Explorer para inspecionar os estilos padrão na visualização ao lado do servidor no Gerenciador de Design e, em seguida, identifique estilos específicos para substituir.

• Usar os recursos do seu editor de HTML para inspecionar os estilos padrão na visualização somente leitura de um trecho de código e, em seguida, identifique estilos específicos para substituir.

Para identificar os estilos padrão, usando as ferramentas do desenvolvedor no Internet Explorer, você deve usar a visualização do servidor no Gerenciador de Design para exibir sua página mestra do HTML ou layout de página, pressione F12 para iniciar as ferramentas do desenvolvedor, escolha o menu Localizar e escolha elemento Select por clique. Isso permite que você clique em elementos da página e veja exatamente quais estilos para substituir adicionando CSS à folha de estilo personalizadas que seu HTML mestre, página ou links de layout de página para.

As folhas de estilos padrão do SharePoint contêm muitos estilos, o que pode dificultar a identificação de estilos específicos. Como alternativa para ferramentas baseadas em navegador e dependendo do seu editor de HTML, você talvez seja mais fácil copiar o trecho da Galeria trecho em seu arquivo HTML e, em seguida, use o editor de HTML para identificar os estilos. Na Galeria de trecho de código, quando você escolhe atualização e, em seguida, escolha Copiar para a área de transferência, o trecho contém uma visualização HTML desse trecho. Depois de copiar o trecho de código em seu arquivo HTML, você pode inspecionar os estilos usados na visualização somente leitura contida no trecho de código. Dessa forma, você está analisando um subconjunto menor dos estilos padrão.

Dependendo o trecho de código e a extensão da sua personalização, convém usar seletores de elemento e IDs de CSS para substituir todos os estilos padrão, em vez de escolher estilos padrão específicas para substituir completamente. O exemplo a seguir demonstra como usar esse método para aplicar estilos personalizados para o trecho de navegação superior.

Exemplo: Estilo do trecho de navegação superior

O trecho de navegação superior é uma dos trechos de código, mais comumente usados, portanto, também é uma dos trechos de código mais comumente com marca. Em um site do SharePoint, você pode selecionar uma opção para usar a navegação gerenciada, de modo que um repositório de termos se torne a fonte de dados do trecho de navegação superior. Dessa forma, você pode usar a ferramenta de gerenciamento de repositório de termos nas Configurações do Site para adicionar ou excluir termos de navegação e gerenciar a taxonomia de navegação que é exibida pelo trecho de navegação superior.

Neste exemplo, o site usa a navegação gerenciada, portanto, o controle de navegação superior extrai suas entradas de um repositório de termos. Não há um nível de submenus que aparecem quando você passe o mouse sobre um termo de navegação de nível superior, como computadores. Esta seção demonstra como esses estilos personalizados substituem os estilos do SharePoint padrão.

Amostra 1: Navegação <div> do arquivo de modelo HTML

Antes de usar o Gerenciador de Design, ao criar o modelo HTML para a página mestra, você provavelmente usará HTML e CSS para projetar um elemento funcionais de navegação superior. Este exemplo HTML usa uma estrutura básica para a navegação superior: um elemento <div> com um ID e um nome de classe, uma lista para as entradas de navegação de nível superior e uma lista aninhada para cada submenu.

<div id="navigation" class="msax-Navigation">
   <ul>
      <li><a href="#">Cameras</a>
         <ul>
            <li><a href="#">Camcorders</a></li>
            <li><a href="#">Digital cameras</a></li>
            <li><a href="#">Disposable cameras</a></li>
            <li><a href="#">Film cameras</a></li>
         </ul>
      </li>
      <li><a href="#">Computers</a>
         <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Netbooks</a></li>
            <li><a href="#">Tablets</a></li>
         </ul>
      </li>
      <li><a href="#">Media</a>
         <ul>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">TV shows </a></li>
            <li><a href="#">Video games </a></li>
         </ul>
      </li>
      <li></li>
   </ul>
</div>

Exemplo 2: Navegação com estilo <div> com CSS personalizada

Para substituir os estilos padrão do SharePoint, no arquivo HTML de simulação, inclua um link padrão para o arquivo (<link rel="stylesheet" type="text/css" href="URLtoYourCustomCSSFile"/>CSS ) pouco antes da marca de fechamento </cabeça> .

Nestes exemplos de HTML e CSS, observe o seguinte:

• As entradas de navegação são estilizadas usando o formato .msax-Navigation ul li em vez de aplicar classes diretamente às <marcas ul> ou <li> .

• Os estilos usam a sintaxe .msax-Navigation ul li em vez de .msax-Navigation ul>li porque a marcação de snippet pode conter marcas de div> intervindo< entre os elementos selecionados.

• O formato do modelo HTML contém um elemento<li></li> como a última entrada do de nível superior <ul>. Isso acontece porque, com a navegação gerenciada ativada, SharePoint adiciona um comando Editar vínculos como a entrada final para a navegação de nível superior, e o final do site geralmente não precisa exibir essa opção. O exemplo CSS usa .msax-Navigation ul li:last-child selecionar essa entrada e defina o valor de exibição para none. O elemento <li></li> no arquivo HTML é um substituto temporário para a entrada padrão Editar links. Lembre-se desses elementos <li> se o seu site usa navegação gerenciada e sua CSS usa qualquer um dos seletores li:last-child.

.msax-Navigation {
margin: 10px 0px; top: 0px; position: relative;
z-index:200;
}
.msax-Navigation a {
margin: 0px; padding: 0px; border: 0px currentColor;
}
.msax-Navigation ul {
list-style: none; margin: 0px; padding: 0px; font-size: 16px; z-index:200;
}
.msax-Navigation ul li {
padding: 10px; display: inline-block; position: relative; z-index:200;
}
.msax-Navigation ul li:first-child {
margin: 0px;
}
.msax-Navigation ul li:last-child {
margin: 0px; padding: 0px; display: none;
}
.msax-Navigation ul li a.selected, .msax-Navigation ul li.selected {
background-color: rgb(58,60,62) !important;
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a {
width: 100%; color: rgb(58,60,62); font-size: 16px;
}
.msax-Navigation ul li:hover {
background-color: rgb(58,60,62);
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a:hover {
text-decoration: none;
color:rgb(255,255,255) !important;
}
.msax-Navigation li ul {
left: 0px; top: 35px; display: none; position: absolute; min-width: 100px; box-shadow: 5px 5px 10px 0px rgb(0,0,0); background-color: rgb(58,60,62);
}
.msax-Navigation li:hover ul {
display: block; z-index: 150;
}
.msax-Navigation li li {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li:last-child {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li a {
width: 100%; padding-left: 10px; display: block; color:rgb(255,255,255) !important;
}
.msax-Navigation li li:hover {
background-color: rgb(120, 120, 120);
}

Exemplo 3: Visualização somente leitura do trecho de navegação superior

Depois de seus estilos personalizados são implementados no seu modelo HTML e você tiver um elemento funcionais de navegação superior, siga as etapas mais comuns:

1. Mapear uma unidade de rede.

2. Carregar seus arquivos de design.

3. Converta o arquivo HTML em uma página mestra.

4. Visualizar e corrija quaisquer problemas.

5. Adicione o trecho de navegação superior à página mestra HTML usando a Galeria de trecho de código.

Na Galeria de trecho de código, quando você configura as propriedades do trecho de navegação superior, observe o seguinte:

• Na seção importantes na parte superior, não faça qualquer alteração à propriedade CssClass.

• Não faça qualquer alteração às propriedades sob o título AjaxDelta porque essas propriedades estão relacionadas às propriedades MDS que o SharePoint usa para converter o trecho de código HTML para o trecho de código do ASP.NET correspondente. Isso se aplica a qualquer trecho, não apenas o trecho de navegação superior.

• Se você estiver planejando substituir os estilos de padrão do SharePoint, na Galeria de trecho de código, na seção Behavior em AspMenu (pode haver mais de uma seção de Behavior se o trecho contiver mais de um controle, como um delegar controle), defina ClientIDMode como Static. Se você deixar ClientIDMode definido como o padrão configuração, Inherit, CSS aplicada do trecho classes serão alterado com base na ordenação dos trechos de código na página. Para obter mais informações sobre ClientIDMode, consulte Propriedade Control.ClientIDMode.

  Por exemplo, por padrão, o controle de navegação superior usa atributos de ID do SharePoint padrão como zz5_TopNavigationMenu e zz6_RootAspMenu. Alterando ClientIDMode para Static, torná-lo possível usar estas IDs padrão como seletores em seu próprio CSS para substituir os estilos do SharePoint padrão.

• Algumas propriedades já estão configuradas para tornar a marca o trecho de navegação superior mais fácil, eliminando dinâmico CSS e JavaScript comportamentos padrão — por exemplo, por padrão UseSimpleRendering é definido como True e MaximumDynamicDisplayLevels estiver definida como 0. Para obter mais informações sobre propriedades específicas do snippet de navegação superior, consulte Propriedades do AspMenu e propriedades menu.

Depois de configurar o trecho de navegação superior na Galeria de Trechos, escolha Atualizar e escolha Copiar para a área de transferência. Na página mestra de HTML, exclua o conteúdo da navegação <div id="navigation" class="msax-Navigation"> que contém seu controle de simulação (exclua apenas o conteúdo da <marca div>, não a <marca div> em si) e copie o snippet no div> de navegação<. Se necessário, reposicione o div> de navegação<, normalmente logo após o início da <div id="s4-bodyContainer"> marca, mas antes do <div> que contém PlaceHolderMain.

Para facilitar a comparação com o código HTML a navegação <div> acima, o exemplo a seguir contém parte da navegação <div>do trecho de navegação superior. Observe que isso não é o trecho inteiro.

<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
     <ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
          <li class="static">
          <a accesskey="1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Cameras</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/camcorders" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Camcorders</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/digital-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Digital cameras</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/disposable-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Disposable cameras</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/film-cameras" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Film cameras</span></span></a></li>
          </ul>
          </li>
          <li class="static">
          <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Computers</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/desktops" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Desktops</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/laptops" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Laptops</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/netbooks" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Netbooks</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/tablets" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Tablets</span></span></a></li>
          </ul>
          </li>
          <li class="static">
          <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media" tabindex="0">
          <span class="additional-background ms-navedit-flyoutArrow">
          <span class="menu-item-text">Media</span></span></a><ul class="static">
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/movies" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Movies</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/music" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Music</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/tv-shows" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">TV shows</span></span></a></li>
               <li class="static">
               <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/video-games" tabindex="0">
               <span class="additional-background ms-navedit-flyoutArrow">
               <span class="menu-item-text">Video games</span></span></a></li>
          </ul>
          </li>
          <li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea">
          <span id="zz7_TopNavigationMenu_NavMenu_Edit" class="ms-navedit-editSpan">
          <a id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_TopNavigationMenu', 2, 0, 0, ''); cancelDefault(event); return false;">
          <span class="ms-displayInlineBlock">
          <span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle">
          <img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=23" /></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz7_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=23" /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg">
          </div>
          </span></li>
     </ul>
</div>

Em vez de usar apenas estilos personalizados, talvez você tenha um cenário onde você deseja substituir apenas um estilo específico. Por exemplo, para ocultar o nó de Editar vínculos, você pode criar um estilo personalizado que usa a id do padrão zz7_TopNavigationMenu_NavMenu_Edit para definir a configuração de exibição para none.

Confira também

• Trechos de código do Gerenciador de Design do SharePoint

• Visão geral do Gerenciador de Design no SharePoint

• Como: converter um arquivo HTML em uma página mestra no SharePoint

• Tutorial: criar um layout de página no SharePoint

• Desenvolver o design do site do SharePoint