Versions Compared

Old Version 39

changes.mady.by.user Dries

Saved on

compared with

New Version Current

changes.mady.by.user Dries

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code snippets: Object recognition

Code snippets: Module introduction popup

Code snippets: Screensaver

Code snippets: Media browser

Code snippets: Interactive map (3D)

Code snippets: Digital label

Code snippets: File cards

Code snippets: Pages and backgrounds

Code snippets: Navigation page

Code snippets: Menu items

Code snippets: Basic variables

General

You can copy paste these code-snippits in your advanced theme settings. Follow these steps:

...

  1. Open Xperify (or preview it)

  2. Right-click on your page and choose ‘inspect’

  3. The inspector window opens

  4. Click on the button in the left corner

  5. Hoover over the element of Xperify that you want to change

  6. You can find now in the elements page of your inspector window the correct ID. Mostly mentioned as:

    1. .page.page--XXXX

    2. .page--XXXX module XXX

    3. .page-module

  7. In the right colom ‘styles’ you can find the same or other advanced code-snippits.

Code snippets

CSS Variables

CSS Variables can be used to insert the value of a custom property. You can use these anywhere in your custom styling. Some examples:

Code Block
:root {
    // margin between items in digital labels (use at own discretion)
    --margin-dl-items: 30px;  
    --dynamic-margin-dl-items: 30px;
    
    //
    --blue: #004FA3;
    --pink: #E4017E;
    --green: #124F3E;
    --grey: #D4D4D5;
    --lightgrey: #F4F4F4;
}

Base Color

In Themes it is possible to use a Base Color. We made it very easy to access that colour in your custom CSS. Some examples below:

Code Block
languagecss
.selector {
  color: var(--c-accent);
  background-color: var(--green);
  border-color: var(--pink);
}

Base Color - Blend

Besides the Base Color variable, it is possible to use the variable --c-accent-blend. This color is based on the Base Color and is an 'inverse' color.

When your Base Color is a darker color, the blend will show white.

When your Base Color is a lighter color, the blend will show black.

See the example below.

Code Block
.selector {
  fill: var(--c-accent-blend);
}

...

Other variables

Code Block
languagecss
:root {
  --margin-dl-items: 42px; // change the spacing between  
  --dynamic-margin-dl-items: 42px;
}

We made a variable for the margin between grid items in the Digital Label module.

Before:

...

After:

...

Navigation page - Mediabrowser tiles

  1. Remove icon from menu item

    Code Block
    .gridItem__icon {
    display:none;
}

  2. Remove colored overlay from menu item

    Code Block
    languagecss
    .gridItem__image {
    opacity: 1;
}

  3. Change border-radius menu

    Code Block
    .OcuDarcula .gridItem, .OcuLight .gridItem,
.OcuDarcula .gridItem__image, .OcuLight .gridItem__image {
    border-radius: 2%;
}

  4. Remove the Basecolor background

    Code Block
    .gridItem {
  background: none | white;
}

  5. Change the background to a color

    Code Block
    .gridItem  {
    background: #E7EAED;
}

/* change the background for a specific item */
.gridItem:nth-child(2) {
    background: red;
}

  6. Change the background to an image
    Use the module ‘asset bundle’ if you want to upload your images in Ocularium: https://ocular.atlassian.net/l/c/ymc8q9Xg

    Code Block
    .gridItem  {
    background-image: url("https://via.placeholder.com/400");
    background-size: contain;
    background-position: center center;
}
.gridItem__image {
  display: none;
}

/* change the background for a specific item */
.gridItem:nth-child(2) {
    background-image: url("https://via.placeholder.com/400");
    background-size: contain;
    background-position: center center;
}
.gridItem__image {
  display: none;
}

  7. Adjust the background color of a menu title

    Code Block
    .gridItem__title p {
    background-color: #3C9B28;
    // add more options here
}

  8. Place the title under the image

    Code Block
    // add some margin 
.gridItem {
  margin: 3em 2em;
}
.gridItem__title {
    height: 10;
    bottom: -10%;
    // add more options like...
    font-weight: bold;
    color: black;
    white-space: normal;
}

