Guia para estilizar o CSS de páginas e widgets principais

O plug-in MemberMouse foi projetado para ser o mais agnóstico possível em relação ao seu tema, de modo que a mudança de um tema para outro deve exigir pouca ou nenhuma atualização dos elementos do MemberMouse em seu site. Mas talvez você queira aplicar classes mais específicas a determinadas áreas do seu site. Este artigo serve para ajudá-lo a localizar e estilizar as páginas centrais e os widgets do MemberMouse.

Estilização de páginas centrais

Ao instalar e ativar o MemberMouse em seu site, você verá que um conjunto de páginas é criado. Essas são as páginas principais. Leia este artigo para Saiba mais sobre as páginas principais. as páginas principais são páginas específicas do MemberMouse que vêm equipadas com SmartTags™ para ajudar a criar uma maneira fácil de seu site de associação funcionar.

Há um total de 9 páginas principais que os membros utilizarão independentemente dos direitos de acesso dos usuários ou do produto adquirido. É possível criar páginas centrais adicionais que podem ser personalizadas para proporcionar uma experiência de usuário dinâmica aos seus membros. Muitas dessas páginas centrais vêm com folhas de estilo específicas com configurações de CSS que são específicas para aquela página em particular. Elas incluem:

• Checkout página principal
  
  
• Login página principal
  
  
• Minha conta página principal
  
  
• Esqueci minha senha página principal
  
  
• Redefinir senha página principal
  

Configurações de CSS incorporadas na página principal

Por padrão, em uma nova instalação do MemberMouse, as folhas de estilo CSS das cinco páginas principais listadas acima são controladas automaticamente pelo MemberMouse.

Se estiver tendo problemas com a exibição correta de alguma dessas páginas principais (por exemplo, há apenas uma coluna ou o botão Paypal não está sendo exibido), verifique se o MemberMouse está carregando a folha de estilo.

Siga as etapas abaixo para ativar ou desativar a inclusão automática das folhas de estilo CSS de sua página principal pelo MemberMouse:

1. No menu do MemberMouse, vá para Configurações geraise, em seguida, clique no botão Outras configurações guia.
   
   
2. Role para baixo até a seção Core Page CSS Settings.
   
   
3. Se a caixa de seleção ao lado da página principal estiver ativa, o MemberMouse deverá carregar automaticamente a folha de estilo CSS para essa página:
   
   
   
   
4. Se quiser desativar o carregamento da folha de estilo (para que você possa aplicar seus próprios estilos personalizados), desmarque a caixa.

Localização da referência da folha de estilo CSS

Você pode ver essa referência de folha de estilo nas páginas principais listadas acima por:

1. No painel do WordPress, clique em Páginas.
   
   
2. Na seção Páginas, você verá uma listagem de todas as suas páginas do WordPress. Quando o MemberMouse estiver instalado, você terá filtros acima da lista que lhe permitirão visualizar apenas as páginas principais:
   
   
   
   
3. A listagem pode ajudá-lo a identificar quais páginas principais são as páginas principais padrão para todos os usuários:
   
   
   
   
   Sob o Tipo de página principal você verá o tipo de página principal, bem como se a página é padrão para todos os usuários. Se o ícone de bandeira aparecer ao lado do Tipo de página principalessa página é a página padrão. A página padrão será usada para qualquer membro que não tenha uma página principal diferente atribuída ao seu nível de associação ou pacote de produtos.
   
   
4. Passe o mouse sobre a página que deseja editar. Você verá uma lista de opções. Você deverá clicar em editar:
   
   
   
   
5. Depois de editar a página, você deverá localizar a referência CSS no WYWSIWYG. Certifique-se de estar no modo de edição de "texto" para visualizar e editar corretamente o código:
   
   
   
   
   
6. A referência CSS terá a seguinte aparência:
   
   <link rel='stylesheet' type='text/css' href='http://www.yourURL.com/wp-content/plugins/membermouse/resources/css/user/mm-checkout.css' />

Edição do local padrão da folha de estilo CSS

Outra opção para estilizar suas páginas é copiar as folhas de estilo CSS do MemberMouse. A seção final deste artigo contém os links para as folhas de estilo disponíveis para download. Em seguida, você pode alterar a referência CSS no código da página principal para refletir o local dessa nova folha de estilo, assim:

 <link rel='stylesheet' type='text/css' href='http//:www.yourURL.com/sitespecifics/customestylesheet.css'/>

Edição das folhas de estilo do MemberMouse

OBSERVAÇÃO: Uma das melhores maneiras de ver o que esse código está realmente exibindo é usar a visualização do Element Inspector em seu navegador. Se você não estiver familiarizado com o uso do Element Inspector, leia este artigo para o Google Chromeou este artigo para o Firefox.

Você sempre tem a opção de editar as folhas de estilo CSS fornecidas pelo MemberMouse para atender às suas necessidades. Para este exemplo, examinaremos a folha de estilo usada na tag Checkout página principal.

Aqui está uma seção do Checkout código da página:

[MM_Form_Section type='accountInfo']
<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
<h3>Informações sobre a conta</h3>
<p class="mm-formField">
 <label>Primeiro nome:</label>
 [MM_Form_Field type='input' name='firstName']
</p>

Quando você abre o inspetor de elementos, pode usá-lo para localizar qualquer ID ou classe de div que você vê no código da sua página. No exemplo abaixo, localizei a div id="mm-account-information-section" que tem a classe "mm-checkoutInfoBlock" aplicada a ela:

Se quisermos aplicar uma cor de fundo, então, na folha de estilo mm-checkout.css, basta adicionar:

Cor de fundo: #333;

à folha de estilo. Esse tipo de edição está disponível para qualquer propriedade CSS que você queira aplicar. Você também pode procurar remover classes CSS, se desejar.

Uso de classes personalizadas em SmartTags

Se preferir aplicar classes já criadas às suas páginas principais, você também pode fazer isso. Essa é uma ótima opção se o seu tema já tiver classes CSS preparadas que você pode simplesmente reutilizar. OBSERVAÇÃO: Se você não estiver familiarizado com o uso de classes CSS em HTML, Leia este artigo.

Para usar uma classe CSS personalizada, você deve saber o nome da classe que deseja usar. Depois disso, basta examinar o código da sua página principal (por meio destas etapas) Então, quando você souber o elemento que deseja alterar, basta substituir a classe existente:

<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
 
com sua nova classe CSS

<div id="mm-account-information-section" class="myownclass">

Usando os estilos de botão do MemberMouse

Quando o MemberMouse for ativado em seu site, você terá acesso a mais de 60 estilos de botões da Web 2.0. Leia este artigo para Saiba como utilizar esses estilos de botão em seu site.

Amostras de folhas de estilo CSS

Abaixo estão os links para as folhas de estilo CSS usadas em páginas principais específicas e no widget de conteúdo protegido:

• Checkout página principal - mm-checkout.css
  
• Login página principal - mm-login.css
  
• Minha conta página principal - mm-myaccount.css
  
• Esqueci minha senha página principal - mm-forgotpassword.css
  
• Widget de conteúdo protegido - mm-protectedcontentwidget.css
  
• Todos os arquivos CSS Zip - mm-stylesheets.zip