6. Style & custom themes
Matthieu Stroh edited this page Sep 11, 2018
·
16 revisions
You can overwrite any variable in order to customize the default theme. The variable that you don't specify will default to the values bellow.
/* DEFAULT THEME CONFIG EXAMPLE */
// Lightbox
$lightbox-bgcolor : rgba(20, 20, 20, .925);
$lightbox-font : 'Arial', sans-serif;
$lightbox-fontsize : 15px;
$lightbox-mobile-breakpoint : 768px;
$lightbox-vspacing-mobile : 48px;
$lightbox-hspacing-mobile : 48px;
$lightbox-vspacing : 64px;
$lightbox-hspacing : 96px;
// Lightbox UI
$lightbox-ui-position : static;
$lightbox-ui-height : inherit;
$lightbox-ui-y : none;
$lightbox-ui-message-color : #b4b4b4;
$lightbox-ui-message-loader-color : #b4b4b4;
$lightbox-ui-message-error-color : #807f7f;
$lightbox-ui-close-content : 'x';
$lightbox-ui-close-width : 48px;
$lightbox-ui-close-height : 40px;
$lightbox-ui-close-position : absolute;
$lightbox-ui-close-x : right;
$lightbox-ui-close-y : top;
$lightbox-ui-close-inset-x : false;
$lightbox-ui-close-inset-y : false;
$lightbox-ui-close-order : 1;
$lightbox-ui-close-color : #ffffff;
$lightbox-ui-close-color-hover : #b4b4b4;
$lightbox-ui-next-content : '>';
$lightbox-ui-next-width : 48px;
$lightbox-ui-next-height : 40px;
$lightbox-ui-next-position : absolute;
$lightbox-ui-next-x : right;
$lightbox-ui-next-y : center;
$lightbox-ui-next-inset-x : false;
$lightbox-ui-next-inset-y : true;
$lightbox-ui-next-order : 4;
$lightbox-ui-next-color : #ffffff;
$lightbox-ui-next-color-hover : #b4b4b4;
$lightbox-ui-prev-content : '<';
$lightbox-ui-prev-width : 48px;
$lightbox-ui-prev-height : 40px;
$lightbox-ui-prev-position : absolute;
$lightbox-ui-prev-x : left;
$lightbox-ui-prev-y : center;
$lightbox-ui-prev-inset-x : false;
$lightbox-ui-prev-inset-y : true;
$lightbox-ui-prev-order : 1;
$lightbox-ui-prev-color : #ffffff;
$lightbox-ui-prev-color-hover : #b4b4b4;
$lightbox-ui-bulletlist-position : absolute;
$lightbox-ui-bulletlist-width : 100%;
$lightbox-ui-bulletlist-height : 40px;
$lightbox-ui-bulletlist-x : center;
$lightbox-ui-bulletlist-y : bottom;
$lightbox-ui-bulletlist-inset-x : true;
$lightbox-ui-bulletlist-inset-y : false;
$lightbox-ui-bulletlist-order : 2;
$lightbox-ui-bulletlist-bgcolor : #414141;
$lightbox-ui-bulletlist-bgcolor-active : #d4d4d4;
$lightbox-ui-bulletlist-bgcolor-hover : #919191;
$lightbox-ui-pagination-position : absolute;
$lightbox-ui-pagination-width : 100%;
$lightbox-ui-pagination-height : 40px;
$lightbox-ui-pagination-x : left;
$lightbox-ui-pagination-y : bottom;
$lightbox-ui-pagination-inset-x : true;
$lightbox-ui-pagination-inset-y : false;
$lightbox-ui-pagination-order : 3;
$lightbox-ui-pagination-color : #b4b4b4;
@import 'lightbox-novembre/src/assets/themes/default/sass/index';/** The import bellow are equivalent to importing the index file **/
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/config';
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/utils';
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/core';
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/components/layout';
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/components/ui-element';
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/components/ui-pagination';
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/components/ui-bulletlist';
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/components/ui-icon';
@import '@novembrecom/nlightbox/src/assets/themes/default/sass/components/ui-message';
// Overwrite rules here or replace entire files-
default- Default dark theme
You can start from scratch or simply copy the default theme @ @novembrecom/nlightbox/src/assets/themes/default