// align text to top line
.gridItem__title p {
    top: 0;
    transform: translateX(-50%);
}

Menu

  1. Change the color of the Application title

    Code Block
    .menu__title {
    color: #224190;
}

  2. Change the color of the button icons (back arrow, home button, etc)

    Code Block
    .menu__button {
    fill: red;
}

  3. Change the color of the Breadcrumb border

    Code Block
    ul.menu__breadcrumbs li .menu__breadcrumb__item__label {
    border-color: red;
}

File Cards

  1. Change the border-radius of a file card

    Code Block
    .OcuDarcula .card__wrapper,
.OcuLight .card__wrapper {
  border-radius: 0px;
}

  2. Change a corner of a file card

    Code Block
    .OcuDarcula .card__wrapper,
.OcuLight .card__wrapper {
  border-top-left-radius:     5px;
  border-top-right-radius:    10px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius:  5px;
}

  3. Change the background color of a file card

    Code Block
    .OcuDarcula .card__wrapper,
.OcuLight .card__wrapper {
  background: red;
}

  4. Remove the title of a file card

    Code Block
    .card .card__header__title {
  display: none;
}

  5. Remove the line under the title of a file card

    Code Block
    .card .card__body__tabs__title {
  border: none;
}

  6. Remove the tabs when there’s only one tab present

    Code Block
    .card__body__tabs__title:first-child:nth-last-child(1) {
    display: none;
}

  7. Enlarging an asset to half the size of a file card (TEMPLATE)

    Code Block
    .OcuDarcula .page.page--dl .dl__card,
.OcuLight .page.page--dl .dl__card {
    background: rgba(10, 25, 64, 0.36);
}
.OcuDarcula .card .card__wrapper,
.OcuLight .card .card__wrapper {
    width: 87%;
    height: 82.4%;
    border-radius: 0;
    padding: 1.5% 3%;
}
.card .card__body {
    height: 82%;
}
.card__close {
    z-index: 2;
}
.card .card__wrapper .card__header {
    position: absolute;
    width: 45%;
}
.card .card__wrapper .card__header .card__header__title {
    text-align: left;
}
.card .card__header__sub {
    text-align: left;
}

.card .card__wrapper .card__body__tabs {
    position: absolute;
    width: 45%;
    top: 20%;
}
.card__wrapper .card__body__tabs .card__body__tabs {
    border-bottom: none;
}
.card__wrapper .card__body__content {
    width: 100%;
    height: 100%;
    margin-top: 12%;
    padding: 4% 0;
}

.card .card__body__content__container {
    margin: 1% 0;
}
.card__wrapper .card__body__content .card__body__content__container__text {
    width: 96%;
    font-size: 1em;
}
.card__wrapper .card__body__content .card__body__content__media {
    position: absolute;
    top: 0;
    left: initial;
    right: 0;
    width: 50%;
    transform: none;
    background: lightgray;
    margin: 0 0;
}
.card__body__content__media .media .media__element{
    object-fit:cover;
}

.card__body__content__media .media__enlarge.button {
    left: 2%;
    right: initial;
}

  8. Add styling to a specific file card based on its ID

    Code Block
    languagecss
    .card--4 {
  // add styling here
}

  9. Change the font of the body text

    Code Block
    /* create a font-family */
@font-face {
    font-family: "myCustomFont";
    src: url('url-to-font.otf');
}

.card__body__content__container__text  {
  font-family: "myCustomFont";
  font-size: 42px;
  color: red;
}

  10. Change the font of the title

    Code Block
    /* create a font-family */
@font-face {
    font-family: "myCustomFont";
    src: url('url-to-font.otf');
}

.card .card__wrapper .card__header .card__header__title {
  font-family: "myCustomFont";
  font-size: 42px;
  color: red;
}

Pages and backgrounds

...

  1. Add a background image to a navigation page

Use the module ‘asset bundle’ if you want to upload your images in Ocularium: https://ocular.atlassian.net/l/c/ymc8q9Xg

