Troubleshooting
Relevant source files
The following files were used as context for generating this wiki page:This document provides guidance for diagnosing and resolving common issues within the oldwebsite project. The project is built with PHP for server-side rendering and content management, JavaScript for client-side interactivity, and CSS for styling. Troubleshooting efforts should focus on these three areas: server-side page and translation loading, client-side script execution, and CSS styling conflicts or errors.
The following sections cover specific subsystems, outlining potential problems and their solutions. Each section provides diagrams, configuration details, and code references to aid in debugging.
Client-Side Scripting (iite_components.js)
Client-side issues often manifest as non-responsive UI elements, incorrect navigation, or visual components not behaving as expected. The primary file for this logic is apps/js/iite_components.js.
Navigation Failures
Navigation is handled by event listeners on elements with a data-page attribute. If a link is not working, verify the element's data-page value and ensure it has a corresponding handler in the script.
The following diagram illustrates the navigation logic.
This flowchart shows the client-side routing based on the data-page attribute.
Sources: apps/js/iite_components.js:5-22
Navigation data-page Mapping
data-page Value | Destination URL |
|---|---|
iite | http://localhost |
insideiite | /inside/overview.php |
research | # |
departments | /departments/overview.php |
news | # |
inside | # |
| Sources: apps/js/iite_components.js:5-22 |
Dynamic Styling Issues
JavaScript is used to dynamically change styles based on the current page path.
Logo Color
The IITE logo color (#iitelogo) is changed to black on specific pages. If the logo color is incorrect, check if the current page's path is included in the whitePages array.
// apps/js/iite_components.js:27-32
const whitePages = [
'/iite/company',
'/iite/wep',
'/iite/relationship',
'/departments/overview',
'/inside/overview',
'/inside/ets.php'
];
Sources: apps/js/iite_components.js:27-32
Navbar Visibility
The navbar is hidden on certain pages (e.g., login) as a client-side fallback. If the navbar unexpectedly appears or disappears, check the hideNavPages array and the logic that sets the display style to none.
// apps/js/iite_components.js:35-39
const hideNavPages = [
'/login',
'/login.php',
];
Sources: apps/js/iite_components.js:35-39
Cookie Consent Banner
The cookie consent banner's visibility is controlled via localStorage. If the banner does not hide or reappear correctly, use browser developer tools to inspect the cookies item in localStorage.
The following sequence diagram shows how the cookie banner is hidden.
This diagram shows the user interaction and script execution for hiding the cookie banner.
Sources: apps/js/iite_components.js:50-80
Styling and Layout (CSS)
Styling issues can range from incorrect colors and fonts to broken layouts. The main stylesheets are themes/css/design.css and themes/css/iite.css.
CSS Variable Mismatches
The project heavily relies on CSS variables for consistent theming. If colors or sizes are incorrect, first check the :root definitions. An incorrect or overridden variable is a common source of error.
Key Color Variables
| Variable | Default Value | Purpose |
|---|---|---|
--navbar-background | #02274c | Background for the main navigation. |
--w-white | white | Standard white color. |
--w-black | black | Standard black color. |
--w-grey | #e9e9e9 | Light grey for backgrounds/UI elements. |
--w-blue | #0448d5 | Primary accent and link color. |
--w-orange | #fc6d49 | Accent color. |
--w-yellow | #FFC34A | Accent color. |
| Sources: themes/css/design.css:3-17, themes/css/iite.css:5-21 |
Responsive Design Problems
The site uses @media queries to adapt to different screen sizes. If a layout appears broken on a specific device, check the media query ranges in themes/css/design.css. For example, the mobile navigation menu is activated for screens up to 1201px wide.
/* themes/css/design.css:1222-1225 */
@media screen and (min-width: 320px) and (max-width: 1201px) {
/* ... */
.content-dropdown-nav {
display: none;
}
/* ... */
}
Sources: themes/css/design.css:1222-1229
Grid Layout Issues
Many pages use CSS Grid for their layout (e.g., .grid-inside-departments). Debugging these layouts often involves checking grid-template-columns, grid-template-rows, and the grid-column-start/end properties of child elements.
/* themes/css/design.css:1002-1008 */
.grid-inside-departments,
.grid-inside-relationship,
.grid-inside-wep {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
/* ... */
}
Sources: themes/css/design.css:1002-1008
Page Rendering and Translations (PHP)
Server-side issues typically involve pages not loading, displaying incorrect titles, or showing untranslated text strings. The core logic resides in the top-level PHP files (e.g., iite/overview.php) and the configuration files they include.
Page Loading and Title Errors
Each main page (e.g., /iite/overview.php) is a PHP script that sets a page title, captures output from a .phtml template, and then includes a global layout file.
The following diagram shows the server-side rendering flow.
This flowchart details the PHP page rendering and templating process.
Sources: iite/overview.php:2-22, departments/overview.php:2-22, inside/overview.php:2-21
If a page title is wrong, check the apps/pages.php file to ensure the correct key and translation exist.
Page Title Configuration (apps/pages.php)
| Page Key | English Title |
|---|---|
index | Welcome to Institute Itech |
iite_overview | Overview of Institute Itech |
iite_company | Our company: Institute Itech |
iite_relationship | Relationships: Institute Itech |
departments_overview | The departments of Institute Itech |
| Sources: apps/pages.php:3-33 |
Translation Failures
Text is translated using a t() function (defined in each main PHP file) that pulls strings from apps/translations.json based on the session language. If you see a translation key (e.g., hero_quote) instead of text, troubleshoot the following:
- Ensure the key exists in
apps/translations.jsonfor the active language. - Verify the
$_SESSION['lang']variable is being set correctly. The default is'it'. - Check that the
t()function is being called correctly in the.phtmltemplate.
Example Translation Key
// apps/translations.json:2-6
"hero_quote": {
"it": "La mente è il codice sorgente dell’umanità.\nL’istruzione è il linguaggio con cui lo riscriviamo.",
"en": "The mind is humanity’s source code.\nEducation is the language we use to rewrite it.",
"fr": "L’esprit est le code source de l’humanité.\nL’éducation est le langage avec lequel nous le réécrivons.",
"es": "La mente es el código fuente de la humanidad.\nLa educación es el lenguaje con el que lo reescribimos."
}
Sources: apps/translations.json:2-6