Criando um destaque com uma apresentação diferente

Publicado por em 08/05/2013 às 21h26

Para criar um destaque com um design diferente do padrão, vamos ter que marcá-lo primeiro.

Adicione um destaque em seu SitePX clicando em Design e Adicionar módulos, clique para editar Design e clique na ferramenta da área dele, como é exibido na imagem abaixo:

 

Agora clique na aba CSS Avançado, que deve ser habilitado em Configurações de seu site e digite o nome da classe que este destaque vai ganhar, não utilize acentuações ou caracteres especiais no nome, para este exemplo utilizei "meudestaque".

 

 

Depois de digitar o nome da classe do destaque clique em "Atualizar" para aplicar o nome do seu destaque e depois clique em Salvar.

Agora vamos editar o CSS deste destaque. Clique em Páginas e no menu lateral à direita clique em CSS colocando as seguintes regras na parte de "Seu CSS":

#ws  .meudestaque .widget .content-inner{
  background-color:#333;
}
#ws  .meudestaque .widget .content-clip a{
  color:#fff;
}
#ws  .meudestaque .widget h2{
  background-color: #fff;
  margin: -10px -20px 10px -20px;
  padding: 10px;
  border-radius: 10px;
  color:#6a6a6a;
}

Neste exemplo apenas criamos algumas regras para mudar a cor de fundo, margem, cor e canto arredondado do título.
Você poderia alterar o que tiver vontade, basta editar os objetos que formam um destaque:

  • #ws .meudestaque .widget .content-inner
    Este seletor é a área do destaque.
    Ele pode receber cor de fundo, bordas, margens, sombra, imagem de fundo
     
  • #ws .meudestaque .widget .content-clip a
    Este seletor é a cor do texto e links do destaque.
    Ele pode receber cor de texto, fundo, sombra.
     
  • #ws .meudestaque .widget h2
    Este seletor é o título do destaque.
    Ele pode receber cor de texto, cor de fundo, bordas, margens, sombra, imagem de fundo

 

Faça o teste e veja o resultado.

voltar para Tutoriais

left show tsN fwR fsN|left tsN b01e fwR bsd show|left fwR tsN show|bnull||image-wrap|news login c05|fsN fwR normalcase tsN|c05|login news fwR normalcase|tsN fwR normalcase|normalcase fwR c05|content-inner||