Theme File

The Theme File contains all the specs of the theme. 
 
The Theme File has the following features:
  • The file name is the same as the theme name.
  • It is a text file in JSON format (key: value)
  • The file extension will be .json
  • The Theme File name will have the form: themename.json
  • It is a file with a strict structure, simple and well defined.
  • The file consists of six sections:
    • Theme
    • Header
    • Background
    • Color
    • Job
    • Promotion
 

Theme Section

 
This section consists of only one property.
 

Property

  • Theme - Take the theme name as value.
 
"Theme": "Woodlight"
 

Header Section

 
This section consists of an array of objects representing one or more images that we wish to configure as the header of the website.
 

Properties

  • Title - Take a descriptive name of the Theme Header Image as value.
  • Image - Take the file name the Theme Header Image as value.
 
"Header": [
    {
      "Title": "Woodlight_default",
      "Image": "header_woodlight_default.png"
    },
    {
      "Title": "Woodlight_blue",
      "Image": "header_woodlight_blue.png"
    },
    {
      "Title": "Woodlight_yelow",
      "Image": "header_woodlight_yelow.png"
    }
  ]
 

Background Section

 
This section consists of an array of objects that represent one or more images that we want to configure as the background of the website.
 

Properties

  • Title - Take a descriptive name of the Theme Background Image as value.
  • Image - Take the file name the Theme Background Image as value.
 
"Background": [
    {
      "Title": "Woodlight_default",
      "Image": "sidebars_woodlight_default.png"
    },
    {
      "Title": "Woodlight_blue",
      "Image": "sidebars_woodlight_blue.png"
    },
    {
      "Title": "Woodlight_yelow",
      "Image": "sidebars_woodlight_yelow.png"
    }
  ]
 

Color Section

 
This section consists of an array of objects that represent one or more Color Schemes that we want to configure as website colors.
 
The areas of the website are grouped in six colors. Colors are represented in hexadecimal format.
 

Properties

  • Scheme - It takes as value a descriptive name of the color group, in other words, it is the name given to the color scheme.
  • Main - It takes value as a hexadecimal color. It is the main color to be the one that stands out most in the website. We can find it in the following areas:
    • Main Menu (Home)
    • Footer (Home)
    • Popup window with product or service details (Products or Services)
    • Job Applicant Form (Job)
  • SideBackground  - It takes value as a hexadecimal color. It is the color of the website background and you can see how the background color of the sides of the website.
  • BodyBackground - It takes value as a hexadecimal color. It is the color of the body or content of the website and you can see how the background color of the center of the website.
  • SubMenu - It takes value as a hexadecimal color. It is the background color of the submenu and you can see how the background color in the following areas:
    • In the three categories located in the Submenu (Home) of the website.
    • In the category selected under the carousel of products or services.
  • Secondary - It takes value as a hexadecimal color. It is the color of the background that we can appreciate in the following areas:
    • List of Categories (Products or Services)
    • Apex (We Are)
    • Address (Contact)
  • Subordinate - It takes value as a hexadecimal color. It is the color of the background that we can appreciate in the following areas:
    • Category Image (Products or Services)
    • Carousel of Products or Services (Products or Services)
    • Description (We Are)
    • Contact Form (Contact)
 
"Color": [
    {
      "Scheme": "Default",
      "Main": "#424242",
      "SideBackground": "#ffffff",
      "BodyBackground": "#ffffff",
      "SubMenu": "#424242",
      "Secondary": "#bdbdbd",
      "Subordinate": "#8f8f8f"
    },
    {
      "Scheme": "Wood",
      "Main": "#4D3F36",
      "SideBackground": "#ffffff",
      "BodyBackground": "#ffffff",
      "SubMenu": "#4D4A36",
      "Secondary": "#B3B3B3",
      "Subordinate": "#736B64"
    },
    {
      "Scheme": "Dark",
      "Main": "#BDBDBD",
      "SideBackground": "#ffffff",
      "BodyBackground": "#ffffff",
      "SubMenu": "#000000",
      "Secondary": "#8f8f8f",
      "Subordinate": "#707070"
    }
  ]
 

Job Section

 
This section consists of an array of objects that represent a Job Image for each language supported by Vigeowebsite. This image will appear next to the Job Applicant Form on the Website.
 

Properties

  • Idiom - Take a language code value, currently this code can only be:
    • en-US (English)
    • es (Spanish)
    • de (German)
    • fr (French)
    • it (Italian)
    • pt (Portuguese)
  • Image - Take the file name the Theme Job Image as value.
 
