Guía para estilizar el CSS de las páginas principales y los widgets

El plugin MemberMouse está diseñado para ser lo más agnóstico posible con respecto a su tema, de modo que el cambio de un tema a otro debería requerir poca o ninguna actualización de los elementos MemberMouse de su sitio. Sin embargo, es posible que desee aplicar clases más específicas a determinadas áreas de su sitio. Este artículo le ayudará a localizar y dar estilo a las páginas principales y widgets de MemberMouse.

Estilización de las páginas principales

Cuando instale y active MemberMouse en su sitio web, verá que se crea un conjunto de páginas. Se trata de las páginas principales. Lea este artículo para más información sobre las páginas centrales. las páginas centrales son páginas específicas de MemberMouse que vienen equipadas con útiles SmartTags™ (etiquetas inteligentes) para facilitar el funcionamiento de su sitio de afiliación.

Hay un total de 9 páginas principales que los miembros utilizarán independientemente de los derechos de acceso de los usuarios o del producto adquirido. Puede crear páginas principales adicionales que pueden ser personalizadas para una experiencia de usuario dinámica para sus miembros. Muchas de estas páginas centrales vienen con hojas de estilo específicas con ajustes CSS que son específicos para esa página en particular. Entre ellas se incluyen:

• Pedido página principal
  
  
• Inicio de sesión página principal
  
  
• Mi cuenta página principal
  
  
• Contraseña olvidada página principal
  
  
• Restablecer contraseña página principal
  

Configuración CSS integrada en la página principal

Por defecto, en una nueva instalación de MemberMouse, MemberMouse controla automáticamente las hojas de estilo CSS de las cinco páginas principales enumeradas anteriormente.

Si tiene problemas con alguna de estas páginas principales (por ejemplo, sólo hay una columna o no se muestra el botón de Paypal), compruebe que MemberMouse carga la hoja de estilos.

Siga los siguientes pasos para activar o desactivar MemberMouse para que no incluya automáticamente las hojas de estilo CSS de su página principal:

1. En el menú MemberMouse, vaya a Ajustes generalesy, a continuación, haga clic en el botón Otros ajustes ficha.
   
   
2. Desplácese hacia abajo hasta la sección Core Page CSS Settings.
   
   
3. Si la casilla junto a la página principal está activa, entonces MemberMouse debería cargar automáticamente la hoja de estilos CSS para esa página:
   
   
   
   
4. Si desea desactivar la carga de la hoja de estilos (para poder aplicar sus propios estilos personalizados), desmarque la casilla.

Localización de la referencia de la hoja de estilos CSS

Puede ver esta referencia a la hoja de estilo en las páginas principales enumeradas anteriormente:

1. En el panel de control de WordPress, haga clic en Páginas.
   
   
2. En la sección Páginas, verá una lista de todas sus páginas de WordPress. Cuando MemberMouse esté instalado, tendrá filtros encima de la lista que le permitirán ver sólo las páginas principales:
   
   
   
   
3. El listado puede ayudarle a identificar qué páginas principales son las páginas principales por defecto para todos los usuarios:
   
   
   
   
   En virtud de la núcleo Tipo de página verá el tipo de página principal, así como si la página es la predeterminada para todos los usuarios. Si aparece el icono de la bandera junto a la núcleo Tipo de páginaesta es la página por defecto. La página predeterminada se utilizará para cualquier miembro que no tenga una página principal diferente asignada a su nivel de miembro o paquete de productos.
   
   
4. Pase el ratón por encima de la página que desea editar. Verá una lista de opciones. Haga clic en Editar:
   
   
   
   
5. Una vez editada la página, deberá localizar la referencia CSS en el WYWSIWYG. Asegúrese de que está en "modo de edición de texto" para ver y editar correctamente el código:
   
   
   
   
   
6. La referencia CSS tendrá este aspecto:
   
   <link rel='stylesheet' type='text/css' href='http://www.yourURL.com/wp-content/plugins/membermouse/resources/css/user/mm-checkout.css' />

Edición de la ubicación predeterminada de la hoja de estilos CSS

Otra opción para dar estilo a sus páginas es copiar las hojas de estilo CSS de MemberMouse. La última sección de este artículo contiene los enlaces a las hojas de estilo disponibles para su descarga. A continuación, puede cambiar la referencia CSS en el código de su página principal para reflejar la ubicación de esta nueva hoja de estilos, de esta manera:

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

Edición de las hojas de estilo de MemberMouse

NOTA: Una de las mejores maneras de ver lo que este código está mostrando es utilizar la vista del Inspector de Elementos en su navegador. Si no estás familiarizado con el uso del Inspector de Elementos, entonces lee este artículo para Google Chromeo este artículo para Firefox.

Siempre tiene la opción de editar las hojas de estilo CSS proporcionadas por MemberMouse para adaptarlas a sus necesidades. En este ejemplo, examinaremos la hoja de estilos utilizada en la página Pedido página central.

Esta es una sección del Pedido código de página:

[MM_Form_Section type='accountInfo']
<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
<h3>Información sobre la cuenta</h3>
<p class="mm-formField">
 <label>Nombre de pila:</label>
 [MM_Form_Field type='input' name='nombre']
</p>

Cuando abras el inspector de elementos, puedes usarlo para localizar cualquiera de los div IDs o clases que veas en el código de tu página. En el ejemplo siguiente, he localizado el div id="mm-account-information-section" que tiene aplicada la clase "mm-checkoutInfoBlock":

Si quisiéramos aplicar un color de fondo, entonces en la hoja de estilo mm-checkout.css, simplemente añadiríamos:

color de fondo: #333;

a la hoja de estilos. Este tipo de edición está disponible para cualquier propiedad CSS que desee aplicar. Si lo desea, también puede eliminar clases CSS.

Uso de clases personalizadas en SmartTags

Si prefieres aplicar clases ya creadas a tus páginas principales, también puedes hacerlo. Esta es una gran opción si tu tema ya tiene clases CSS preparadas que puedes simplemente buscar para reutilizar. NOTA: Si no estás familiarizado con el uso de las clases CSS en HTML, lea este artículo.

Para utilizar una clase CSS personalizada, debe conocer el nombre de la clase que desea utilizar. Una vez que lo sepa, simplemente mire el código de su página principal (mediante estos pasos) Luego, cuando conozca el elemento que desea cambiar, sólo tiene que sustituir la clase existente:

<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
 
con su nueva clase CSS

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

Uso de los estilos de botón de MemberMouse

Al activar MemberMouse en su sitio web, tendrá acceso a más de 60 estilos de botones web 2.0. Lea este artículo para aprenda a utilizar estos estilos de botones en su sitio web.

Ejemplos de hojas de estilo CSS

A continuación encontrará enlaces a las hojas de estilo CSS utilizadas en determinadas páginas principales y en el widget de contenido protegido:

• Pedido página principal - mm-checkout.css
  
• Inicio de sesión página principal - mm-login.css
  
• Mi cuenta página principal - mm-mi-cuenta.css
  
• Contraseña olvidada página principal - mm-contraseña-olvidada.css
  
• Widget de contenido protegido - mm-protectedcontentwidget.css
  
• Todos los archivos CSS Zip - mm-stylesheets.zip