Hoja de Estilos

En esta pantalla se muestra una cabecera con los siguiente botones:

Botones de acción

Volver: Nos devuelve al listado de plantillas.

Guardar: Guarda los cambios que se hayan realizado en esta pestaña. Los cambios que vaya realizando en la plantilla no serán visibles en el Portal de Empleo hasta que no realice la acción de Publicar. Solo serán visibles a través de la pestaña Previsualizar, ya que mientras usted está editando la plantilla todos estos cambios se guardan pero no se publican.

Publicar: Guarda los cambios que se hayan realizado en esta pestaña y publica la plantilla. Lo que nos muestra la siguiente pantalla de confirmación

Mensaje de alerta de publicación

La pestaña de Hoja de Estilos está compuesta por un solo campo. Este campo no es mas que un editor de hoja de estilos donde podemos diseñar y mediante Código CSS podemos darle el formato y el diseño que queramos a nuestro Portal de Empleo.

Aquí un ejemplo de la clases de la hoja de estilos:

.filter-wrapper{
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #252a3c;
color: #fff;
}

.btn-submit,
.btn-submit:hover,
.btn-submit.btn-primary.active, .btn-submit.btn-primary:active,
.btn-submit.btn-primary.focus, .btn-submit.btn-primary:focus,
{
background-color: #23c0e9;
}

.btn-clear,
.btn-clear:hover,
.btn-clear.btn-default.active, .btn-clear.btn-default:active,
.btn-clear.btn-default.focus, .btn-clear.btn-default:focus {
background-color: #f36969;
border: 1px solid #f36969;
color: #fff;
}

.list-group-item {
margin: 15px 0px;
}

.sticky-container{
padding-bottom: 10px;
}

.label-sticky
{
background-color:#f39c12;
}

.content-wrapper{
background-color: #ffffff;
padding-top: 40px;
padding-bottom: 40px;
}

.list-group-item{
padding: 15px 20px;
}

a.list-group-item:hover{
border-color: #c0c0c0;
background-color: #fafafa;
cursor: pointer;
}

.list-group-item-heading {
font-weight: bold;
}

ul.header-listing,
ul.footer-listing{
padding: 0;
margin: 10px 0;
}

ul.header-listing li,
ul.footer-listing li{
display: inline-block;
font-size: 0.8em;
color: #337ab7;
font-weight: bold;
}

ul.header-listing li:not(:last-child):after,
ul.footer-listing li:not(:last-child):after {
content: «|»;
padding-right: 5px;
padding-left: 10px;
}

.job-wrapper h2{
margin-top: 0;
font-weight: bold;
font-size: 18px;
}

.job-detail-wrapper h4{
font-weight: bold;
font-size: 14px;
color: #337ab7;
}

.job-detail-description{
white-space: pre-line;
}

.form-group.required .control-label:after {
content:» *»;
color:red;
}

Modificando los valores de estas clases podemos personalizar y modificar el diseño de nuestro Portal de Empleo.