Settings Section Name

Description

GENERAL

This section contains the general settings of the theme, where you can edit its name, description, theme preview image, library (if any is published), save and publish the theme, and preview how the theme is going to look is applied to your Self-Service Portal. All these settings become available when you expand the GENERAL section and select the Theme Info option, as shown in Figure 8 above.

THEME FILES

This is the place where all configuration files of your theme are stored. This section is expandable/collapsible and opens/hides 4 (four) smaller sections.

Routes

This section contains subsections that correspond to your SSP’s pages, in our case - 404 (Page not found), Article (Article page), Folder (Folder page), Home, and Search. Each page-specific subsection in its turn has two files that define: index.jsx - an entry point to make your portal work properly by mapping the routes for the page and generating the relevant URLs, and styles.css - a collection of definitions for the page styles.

You can make changes to the index.jsx file to change various page-specific settings: edit layout of the page (display or hide certain components), reroute the page to show different icons, change the size of the icons, change the colors etc. All this needs to be done by editing the source code in JSX format which is a HTML-like syntax of JavaScript used to create React components: 

<>
 <HTMLComment text="API - Folder Route" />
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />
 <main className={'Page'}>
   <Layout withSidebar={true}>
     <div className={"PageHolder"}>
       <h1 className={'H1Bold'} role="heading">{RouteData.currentPageGem.title}</h1>
       {RouteData.currentPageGem.description.length > 0 && <p className={'Description Description--folder'}>{RouteData.currentPageGem.description}</p>}
       {RouteData.topFoldersWithChildren.length === 0 && RouteData.topArticles.length === 0 && (
         <div className={'EmptyFolderWithIcon'}>
           <ColoredIcon
             icon={'folder'}
             iconSize={'65px'}
             holderSize={'65px'}
             color={'#606d84'}
           />
           <span className={'EmptyFolderSign'}>
           <I18NT t={'ssp-app.folder.noContent'} />
         </span>
         </div>
       )}
       <TopArticles />
       <TopFolders twoFolders={true} />
     </div>
     <RightSection />
   </Layout>
 </main>
</>

Components

This section stores the settings for all components available on your SSP pages. 

Each of the components also has two defining files, the index file that defines routing and various other settings of the component, and the styles file that defines how the component is styled on the page and in respect to other components. The settings in the index file are represented as the source code in JSX format which is a HTML-like syntax of JavaScript used to create React components.

In the Components section, you can also create new components and delete the existing ones if you no longer need them.

To create a new component, click the plus (+) icon next to the section name and then in the appearing field enter the name for your new component and click the save icon.

You can create as many components as you want, if the theme size does not exceed 6 Megabytes. Maximum length of the component name must not exceed 25 characters.

Once the component is created, it is displayed in the sidebar and can be edited, that is you can enter the respective defining source code in the index and styles files.

You can also delete a component when you don’t need it. To do so, hover over the name of the needed component to show the delete icon and then click it.

Confirm your decision to delete the component in the confirmation popup window. 

Once done, the component is put to the deletion queue and becomes deleted only when the theme is saved.

i18n

This section contains localization files for your custom theme. It can help you adapt the theme to different markets of your visitors/customers. Note that the supported languages for the custom theme localization are only those which are enabled in the Customize section of the Shelf Admin panel. In our exemplary case, these are English, German, and Spanish.

You can add the theme localization file by clicking the plus (+) icon next to the section name and then selecting the needed language from the dropdown list.

Once the new localization file is created, it is displayed under the section name, and you can enter the respective localization configuration in the JSON format.

You can also delete no longer needed localization files in this section. To do so, hover over the relevant file to reveal the delete icon and click it. Then confirm your choice in the popup window that appears. Note that the file is not deleted unless you save the theme.