Basic theme setup guide

This document describes basic/general  setup options applicable to any SkaDate theme

Requirements: prepared graphical assets and selected colors
Requirements for CSS changes: basic CSS skills

 

Table of Contents:

Installing and activating desired theme
General Settings
Colors
Mobile
CSS
Graphics
Index page customizer

Theme Customization: Installing and activating desired theme
  1. Go to Admin Panel >> Appearance >>Themes. Here you can see all pre-installed themes. To activate theme
    1. Click theme's thumnail >> click "Activate"  under "Theme info"                                                    
  2. To install new themes refer to theme installation guide

Theme Customization: General Settings

  1. Go to Admin Panel >> Appearance >> Customize >> "Theme Settings" tab
  2. Under "1. General Settings" upload prepared graphical assets >> save changes. Each theme allows uploading different assets. Basic assets  include: 
    1. Logo image ( index, inner and/or console).
      1. Index logo: displayed at https://yourdomain_here/index . Ex: https://demo.skadate.com/index/  Showcase: index logo in Morning theme 
      2. Inner logo:  displayed on all pages except /index and blank pages. This includes pages like join, dashboard, terms of use. privacy and etc. Ex: https://demo.skadate.com/join. Index and inner logo can be same image. Depend on your artwork. Showcase: inner logo in Morning theme
      3. Console logo:  displayed in upper left corner of all site pages in an area called "Console". Showcase: console logos in Platinum Pro      
    2. Background image ( index, inner and/or header)
      1. Index page background image: displayed at https://yourdomain_here/index . Ex: https://demo.skadate.com/index/  
      2. Inner/page/header background image: displayed on all pages except /index and blank pages. This includes pages like join, dashboard, terms of use. privacy and etc. Ex: https://demo.skadate.com/join. Index and inner/header image can be same. Depends on your artwork.


Theme Customization: Colors

  1. Go to Admin Panel >> Appearance > Customize >> "Theme Settings" tab
  2. Under "1. General Settings" and "2. Colors" select desired colors by entering color hex if you know it (use tools like: https://htmlcolorcodes.com/) or clicking color picker square box. Each theme allow selecting colors for various features. Basic features include: text color, links and main menu. Make sure to save your changes.                                                           

Please note that certain website elements have their own, superior layout properties  that can not be overwritten by admin panel settings  to keep design integrity in place. In a situation when element color can be overwritten by admin panel settings, use custom CSS instead. 

Theme Customization: Mobile

Mobile version - is website version adjusted to work in mobile browser both in terms of design and features. It is recommended to upload the logo and select colors for mobile version, even if you will not be using it. Mobile version opens automatically if you visit your site from a mobile browser. Please note that in case if you have web apps ( PWA) installed - PWA replaces the mobile version. 

  1. Go to Admin Panel >> Appearance > Customize >> "Theme Settings" tab
  2. Under "3. Mobile" upload your logo and select desired colors for mobile version >> save changes.

Theme Customization: CSS

This section allows assigning custom design properties to almost all website elements.

  1. Go to Admin Panel >> Appearance > Customize >> "CSS" tab. There will be 2 blocks:
    1. Existing CSS Styles (read only): default CSS that comes with activated theme
    2. Edit CSS: here you can re-write default CSS using your custom properties. Usage examples:

Theme Customization: graphics

This section allows uploading images and using links to uploaded images in custom CSS or HTML.

  1. Go to Admin Panel >> Appearance > Customize >> "Graphics" tab
  2. Click "Upload photos" >> select and upload desired images
  3. After image is uploaded use "Copy URL" link to copy image URL for future use.
  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

Supplementary guide 1: items to prepare for basic theme setup

This document describes items to prepare for Basic Theme Setup:  Required: select theme to use...

Supplementary guide 2: Platinum Pro theme setup

This document describes Platinum Pro theme setup.Requirements: prepared graphical assets and...

Supplementary guide 3: common CSS changes

This document describes basic CSS changes applicable to almost any SkaDate theme. CSS descibred...

Supplementary guide 4: index page customizer

This document describes index page (https://[your_site_URL]/index) customizations options...