Code Block
// replace '1234' with the correct id (as seen in Developer Tools)
.page--nav--1234 {
  background-image: url("https://via.placeholder.com/1920x1080");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

2. Add a background to a module

Code Block
// replace '1234' with the correct id (as seen in Developer Tools)
.page--1234 {
  background-image: url("https://via.placeholder.com/1920x1080");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

Interactive map / 3D interactive map

  1. Hide the categories at the top

    Code Block
    .im__filters__categories {
  display: none;
}

  2. Hide the '? - info' button

    Code Block
    .im__button.im__button--info {
    display: none;
}

Popups interactive map

  1. Straighten the corners of a custom card

    Code Block
    .OcuDarcula .page.page--im .pointerPopup,
.OcuLight .page.page--im .pointerPopup {
  border-radius: 0px
}

  2. Remove the ‘pin - reset popup’ symbol

    Code Block
    .pointerPopup__header__button.pointerPopup__header__button--reset.button {
    display: none;
}

  3. Remove the line (divider) under the text and above the image

    Code Block
    .divider {
  display: none;
}

  4. Remove the thick line under the title

    Code Block
    .pointerPopup__content .pointerPopup__content__tabs .pointerPopup__content__tab {
    border: none;
}

  5. Change the color of the thick line under the title

    Code Block
    .pointerPopup__content .pointerPopup__content__tabs .pointerPopup__content__tab.pointerPopup__content__tab--active {
    border-color: green;
}

  6. Change the color of the icons in the header (reset, close)

    Code Block
    // in this case we specifically change it for the close button
.OcuLight .page.page--im .pointerPopup .pointerPopup__header__button--close {
  fill: red;
}

Digital label

...

Straight corners for digital label

Code Block
.OcuLight .page.page--dl .dl__grid__item,
.OcuLight .page.page--dl .dl__grid__item__face {
  border-radius: 0px;
}

...

Remove shadow around corners of a digital label

Code Block
.dl__grid__item__face__image,
.OcuLight .page.page--dl .dl__grid__item__face,
.OcuLight .button.dl__grid__item__open {
    border-radius: 0px;
}

...

Change the ‘visited’ state of items. A value between 0 and 1

Code Block
.dl__grid__item--visited .dl__grid__item__face--front, 
.dl__grid__item--visited .dl__grid__item__face__image, 
.dl__grid__item--visited .dl__grid__item__face__image img {
    opacity: .75;
}

...

Add a border to items in a digital label

Code Block
.dl__grid__item {
    border: 5px solid red;
}

Media browser

  1. Remove round corners for media browser items

    Code Block
    .OcuLight .gridItem__image,
.OcuLight .gridItem,
.OcuDarcula .gridItem__image,
.OcuDarcula .gridItem {
    border-radius: 0px;
}

Screensaver

  1. Delete the opacity of a screensaver overlay

    Code Block
    .ss__background__overlay {
    display:none;
}

  2. Adjust the opacity of a screensaver overlay

    Code Block
    .ss__background__overlay {
    opacity: .3; /* with this you set the transparency of the layer in screensaver */
}

Module introduction

...

  1. Straight corners

    Code Block
    .OcuDarcula .alert__wrapper, .OcuDarcula .card__wrapper,
.OcuLight .alert__wrapper, .OcuLight .card__wrapper {
  border-radius: 0px;
}

  2. Straight corners the button

    Code Block
    .OcuLight .button.dl__alert__close {
  border-radius: 0px
}

  3. Change the background color

    Code Block
    .OcuDarcula .alert__wrapper, .OcuDarcula .card__wrapper,
.OcuLight .alert__wrapper, .OcuDarcula .card__wrapper {
  background-color: red;
}

Object Recognition

Change the default color of the arcs of a tag

...

languagecss

...

Kiosk

Shortcut commands

The packaged Electron application runs in fullscreen kiosk-mode meaning that standard keyboard shortcuts won't work.

To open the devtools:

ctrl + shift + x or command + shift + x

o refresh the browserwindow:

ctrl + shift + r or command + shift + r

To open the Ocularium-file:

ctrl + shift + o or command + shift + o

To open system information:

ctrl + shift + i or command + shift + i

To quit the Electron process entirely:

ctrl + shift + q or command + shift + q