## Site template documentation
This document describes how the website is organized and how the CSS and HTML elements can be modified.
## Site organization
* css
* imageblocks.css - css code to manage the front page imageboxes
* style.css - rest of css adopted from the source site to allow unified look
* Datol_lp_eng_v4 - the source website
* Datol_lp_esp_v4 - localised source website
* images - images used for the landing page boxes
* img11.png - image for the first row, first column
* img11_hover.png - image for the first row, first column, hover
* img12.png
* img12_hover.png
* ...
* txt - this folder contains the popup texts for the landing page
* popup11.html - popup html page for the General Informations button located at (1,1)
* popup13.html - popup html page for the Informacion General button located at (3,1)
* index.html - the landing page containing the navigation buttons
* iframe.html - IFrame integration demo for the landing page
* documentation.html - this document
* marked.min.js - javascript used to interpret the markdown documentation
## CSS Structure
The imgblock css is hardcoded to allow for the 3x2 layout that was requested. To change the number of rows/columns these values need to be adjusted accoordingly.
```css
.imgblock {
width: 240px;
float: left;
height: 150px;
padding: 0px;
margin: 0px;
vertical-align: middle;
text-align: center;
background-size: 100%;
background-repeat: no-repeat;
}
```
The hover functionality is achieved by defining hover and nonhover selectors to switch the text and image
```css
.imgblock p.text-nonhover{
display: inline;
}
.imgblock p.text-hover{
display: none;
}
.imgblock:hover p.text-nonhover{
display: none;
}
.imgblock:hover p.text-hover{
display: inline;
}
```
```css
.imgblock11 {
background-image: url(../images/img11.png);
}
.imgblock11:hover {
background-image: url(../images/img11_hover.png);
}
.imgblock12 {
background-image: url(../images/img12.png);
}
.imgblock12:hover {
background-image: url(../images/img12_hover.png);
}
...
```
The rest of the css code is used to center the texts.
## HTML Structure
The image block section is composed of imageblock divs that as they are precisle sized fall into 3x2 pattern.
```html
```
These divs contain the hover and non-hover texts and actions to be performed when clicked on div.
First column has the onclick javascript event to open the text popup specified in _txt_ directory.
Second column links to the source website in its particular localisation.
Third column links to an external website.
The anchor is _display: block_ that is the same size as the _imageblock_ div element.
This is to provide a click area that is the same size as the background image.
```css
.blocklink {
display: block;
width: 100%;
height: 100%;
text-align: center;
position: relative;
}
```