Customizing the Theme
Relevant source files
The following files were used as context for generating this wiki page:The website's theme is built upon a foundation of core CSS files, design.css and iite.css, which define the visual identity through a system of CSS custom properties (variables), responsive grid layouts, and component-specific styles. Customization is achieved by modifying these core stylesheets, leveraging predefined utility classes, and understanding how JavaScript dynamically alters styles based on the application state, such as the current page path.
The structure is primarily server-rendered, with PHP files like iite/overview.php including a main layout file (layout.phtml) that links the necessary stylesheets. Dynamic client-side adjustments, such as changing logo colors or managing mobile navigation, are handled by apps/js/iite_components.js. This layered approach allows for both broad, site-wide theme changes via CSS variables and granular, page-specific styling.
Core Styling and Color Palette
The foundation of the theme is a set of CSS custom properties defined in the :root selector of both design.css and iite.css. These variables control the primary color scheme, allowing for easy and consistent updates across the entire site.
Sources: themes/css/design.css:1-20, themes/css/iite.css:3-20
Color Variables
The main color palette is defined using --w- prefixed variables.
| Variable | Default Value | Description |
|---|---|---|
--navbar-background | #02274c | Background color for the main navigation bar. |
--w-white | white | General white color. |
--w-black | black | General black color. |
--w-grey | #e9e9e9 | A light grey, often used for backgrounds. |
--w-midnight | #222940 | A dark blue, used for text and accents. |
--w-blue | #0448d5 | The primary brand blue color. |
--w-orange | #fc6d49 | An accent orange color. |
--w-yellow | #FFC34A | An accent yellow color. |
--w-green | #26A646 | An accent green color. |
--w-crimson | #f22e52 | An accent crimson/red color. |
Sources: themes/css/design.css:3-17, themes/css/iite.css:8-18
Layout and Components
The website uses a combination of Flexbox and CSS Grid to create its primary layouts and components.
Navigation
The main navigation bar is a fixed element styled by the nav selector. It contains dropdown menus (.content-dropdown-nav) that are revealed on hover. For smaller screens, this is replaced by a mobile menu icon (.menu-nav-mobile) that toggles a grid-based menu (.inside-menu-nav).
/* themes/css/design.css:32-42 */
nav {
display: flex;
position: fixed;
top: 0;
left: 0;
bottom: 20px;
width: 100vw;
height: 100%;
max-height: 70px;
z-index: 9;
}
Sources: themes/css/design.css:32-42, 1421-1434
Grid System
Many pages utilize a CSS Grid for layout, particularly for content-heavy sections like department overviews. The .grid-inside-departments class, for example, defines a 9-column and 9-row grid. Specific components are then placed onto this grid.
/* themes/css/design.css:1120-1127 */
.grid-inside-departments,
.grid-inside-relationship,
.grid-inside-wep {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
width: 100%;
height: 100%;
gap: 20px;
}
Sources: themes/css/design.css:1120-1127
Interactive Components
The theme includes styles for several interactive components:
- Cards (
.grid-company): These cards have hover effects that scale the element and reveal additional information. - Swap/Move Cards (
.card-swapmove): A set of four cards that scale on hover to reveal more text content. - Tabbed Interface (
.userinterface-1): A JavaScript-powered tab system where clicking a button (.btn-interface) reveals the corresponding content pane (.w-interface).
The following diagram illustrates the logic for the tabbed interface.
This diagram shows how a user click on a tab button triggers a JavaScript function to update the active classes on both the button and the content panel.
Dynamic Theming
JavaScript plays a key role in applying theme variations based on the current page or user interactions.
Page-Specific Styling Logic
The apps/js/iite_components.js file contains logic to alter styles based on the window's path.
- Logo Color: The IITE logo's color is changed to black on pages with a white background (
/iite/company,/iite/wep, etc.) to ensure visibility. - Navbar Visibility: The entire navigation bar is hidden on specific pages like
/login.php. This is handled both on the server-side by a PHP flag and as a client-side fallback in JavaScript.
The following flowchart shows the logic for applying dynamic styles on page load.
Hiding the Navbar
The navbar can be hidden by adding the .hide-navbar class to the <body> tag. This is typically done server-side. For instance, login.php sets a $hideNavbar flag which is then used in the main layout template to apply the class.
// login.php:27-29
if (in_array($page, $hideNavbarPages, true) || str_contains($_SERVER['REQUEST_URI'], '/login')) {
$hideNavbar = true;
}
The corresponding CSS rule then hides the navigation elements.
/* themes/css/design.css:1635-1638 */
body.hide-navbar nav#navbar,
body.hide-navbar #container-menu-nav {
display: none !important;
}
Sources: login.php:27-29, themes/css/design.css:1635-1638
Responsive Design
The theme is fully responsive, using media queries to adapt the layout for different screen sizes. The file design.css contains multiple @media blocks targeting various breakpoints.
| Breakpoint | Key Changes |
|---|---|
max-width: 1201px | The main dropdown navigation is hidden, and the mobile hamburger menu (.menu-nav-mobile) is displayed. |
max-width: 900px | Font sizes and padding are reduced for elements like .background-homepage > h2. |
max-width: 500px | The main logo (.iite-a-www) font size is reduced. |
Sources: themes/css/design.css:1419-1633
The mobile menu functionality is controlled by the menunavmobile() function in JavaScript, which toggles the display of the .container-menu-nav element.
Sources: apps/js/iite_components.js:122-152
Internationalization (i18n)
While not a direct part of theming, the language switcher component is a styled UI element that impacts the user experience. The styles for the language switcher (.lang-switcher, .lang-menu) are defined in iite.css. The text content itself is pulled from apps/translations.json and rendered into the page by PHP helper functions, as seen in iite/overview.php.
Sources: themes/css/iite.css:130-159, apps/translations.json, iite/overview.php:14-19