Hoja de estilos de referencia para Embedded Authentication

# Hoja de estilos de referencia para Embedded Authentication

Esta página lista y proporciona descripciones para todas las clases e IDs CSS que necesitarás para estilizar tu elemento de inicio de sesión en el tipo {{%link href="/es/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}Embedded Authentication{{%/link%}}. Catalyst proporciona archivos CSS individuales para el formulario Conventional Login, el formulario Social-Login Only y el formulario Password Reset, con IDs y clases CSS individuales para cada uno.

Estos IDs y clases CSS están predefinidos por Catalyst para tu comodidad. Simplemente puedes incorporarlos en tu hoja de estilos según tu necesidad, y personalizar el diseño y la marca de los elementos de inicio de sesión. Debes importar el archivo CSS que configures en los scripts de tu formulario de inicio de sesión de esta autenticación.

Antes de comenzar a estilizar tu iFrame, descarga el archivo CSS requerido.

Hoja de estilos CSS para:
* Formulario Conventional Login - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin.css" %}}Descargar{{%/link%}}
* Formulario Social Login-only - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin_providers_only.css" %}}Descargar{{%/link%}}
* Formulario Confirm Password - {{%link href="https://api.catalyst.zoho.com/__catalyst/auth/static-file?file_name=confirm_password.css" %}}Descargar{{%/link%}}
* Formulario Password Reset - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_password_reset.css" %}}Descargar{{%/link%}}

{{%note%}}{{%bold%}}Nota:{{%/bold%}} Después de descargar la hoja de estilos, comienza a estilizar tu elemento de inicio de sesión después de la última línea de código. Recomendamos encarecidamente que no modifiques el código que ya está presente. Modificarlo de cualquier manera podría no renderizar el iFrame correctamente. Consulta esta {{%link href="/es/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/" %}}hoja{{%/link%}} para obtener información más detallada sobre cómo aparecería cada uno de los formularios mencionados arriba a los usuarios finales.{{%/note%}}

### Sección donde el usuario final ingresa su dirección de correo electrónico
<br />

<br />

#### Sección 2 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#login_id</td>
			<td>El ID que maneja el estilo del campo de entrada</td>
		</tr>
        <tr>
			<td>.fielderror</td>
			<td>La clase que maneja el tamaño del texto de error</td>
		</tr>
        <tr>
			<td>.errorlabel</td>
			<td>La clase que maneja el esquema de color del mensaje de error</td>
		</tr>
        <tr>
			<td>.errorborder</td>
			<td>La clase que maneja el color del borde que aparece en caso de error, alrededor del campo de entrada</td>
		</tr>
	</tbody>
</table>

#### Sección 5 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.fed_div</td>
			<td>La clase que maneja el tamaño, la altura, el cursor y el desbordamiento de la opción de social login en su conjunto</td>
		</tr>
        <tr>
			<td>.zoho_fed_box</td>
			<td>La clase que maneja el esquema de color del social login de Zoho</td>
		</tr>
        <tr>
			<td>.fed_icon</td>
			<td>La clase que maneja el tamaño de los logos de todos los social logins</td>
		</tr>
        <tr>
			<td>..zoho_icon</td>
			<td>La clase que maneja el ícono del logo del social login de Zoho</td>
		</tr>
	</tbody>
</table>

### Sección donde el usuario final ingresa su contraseña
<br />
<br />

#### Sección 2 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.Notyou</td>
			<td>La clase que maneja el tamaño de fuente del literal "{{%bold%}}Change{{%/bold%}}"</td>
		</tr>
        <tr>
			<td>.bluetext</td>
			<td>La clase que maneja el color y otras propiedades del literal "{{%bold%}}Change{{%/bold%}}"</td>
		</tr>
	</tbody>
</table>

#### Sección 3 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#password</td>
			<td>El ID que maneja las diversas propiedades del campo de entrada</td>
		</tr>
        <tr>
			<td>.fielderror</td>
			<td>La clase que maneja el tamaño del texto de error</td>
		</tr>
        <tr>
			<td>.errorborder</td>
			<td>La clase que maneja el color del borde que aparece en caso de error alrededor del campo de entrada</td>
		</tr>
        <tr>
			<td>.errorlabel</td>
			<td>La clase que maneja el esquema de color del texto de error</td>
		</tr>
        <tr>
			<td>.show_hide_password</td>
			<td>La clase que maneja las propiedades del ícono de visibilidad</td>
		</tr>
        <tr>
			<td>.icon_hide</td>
			<td>La clase que maneja las propiedades del ícono oculto</td>
		</tr>
        <tr>
			<td>.icon_show</td>
			<td>La clase que maneja las propiedades del ícono de visibilidad cuando se hace clic</td>
		</tr>
	</tbody>
</table>

#### Sección 4 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue_text_action</td>
			<td>La clase que maneja el esquema de color, tamaño de fuente y otras propiedades de ambos literales</td>
		</tr>
	</tbody>
</table>

#### Sección 5 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue</td>
			<td>La clase que maneja el esquema de color del botón y cuadro de Sign In</td>
		</tr>
        <tr>
			<td>.btn</td>
			<td>La clase que maneja el tamaño del botón</td>
		</tr>
	</tbody>
</table>

### Sección donde el usuario final confirma su contraseña
<br />

#### Sección 1 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.confirmtitle</td>
			<td>La clase que maneja los elementos de estilo presentes en el título.</td>
		</tr>
		<tr>
			<td>.confirmdesc</td>
			<td>Este es el elemento de notificación/descripción que indica crear una contraseña fuerte y única en la parte inferior del elemento del título.</td>
		</tr>
		<tr>
			<td>.confirm_head</td>
			<td>La clase que maneja el estilo del fondo del formulario de confirmación.</td>
		</tr>
	</tbody>
</table>

#### Sección 2 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.username</td>
			<td>La clase que maneja el campo de dirección de correo electrónico.</td>
		</tr>
		<tr>
			<td>.icon-profile</td>
			<td>La clase que maneja el perfil en ese campo de dirección de correo electrónico.</td>
		</tr>
	</tbody>
</table>

#### Sección 3 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#password</td>
			<td>El ID que maneja los elementos de estilo presentes en el campo de entrada de contraseña.</td>
		</tr>
		<tr>
			<td>.icon-hide</td>
			<td>La clase que maneja las propiedades del ícono oculto</td>
		</tr>
		<tr>
			<td>.show_hide_password</td>
			<td>La clase que maneja las propiedades de la visibilidad del ícono</td>
		</tr>
		<tr>
			<td>.fielderror</td>
			<td>La clase que maneja el tamaño del texto de error.</td>
		</tr>
		<tr>
			<td>.passwordpolicy</td>
			<td>La clase que maneja la ventana emergente que contiene la política de contraseña.</td>
		</tr>
	</tbody>
</table>

### Sección donde el usuario final ingresa el CAPTCHA
<br />
<br />

#### Sección 3 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.changeuser</td>
			<td>La clase que maneja los elementos de estilo presentes en el literal "{{%bold%}}Change{{%/bold%}}"</td>
		</tr>
	</tbody>
</table>

#### Sección 4 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#captcha_container</td>
			<td>El ID que maneja el estilo del cuadro que rodea el cuadro de control de Captcha</td>
		</tr>
        <tr>
			<td>.reload_captcha ::before</td>
			<td>La clase que maneja el estilo del botón de recarga, antes de que se haga clic</td>
		</tr>
        <tr>
			<td>.text_box</td>
			<td>La clase que maneja las propiedades del campo de entrada</td>
		</tr>
	</tbody>
</table>

#### Sección 5 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue</td>
			<td>La clase que maneja el esquema de color del botón y cuadro</td>
		</tr>
        <tr>
			<td>.btn</td>
			<td>La clase que maneja el tamaño del botón</td>
		</tr>
	</tbody>
</table>

Esta página lista y proporciona descripciones para todas las clases e IDs CSS que necesitarás para estilizar tu elemento de inicio de sesión en el tipo Embedded Authentication. Catalyst proporciona archivos CSS individuales para el formulario Conventional Login, el formulario Social-Login Only y el formulario Password Reset, con IDs y clases CSS individuales para cada uno.

Antes de comenzar a estilizar tu iFrame, descarga el archivo CSS requerido.

Hoja de estilos CSS para:

Formulario Conventional Login - Descargar
Formulario Social Login-only - Descargar
Formulario Confirm Password - Descargar
Formulario Password Reset - Descargar

Nota: Después de descargar la hoja de estilos, comienza a estilizar tu elemento de inicio de sesión después de la última línea de código. Recomendamos encarecidamente que no modifiques el código que ya está presente. Modificarlo de cualquier manera podría no renderizar el iFrame correctamente. Consulta esta hoja para obtener información más detallada sobre cómo aparecería cada uno de los formularios mencionados arriba a los usuarios finales.

Sección donde el usuario final ingresa su dirección de correo electrónico

Sección 1

IDs y clases CSS	Descripción
#headtitle	El ID que maneja los elementos de estilo presentes en el título del iFrame

Sección 2

IDs y clases CSS	Descripción
#login_id	El ID que maneja el estilo del campo de entrada
.fielderror	La clase que maneja el tamaño del texto de error
.errorlabel	La clase que maneja el esquema de color del mensaje de error
.errorborder	La clase que maneja el color del borde que aparece en caso de error, alrededor del campo de entrada

Sección 3

IDs y clases CSS	Descripción
#nextbtn	El ID que maneja el estilo del botón "NEXT"

Sección 4

IDs y clases CSS	Descripción
#forgotpassword	El ID que maneja el estilo del literal "Forgot Password"

Sección 5

IDs y clases CSS	Descripción
.fed_div	La clase que maneja el tamaño, la altura, el cursor y el desbordamiento de la opción de social login en su conjunto
.zoho_fed_box	La clase que maneja el esquema de color del social login de Zoho
.fed_icon	La clase que maneja el tamaño de los logos de todos los social logins
..zoho_icon	La clase que maneja el ícono del logo del social login de Zoho

Sección donde el usuario final ingresa su contraseña

Sección 1

IDs y clases CSS	Descripción
.username	La clase que maneja el campo de dirección de correo electrónico

Sección 2

IDs y clases CSS	Descripción
.Notyou	La clase que maneja el tamaño de fuente del literal "Change"
.bluetext	La clase que maneja el color y otras propiedades del literal "Change"

Sección 3

IDs y clases CSS	Descripción
#password	El ID que maneja las diversas propiedades del campo de entrada
.fielderror	La clase que maneja el tamaño del texto de error
.errorborder	La clase que maneja el color del borde que aparece en caso de error alrededor del campo de entrada
.errorlabel	La clase que maneja el esquema de color del texto de error
.show_hide_password	La clase que maneja las propiedades del ícono de visibilidad
.icon_hide	La clase que maneja las propiedades del ícono oculto
.icon_show	La clase que maneja las propiedades del ícono de visibilidad cuando se hace clic

Sección 4

IDs y clases CSS	Descripción
.blue_text_action	La clase que maneja el esquema de color, tamaño de fuente y otras propiedades de ambos literales

Sección 5

IDs y clases CSS	Descripción
.blue	La clase que maneja el esquema de color del botón y cuadro de Sign In
.btn	La clase que maneja el tamaño del botón

Sección donde el usuario final confirma su contraseña

Sección 1

IDs y clases CSS	Descripción
.confirmtitle	La clase que maneja los elementos de estilo presentes en el título.
.confirmdesc	Este es el elemento de notificación/descripción que indica crear una contraseña fuerte y única en la parte inferior del elemento del título.
.confirm_head	La clase que maneja el estilo del fondo del formulario de confirmación.

Sección 2

IDs y clases CSS	Descripción
.username	La clase que maneja el campo de dirección de correo electrónico.
.icon-profile	La clase que maneja el perfil en ese campo de dirección de correo electrónico.

Sección 3

IDs y clases CSS	Descripción
#password	El ID que maneja los elementos de estilo presentes en el campo de entrada de contraseña.
.icon-hide	La clase que maneja las propiedades del ícono oculto
.show_hide_password	La clase que maneja las propiedades de la visibilidad del ícono
.fielderror	La clase que maneja el tamaño del texto de error.
.passwordpolicy	La clase que maneja la ventana emergente que contiene la política de contraseña.

Sección 4

IDs y clases CSS	Descripción
#cpassword	El ID que maneja el campo de entrada para confirmar contraseña.

Sección 5

IDs y clases CSS	Descripción
#nextbtn	El ID que maneja el botón de confirmación.

Sección donde el usuario final ingresa el CAPTCHA

Sección 1

IDs y clases CSS	Descripción
#headtitle	El ID que maneja los elementos de estilo presentes en el título del iFrame

Sección 2

IDs y clases CSS	Descripción
.user_info	La clase que maneja los elementos de estilo del borde del cuadro
.menutext	La clase que maneja el estilo del ID de correo electrónico del usuario

Sección 3

IDs y clases CSS	Descripción
.changeuser	La clase que maneja los elementos de estilo presentes en el literal "Change"

Sección 4

IDs y clases CSS	Descripción
#captcha_container	El ID que maneja el estilo del cuadro que rodea el cuadro de control de Captcha
.reload_captcha ::before	La clase que maneja el estilo del botón de recarga, antes de que se haga clic
.text_box	La clase que maneja las propiedades del campo de entrada

Sección 5

IDs y clases CSS	Descripción
.blue	La clase que maneja el esquema de color del botón y cuadro
.btn	La clase que maneja el tamaño del botón

Última actualización 2026-03-20 21:51:56 +0530 IST

Yes

Thank you for your feedback!

Send your feedback to us

Skip

Submit