Compartilhamento de link

A ferramenta Compartilhamento de links consiste em um botão adicionado ao painel Compartilhamento em redes sociais e a caixa de diálogo modal que é exibida quando a ferramenta é ativada. A posição do botão é totalmente gerenciada pela ferramenta de compartilhamento Social .

A aparência do botão de compartilhamento de link é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkshare

Propriedades CSS da ferramenta de compartilhamento de links

É possível remover o botão do painel Compartilhamento do Social ao configurar display:none Propriedade CSS na classe CSS.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar um botão de compartilhamento de link de 28 x 28 pixels e exibir uma imagem diferente para cada um dos quatro estados de botão diferentes:

.s7ecatalogsearchviewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}

A sobreposição em segundo plano que abrange a página da Web quando a caixa de diálogo está ativa é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7backoverlay

Propriedades CSS da sobreposição em segundo plano

Exemplo - para configurar uma sobreposição de plano de fundo para ficar cinza com 70% de opacidade:

.s7ecatalogsearchviewer .s7linkdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Por padrão, a caixa de diálogo modal é exibida centralizada na tela em sistemas de desktop e leva toda a área da página da Web em dispositivos de toque. Em todos os casos, o posicionamento e o dimensionamento da caixa de diálogo são gerenciados pelo componente . A caixa de diálogo é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialog

Propriedades CSS da caixa de diálogo

Exemplo - para configurar a caixa de diálogo para usar toda a janela do navegador e ter um plano de fundo branco em dispositivos de toque:

.s7ecatalogsearchviewer .s7touchinput .s7linkdialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

O cabeçalho da caixa de diálogo consiste em um ícone, um texto de título e um botão fechar. O contêiner de cabeçalho é controlado com

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader

Propriedades CSS do cabeçalho da caixa de diálogo

O ícone e o texto do título são vinculados em um contêiner extra controlado com

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline

Propriedades CSS da linha de diálogo

O ícone Cabeçalho é controlado com o seguinte seletor de classe CSS

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon

Propriedades CSS do ícone de cabeçalho da caixa de diálogo

O título do cabeçalho é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext

Propriedades CSS do texto do cabeçalho da caixa de diálogo

O botão Fechar é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7closebutton

Propriedades CSS do botão Fechar ​

A dica de ferramenta do botão Fechar e o título da caixa de diálogo podem ser localizados. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar um cabeçalho de caixa de diálogo com o preenchimento, um ícone de 22 x 12 pixels e um título de 16 pontos em negrito. E finalmente, um botão Fechar de 28 x 28 pixels que é posicionado em dois pixels da parte superior e em dois pixels à direita do contêiner da caixa de diálogo:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon {
    background-image: url("images/sdk/dlglink_cap.png");
    height: 12px;
    width: 22px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

O rodapé da caixa de diálogo consiste em um botão Cancelar . O contêiner de rodapé é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter

Propriedades CSS do rodapé da caixa de diálogo ​

O rodapé tem um contêiner interno que mantém o botão. É controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer

Propriedades CSS do contêiner do botão da caixa de diálogo

O botão Selecionar tudo é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton

O botão só está disponível em sistemas de desktop.

Propriedades CSS do botão Selecionar tudo

O botão Cancelar é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton

Propriedades CSS do botão Cancelar da caixa de diálogo

Além disso, ambos os botões compartilham uma classe CSS comum que pode conter configurações CSS que são as mesmas para outros botões de caixa de diálogo:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter .s7button

Propriedades CSS do botão

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar um rodapé de caixa de diálogo com um botão Cancelar de 64 x 34, com cor de texto e cor de plano de fundo diferentes para cada estado de botão:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

A área de diálogo principal (entre o cabeçalho e o rodapé) contém conteúdo da caixa de diálogo. Em todos os casos, o componente gerencia a largura dessa área — não é possível defini-la em CSS. A área de diálogo principal é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogviewarea

Propriedades CSS da área de visualização da caixa de diálogo ​

Exemplo - para configurar uma área da caixa de diálogo principal para ter 300 pixels de altura, tenha uma margem de dez pixels e use um plano de fundo branco:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

Todo o conteúdo do formulário (como rótulos e campos de entrada) reside dentro de um contêiner controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody

Propriedades CSS do corpo da caixa de diálogo ​

Exemplo - para configurar o conteúdo do formulário para ter o preenchimento de dez pixels:

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody {
    padding: 10px;
}

Todos os rótulos estáticos no formulário da caixa de diálogo são controlados com

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglabel

Essa classe não é adequada para controlar o tamanho ou a posição do rótulo, pois você pode aplicá-lo a textos em vários lugares da interface do usuário do formulário.

Propriedades CSS do rótulo da caixa de diálogo. ​

Os rótulos da caixa de diálogo podem ser localizados. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar todos os rótulos para serem cinza, negrito com uma fonte de nove pixels:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

O tamanho da cópia de texto exibida na parte superior do link é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide

Propriedades CSS do campo de entrada da caixa de diálogo

Exemplo - para definir a cópia de texto como 430 pixels de largura e ter um preenchimento de dez pixels na parte inferior:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

O link de compartilhamento é encapsulado em um contêiner e controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer

Propriedades CSS do contêiner de entrada da caixa de diálogo

Exemplo - para definir uma borda cinza de um pixel em torno do texto do código incorporado e ter nove pixels de preenchimento:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

O próprio link de compartilhamento é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink

Propriedades CSS do link de compartilhamento da caixa de diálogo

Exemplo - para definir o link de compartilhamento como 450 pixels de largura:

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink {
    width: 450px;
}

Recursos do Business.Adobe.com

Ecommerce Integrations Auto Text Summarization Automated Onboarding Style System Targeted Content Personalized Experiences