Siberian CSS Codes Collection Module

This is a complete overview of CSS Codes Collection Module.

As you know, your users can customize the app using CSS, but the majority of users are not familiar with CSS. This module is developed with an aim to solve this problem by providing CSS Codes Collection into Siberian Editor with CSS Code Title, Description, Image, CSS Code Preview & Click to copy button. You can add CSS Codes from the back office module and it will be shown into the editor module.

Give your users an easy way to copy-paste ready-made CSS codes!

What you can do with this module?

  • You can manage & display Siberian CSS Codes into editor using this module with title, description, preview image, code preview & copy to clipboard, search, sort, filter, category, sub-category, pagination etc.
  • You can restrict the access of the editor module using User roles. So only users with particular user roles can access the module.
  • You can even restrict the access of premium codes using User roles. So only users with particular user roles can view or copy the premium codes. This will be useful if you want to give your users some free codes and want to charge for premium codes. You can display your contact form or payment form link as contact info message.
  • You can add CSS codes from the backoffice.
  • You can bulk import our free & paid CSS codes using JSON URL.
  • You can manage order ids of the codes manually and arrange it automatically using drag & drop.
  • You can do edit, delete, search by title, enable / disable – drag & drop etc. from the backoffice.
  • You can manage editor module CSS file from the backoffice. This will be useful if you want to change button color, borders etc. using CSS into editor module.
  • You can customize the contact info message from the backoffice. This will be useful if you have restricted the access of premium codes, so users can know how to contact you.

Editor Module:

List of all CSS Codes: Here in editor all of your CSS Codes will be shown in the data table with ID, title, category, sub-category and view button. Users can search through table, apply category filter, free & premium filter, sort by clicking on up/down arrows, pagination, customize the number of entries shown into page like 10,25,50,100.

Popup Preview: On click of a view button, code details will be shown with title, description, image, CSS Code preview & copy to clipboard button etc.

Premium Codes Restriction: Code preview & copy button access will be disabled If premium codes access is restricted. It will display a contact info message.

Backoffice Module:

Add New CSS Code: Here you can add new CSS code. Fill form details like title, choose type (Free / Premium), order ID, chose category (Layouts / Features / General), sub-category, image link, description, CSS code and then click on Add button.

Bulk Import CSS Codes using JSON URL: Here you can bulk import our CSS codes using JSON URL. We have provided 2 JSON URLs for 15 FREE CSS Codes & 22 FREE CSS Codes in the module. You can purchase more premium CSS Codes here.

CSS Codes Collection: Here is a whole list of your CSS codes with search, edit & delete options. Here you can enable drag and drop for table rows to re-arrange order IDs. 

Edit Details: Here you can edit code details like title, type, order ID, category, sub-category, description, image link, CSS code etc.

CSS File for customizing the editor: You can also style the CSS Codes Editor Module using the CSS. It means you can change button color scheme, borders etc. in to the editor module using this CSS file directly.

Customize Contact Info Message: This info message will be shown to users if premium codes access restriction is applied. Here you can customize it using HTML, so you can display your contact or payment form link etc.


You can check a live demo of the editor module here: 

Login details:


Password: pwademo123

After a login, open any app and go to Left Side Menu > Modules >  CSS Codes


(1) Can I re-arrange order IDs up or down?

Yes, you can do it automatically just by drag and drop of table rows & manually by editing code details Order ID.

(2) Can I get any FREE CSS codes with this module to get started?

Yes, we have provided 2 JSON URLs in this module which has 15+22=37 FREE CSS codes. You can bulk import these CSS Codes, Click on “Click here to bulk import CSS Codes using JSON URL” and put JSON URL in the input field and then after click on “Import” button.

(3) How can I restrict the access of an editor module / premium codes using user roles?

You can do it by going to your Siberian Backoffice > Manage > Editor Access > Roles.

Here add/edit your user roles, you will find two types of our access settings under manage access: CSS Codes (For the access of an editor module) & Access Premium CSS Codes. (For the access of premium CSS Codes)

(4) What’s the purpose of premium codes access restriction?

By using it, you can offer CSS Codes to your users as a freemium model. It means your users can access the editor module, can view all the codes title, description, images but they can’t view / copy CSS code which are premium. They can only view / copy CSS code which are FREE. So here is an opportunity for you to charge your users to unlock the access of premium codes.  Note that we don’t provide any payment or billing facility in this module. You can display your contact or payment form link as a contact info message and charge your users yourself.