Theme File

• 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

Property

• Theme - Take the theme name as value.

"Theme": "Woodlight"

Header Section

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

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

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

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"
    }
  ]

Promotion Section

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"
    }
  ]

Theme File 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.