Este documento explica cómo personalizar la página de inicio, los temas y colores de Blackboard. Describe descargar el archivo JSP de inicio de sesión y modificarlo para cambiar el diseño sin afectar el formulario. También explica cómo descargar el tema predeterminado, modificar los archivos CSS y cargar el nuevo tema. Por último, detalla cómo personalizar los colores del banner y botones y asignar la nueva paleta de colores creada.

1. Marcas y Temas
En marcas y temas encontramos tres opciones a personalizar como son: Pagina de
inicio, Tema y colores y Personalizar colores.
Personalización de Blackboard
Personalizar la página de inicio de sesión:
Para personalizar la pagina de
inicio primero tenemos que
descargar el archivo jsp que es
la opción predeterminada del
sistema
1
1.1 1.1, Descargue de login.jsp
Tener presente los siguientes pasos, para que a la hora de cargar no presente ningún
inconveniente la plataforma
®

2. 1.2
No modificar el contenido que se
encuentra dentro de la clase clearfix
loginBody, ya que esta parte contiene el
formulario de registro, mensaje de error y
botones como olvido su contraseña
<div class="clearfix loginBody">
<loginUI:errorMessage />
<div id="loginBox">
<loginUI:loginForm />
</div>
<div id="loginOptions">
<loginUI:gatewayButtons />
</div>
</div>
<bbNG:cssBlock>
<style type="text/css">
</style>
</bbNG:cssBlock>
1.3
Podemos incluir los estilos de
nuestra diseño dentro del mismo
archivo login.jsp
Se guarda el archivo y
lo montamos en la
aparte de Utilizar
página personalizada y
damos enviar.
1.3, Formulario, Mensaje de Error y Olvido su Contraseña
<div id="loginPageContainer">
</div>
1.2, Mesa de Trabajo
1.5, Cargar login.jsp
1.4, Estilos
Trabajar siempre dentro del div
loginPageContainer este aparece
dentro del código
®

3. Temas y Colores2
Dentro de la carpeta core encontrará dos carpetas más una llamada
fonts y la otra images, también una serie de css los cuales serán los
que tendrá que modificar de acuerdo a la necesidad que se tenga.
Se descarga tema por defecto de la plataforma en: Administrador de
sistema > marcas y temas > Personalizar marca predeterminada.
Blackboard descarga un .ZIP el cual tendrá que
descomprimir.
Dentro de esta carpeta encontrará 2
carpetas más, una llamada core y la otra
plugins.
®

4. Para montar el nuevo tema va a la parte de Administrador del
sistema > marcas y temas > catálogo de temas y paletas, dentro de
esta se encuentra un botón que dice Crear tema.
En crear tema se encuentra tres campos obligatorios, Nombre de tema
Nombre de referencia, estos se pueden llamar de la misma manera.
Otro cambo obligatorio es Cargar archivo, en este seleccionamos el .zip
que realizamos anteriormente.
Luego de que realice los cambios dentro de los css en la carpeta de images
se toman las dos carpetas core y plugins, y se comprimen en un .zip,
(importante que se tomen la dos carpetas y se compriman en él .zip para
que la plataforma pueda subir el paquete.)
El .zip que comprima lo puede nombrar como desee
®

5. Podemos verificar que el tema se ha cargado correctamente porque lo
podemos observar dentro del Catálogo de temas y paletas.
Por último para aplicar el tema a la plataforma vamos a Administrador
del sistema> Marcas y temas > Personalizar marca
predeterminada. Aquí se encuentra la opción de seleccionar tema,
donde aparecen varias opciones, seleccionamos el tema que se ha
creado anteriormente.
Para finalizar le damos Aplicar todos los cambios.
Personalizar Colores2
Ingresamos a marca predeterminada > Personalizar colores
®

6. En la personalización de colores encontramos el banner y colores de los botones de la
parte superior
Marco de contenido este contiene el fondo de la parte interna de la plataforma
Aquí pueden ingresar una imagen de fondo
Cunado tengamos todos los colores personalizados lo que damos es guardar
como nueva paleta esto con el fin de poder cambiarlo sin problema.
®

7. Para finalizar y asignar la paleta de colores a nuestro skin vamos a:
temas y colores > seleccionar paleta de colores
Seleccionamos la parte inferior donde dice Biblioteca de paleta de colores
Escogemos la paleta que creamos
Para finalizar le damos en Aplicar todos los cambios
®