Did you know that you can change how Labelsadmin looks?
By modifying the CSS information (see Labelsadmin-Settings-Miscellaneous) you set your own fonts, colours etc.
Example - This CSS makes the Labelsadmin green and changes the font:
@import url(‘https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap’);
:root {
–rexbg: #10a6a1;
}
#sidebar {
background-color:var(–rexbg) !important;
}
.bg-dark {
background-color:var(–rexbg) !important;
}
body.admin {
font-family:“Oswald” !important;
font-size:20px !important;
}
The result:
All CSS settings can be found in https://obj.blippa.com/static/CACHE/styles.css
Note: You can try using an AI to make your own CSS, give it the info in the CSS link as a starting point.
I tried to make a Christmas theme using Google Gemini.
I provided the CSS above and asked Gemini to ”generate a css with a Christmas theme, Here is the original CSS”.
The result:
@import url(‘https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap’); /* — Christmas Red Theme Variables — */ :root { /* Replaced #10a6a1 (teal) with #A50024 (deep Christmas Red) */ --rexbg: #A50024; /* Adding a secondary Christmas Green for accents */ --rexaccent: #0B4C38; } /* Sidebar Background */ #sidebar {background-color: var(–rexbg) !important; /* Adding a subtle border for extra festive contrast */ border-right: 5px solid var(–rexaccent); } /* General Dark/Primary Backgrounds (e.g., headers, navbars) */ .bg-dark { background-color: var(–rexbg) !important; color: #FFFFFF; /* Ensure text on this red background is white */ } /* Admin Body Text Styling (Keeping the original font/size) */ body.admin { font-family: “Oswald” !important; font-size: 20px !important; /* Setting the main body background to white for contrast */ background-color: #FFFFFF; } /* Example: Styling links or elements inside the sidebar for readability */ #sidebar a { color: #FFFFFF !important; /* White links */ } #sidebar a:hover {background-color: var(–rexaccent) !important; /* Green hover effect */ }
If you would like to make some effects on the Blippa object pages, you can do that Labelsadmin-Settings-Page Design-Advanced-CSS
By adding this CSS you will get bubbles (See the flavor Blaster sample) :
.bubbleWrapper {
position: absolute;
animation: spawnBubble 20s forwards;
}
.bubble {
border-radius: 50%;
box-shadow: 0 5px 7.5px rgba(0, 0, 0, 0.2), inset 0px 2.5px 7.5px 1.25px rgba(255, 255, 255, 1);
height: 50px;
width: 50px;
pointer-events: none;
z-index: 0;
animation: bubbleSpawn 0.2s forwards;
}
.bubble:after {
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
box-shadow: inset 0 5px 7.5px rgba(255, 255, 255, 0.3);
content: “”;
height: 45px;
left: 2.5px;
position: absolute;
width: 45px;
}
@keyframes spawnBubble {
0% {
transform: translateY(0vh);
opacity: 1;
}
90% {
transform: translateY(-80vh);
}
95% {
transform: translateY(-85vh);
}
100% {
transform: translateY(-90vh);
opacity: 0;
}
}
@keyframes bubbleSpawn {
0% {
transform: scale(0);
}
100% {
transform: scale(var(–initial-scale));
}
