Own stylesheet (Custom CSS)

With the Custom Stylesheet feature, you can add custom CSS to both your online shop and your admin backend. It's ideal for design adjustments like changing colors, fonts, margins or hiding elements - without changing theme files.

How to add CSS

1. Go to Company in the menu
2. Click on Custom stylesheet
3. Enter your CSS code in the text field
4. Click Save

Your CSS will be loaded after the existing stylesheets, so your rules will overwrite the default styles. This applies to both the shop front page and the admin panel.

Online shop customizations

Here are examples of typical webshop front page customizations:

Change the background color of the header:

header { background-color: #1a1a2e; }

Change the font:

body { font-family: 'Georgia', serif; }

Hide an element on the front page:

.element-class { display: none; }

Admin customizations

You can also use the Custom Stylesheet to customize the appearance of the admin panel. Below you will find a complete overview of the CSS classes and IDs you can use.

Order list - CSS classes on order rows

Each order row in the order list has a number of dynamic CSS classes that you can use to style orders based on their status, payment and delivery method.

Payment status

Example - Red background on unpaid orders:

.unpaid { background-color: #ffe0e0 !important; }

Order status

The status of the order row is added directly as a class:

Example - Green background on sent and paid orders:

.paid.sent { background-color: #ddffeb !important; }

Example - Grayed out display of canceled orders:

.cancelled { background-color: #eee !important; opacity: 0.7; }

Delivery method

The delivery method name is automatically converted to a CSS class. All letters become lowercase and special characters are replaced with underscore. For example, "Home address with GLS" becomes the class .home_address_with_gls.

Example - Color mark orders by delivery method:

/* GLS orders with orange background */ .home_address_with_gls { background-color: #fff3e0 !important; } /* PostNord orders with blue background */ .postdanmark_to_home_address { background-color: #e3f2fd !important; }

Payment gateway

Each order line gets a class based on the payment gateway ID in the format .payment-{ID}. To find the ID, go to Settings → Payment gateways and see the URL when you click edit.

Example - Green background for orders paid with a specific gateway:

.payment-{id} { background-color: #c8e6c9 !important; }

Other order line classes

Example - Highlight EAN orders:

.ean { background-color: #c2caff !important; }

Order details - classes in the expanded view

When you click on an order in the list, order details are shown with these classes:

Order content

Stock status

Example - Red text on items that are not in stock:

.itemsnotinstock { color: #ff0000 !important; font-weight: bold; }

Buttons in the order list

The buttons in the order list have fixed IDs that you can style:

Primary buttons

Shipping buttons

Example - Highlight the print button:

#btn-print { background-color: green !important; color: white !important; }

Example - Hide shipping buttons you don't use:

#btn-swipbox, #btn-gls { display: none !important; }

Webshop-specific styling

If you manage multiple webshops from the same company, you can style the admin differently per webshop. The body element has the class webshop{ID} where ID is the webshop ID number.

Example - Different header color per webshop:

/* Your first webshop - red header */ body.webshop{id} nav.top-app-bar { background-color: #ad3c3c !important; } /* Your second webshop - blue header */ body.webshop{id} nav.top-app-bar { background-color: #2a50a6 !important; }

Layout and navigation

Example - Change the color of the left menu:

.drawer-light .drawer-menu .nav-link { color: #333 !important; } .drawer-light .drawer-menu .nav-link:hover { background-color: #f0f0f0 !important; }

Other useful elements

Popular use cases

Color coding of the order list

A popular setup is to color code the order list so you can quickly distinguish between paid/unpaid orders and different statuses:

/* Unpaid orders in light red */ .unpaid { background-color: #fff0f0 !important; } /* Paid and sent orders in light green */ .paid.sent { background-color: #f0fff0 !important; } /* Cancelled orders grayed out */ .cancelled { background-color: #f5f5f5 !important; opacity: 0.6; } /* EAN orders in light blue */ .ean { background-color: #f0f4ff !important; }

Highlight important action buttons

/* Green print button */ #btn-print { background-color: #28a745 !important; color: white !important; } /* Green GLS button */ #btn-gls-api { background-color: #ff9800 !important; color: white !important; }

Make the order list wider

.container-fluid { max-width: 100% !important; }

Clearly mark items not in stock

.itemsnotinstock { color: #ff0000 !important; font-weight: bold; font-size: 1.1em; }

How to find the right CSS selector

To find the exact class or ID of an element:

1. Right-click on the element in your browser
2. Select Inspect element (Inspect)
3. Find the class (e.g. class="unpaid sent") or ID of the element
4. Use the class or ID as a CSS selector in your stylesheet

Major design changes

Custom Stylesheet is suitable for minor customizations. For larger design changes, it is recommended to edit the theme files themselves via SFTP. See the article Log in with SFTP to get started.

CSS cheat sheet

Here's a quick overview of the most commonly used CSS properties so you can get started without having to look it up.

Colors

Colors can be specified as names, hex codes or RGB:

/* Hex code (most commonly used) */ color: #ff0000; /* Red text */ background-color: #f0f0f0; /* Light grey background */ /* Color names */ color: red; background-color: white; /* RGB with transparency */ background-color: rgba(0, 0, 0, 0, 0.1); /* Black, 10% visible */

Useful color codes:

Font (font-family)

/* Change font */ font-family: 'Georgia', serif; font-family: 'Arial', sans-serif; font-family: 'Courier New', monospace; /* Google Fonts (add import at the top of your stylesheet) */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); font-family: 'Open Sans', sans-serif;

Text

font-size: 14px; /* Text size */ font-weight: bold; /* Bold text (or 400, 600, 700) */ font-style: italic; /* Italic */ text-align: center; /* Centered (left, right, center) */ text-decoration: underline; /* Underline */ text-transform: uppercase; /* Capitalization (lowercase, capitalize) */ line-height: 1.5; /* Line-spacing */ letter-spacing: 1px; /* Letter-spacing */

Background

background-color: #f0f0f0; background-image: url('https://example.com/bg.png'); background-size: cover; /* Fill entire area */ background-repeat: no-repeat;

Borders (border)

border: 1px solid #ccc; /* Border around entire element */ border-bottom: 2px solid #333; /* Bottom border only */ border-left: 4px solid #28a745; /* Green left border */ border-radius: 8px; /* Rounded corners */ border: none; /* Remove border */

Spacing (margin and padding)

/* Padding = inner spacing */ padding: 10px; /* All sides */ padding: 10px 20px; /* Top/bottom, left/right */ padding-left: 15px; /* Left only */ /* Margin = outer spacing */ margin: 10px; /* All sides */ margin-bottom: 20px; /* Bottom only */ margin: 0 auto; /* Center an element */

Show/hide

display: none; /* Hide completely (does not fill) */ visibility: hidden; /* Invisible (still fills) */ opacity: 0.5; /* Semi-transparent (0 = invisible, 1 = full) */

Size

width: 100%; /* Full width */ max-width: 800px; /* Maximum width */ height: 50px; /* Fixed height */ min-height: 200px; /* Minimum height */

Shadows

box-shadow: 0 2px 4px rgba(0,0,0,0,0.1); /* Soft shadow */ box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Heavy shadow */ box-shadow: none; /* Remove shadow */

Do you need help? Contact us at support@shoporama.dk.