"Job": [
    {
      "Idiom": "en-US",
      "Image": "job_en.png"
    },
    {
      "Idiom": "es",
      "Image": "job_es.png"
    },
    {
      "Idiom": "de",
      "Image": "job_de.png"
    },
	{
      "Idiom": "fr",
      "Image": "job_fr.png"
    },
    {
      "Idiom": "it",
      "Image": "job_it.png"
    },
    {
      "Idiom": "pt",
      "Image": "job_pt.png"
    }
  ]
 
Note that Job Section is an array of six objects, one for each of the six languages supported by Vigeowebsite.
 

Promotion Section

 
This section consists of an array of objects representing the three Images for each language supported by Vigeowebsite.
 

Properties

  • Idiom - Take a language code value, currently this code can only be:
    • en-US (English)
    • es (Spanish)
    • de (German)
    • fr (French)
    • it (Italian)
    • pt (Portuguese)
  • Size - Vigeowebsite uses three different sizes of Promotion Images:
    • small - For product images.
    • medium - For category images.
    • big - For top slider images on the Home.
  • Image - Take the file name the Theme Promotion Image as value.
 
"Promotion": [
    {
      "Idiom": "en-US",
      "Size" : "small",
      "Image": "promotion_en_es_01_200x140.png"
    },
    {
      "Idiom": "en-US",
      "Size" : "medium",
      "Image": "promotion_en_es_01_288x265.png"
    },
    {
      "Idiom": "en-US",
      "Size" : "big",
      "Image": "promotion_en_es_01_830x602.png"
    },
    {
      "Idiom": "es",
      "Size" : "small",
      "Image": "promotion_en_es_01_200x140.png"
    },
    {
      "Idiom": "es",
      "Size" : "medium",
      "Image": "promotion_en_es_01_288x265.png"
    },
    {
      "Idiom": "es",
      "Size" : "big",
      "Image": "promotion_en_es_01_830x602.png"
    },
    {
      "Idiom": "de",
      "Size" : "small",
      "Image": "promotion_de_01_200x140.png"
    },
    {
      "Idiom": "de",
      "Size" : "medium",
      "Image": "promotion_de_01_288x265.png"
    },
    {
      "Idiom": "de",
      "Size" : "big",
      "Image": "promotion_de_01_830x602.png"
    },
    {
      "Idiom": "fr",
      "Size" : "small",
      "Image": "promotion_fr_01_200x140.png"
    },
    {
      "Idiom": "fr",
      "Size" : "medium",
      "Image": "promotion_fr_01_288x260.png"
    },
    {
      "Idiom": "fr",
      "Size" : "big",
      "Image": "promotion_fr_01_830x602.png"
    },
    {
      "Idiom": "it",
      "Size" : "small",
      "Image": "promotion_it_01_200x140.png"
    },
    {
      "Idiom": "it",
      "Size" : "medium",
      "Image": "promotion_it_01_288x260.png"
    },
    {
      "Idiom": "it",
      "Size" : "big",
      "Image": "promotion_it_01_830x602.png"
    },
    {
      "Idiom": "pt",
      "Size" : "small",
      "Image": "promotion_pt_01_200x140.png"
    },
    {
      "Idiom": "pt",
      "Size" : "medium",
      "Image": "promotion_pt_01_288x260.png"
    },
    {
      "Idiom": "pt",
      "Size" : "big",
      "Image": "promotion_pt_01_830x602.png"
    }
  ]
 
Note that Promotion Section is an array of eighteen objects, three objects for each of the six languages supported by Vigeowebsite.
 
Note also that we are using the same three job images for en-US (English) and es (Spanish).
 

Theme File Restrictions

 
Your theme file must comply with all of the following restrictions:
  • The name of each section and property is fixed and can not be changed.
  • New sections can not be added.
  • Can not delete sections.
  • New properties can not be added to sections.
  • Can not remove properties from sections.
  • The theme name must be the same as the one used for the main folder and for the theme file.
  • The theme name must be less than 50 characters.
  • Number of objects in the arrays:
    • Header - It must contain at least one Header object.
    • Background - It must contain at least one Background object.
    • Color - It must contain at least one Color object.
    • Job - It must contain at least one Job object for each language supported by Vigeowebsite.
    • Promotion - Must contain at least three Promotion objects (small, medium, big) for each language supported by Vigeowebsite.
 
Note that by fulfilling all the above restrictions, you can add as many objects as you want to each of the arrays. See Theme Best Practices for more details.
 
In Theme Example you will find a complete example of a Vigeowebsite Theme.
 

Add Feedback