Edwin Noorlander
a2b7fcb1a8
### Features Added: - **Multi-language Support**: Dutch/English with URL-based switching (?lang=nl|en) - **Theme Customization**: Configurable header/navigation colors via config.json - **Navigation Improvements**: Active states, dropdown chevron icons, visual distinction - **Mobile Responsive**: Separate desktop/mobile search layouts - **Template System**: Fixed rendering pipeline for all partials ### Technical Fixes: - Fixed language file path (engine/lang/ vs engine/core/class/../lang/) - Added template data rendering to layout template - Implemented navigation active state for default/home page - Added chevron icons to dropdown folders for visual distinction - Removed hardcoded navigation opacity class for theme colors ### Files Modified: - config.json: Added theme and language configuration - engine/core/class/CodePressCMS.php: Multi-language and navigation logic - engine/templates/: Enhanced header, footer, navigation, layout - engine/lang/: Dutch and English translation files - public/assets/css/mobile.css: Mobile responsive fixes ### Result: Fully functional multi-language CMS with proper navigation states and theme customization.
186 lines
5.6 KiB
Plaintext
186 lines
5.6 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{page_title}} - {{site_title}}</title>
|
|
|
|
<!-- CMS Meta Tags -->
|
|
<meta name="generator" content="{{site_title}} CMS">
|
|
<meta name="application-name" content="{{site_title}}">
|
|
<meta name="author" content="{{author_name}}">
|
|
<meta name="creator" content="{{author_name}}">
|
|
<meta name="publisher" content="{{author_name}}">
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="{{seo_description}}">
|
|
<meta name="keywords" content="{{seo_keywords}}">
|
|
|
|
<!-- Author Links -->
|
|
<link rel="author" href="{{author_website}}">
|
|
<link rel="me" href="{{author_git}}">
|
|
|
|
<!-- Favicon and Styles -->
|
|
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
|
|
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="/assets/css/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="/assets/css/style.css" rel="stylesheet">
|
|
<link href="/assets/css/mobile.css" rel="stylesheet">
|
|
|
|
<!-- Dynamic theme colors -->
|
|
<style>
|
|
:root {
|
|
--header-bg: {{header_color}};
|
|
--header-font: {{header_font_color}};
|
|
--nav-bg: {{navigation_color}};
|
|
--nav-font: {{navigation_font_color}};
|
|
}
|
|
|
|
/* Header styles */
|
|
.navbar {
|
|
background-color: var(--header-bg) !important;
|
|
}
|
|
|
|
.navbar .navbar-brand,
|
|
.navbar .navbar-text,
|
|
.navbar .form-control,
|
|
.navbar .btn {
|
|
color: var(--header-font) !important;
|
|
}
|
|
|
|
.navbar .form-control::placeholder {
|
|
color: rgba(255,255,255,0.7) !important;
|
|
}
|
|
|
|
.navbar .btn-outline-light {
|
|
border-color: var(--header-font) !important;
|
|
}
|
|
|
|
/* Language dropdown styling */
|
|
.dropdown-menu {
|
|
background-color: var(--header-bg) !important;
|
|
border: 1px solid var(--header-font) !important;
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: var(--header-font) !important;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: rgba(255,255,255,0.1) !important;
|
|
color: var(--header-font) !important;
|
|
}
|
|
|
|
/* Hide Bootstrap dropdown arrow and use custom icon */
|
|
.dropdown-toggle::after {
|
|
display: none !important;
|
|
}
|
|
|
|
.btn-outline-light {
|
|
color: var(--header-font) !important;
|
|
border-color: var(--header-font) !important;
|
|
}
|
|
|
|
.btn-outline-light:hover {
|
|
background-color: rgba(255,255,255,0.1) !important;
|
|
color: var(--header-font) !important;
|
|
}
|
|
|
|
/* Fix button color when dropdown is open */
|
|
.btn-outline-light:focus,
|
|
.btn-outline-light:active,
|
|
.show > .btn-outline-light.dropdown-toggle {
|
|
background-color: rgba(255,255,255,0.1) !important;
|
|
color: var(--header-font) !important;
|
|
border-color: var(--header-font) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.bi-chevron-down {
|
|
font-size: 0.75em;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
/* Remove Bootstrap default breadcrumb separators */
|
|
.breadcrumb-item + .breadcrumb-item::before {
|
|
content: "" !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Custom breadcrumb styling */
|
|
.breadcrumb {
|
|
--bs-breadcrumb-divider: "";
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
color: var(--nav-font) !important;
|
|
}
|
|
|
|
.breadcrumb-item a {
|
|
color: var(--nav-font) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb-item a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Navigation section background */
|
|
.navigation-section {
|
|
background-color: var(--nav-bg) !important;
|
|
color: var(--nav-font) !important;
|
|
}
|
|
|
|
/* Remove nav-tabs background so it inherits from parent */
|
|
.nav-tabs {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
color: var(--nav-font) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
background-color: rgba(255,255,255,0.1) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
background-color: rgba(255,255,255,0.2) !important;
|
|
border-bottom: 2px solid var(--nav-font) !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{{>header}}
|
|
|
|
{{>navigation}}
|
|
|
|
<div class="breadcrumb-section bg-light border-bottom">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 py-2">
|
|
{{{breadcrumb}}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid main-content" style="padding-bottom: 80px;">
|
|
<div class="container">
|
|
<div class="row">
|
|
<main class="col-12">
|
|
{{>content_template}}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{>footer}}
|
|
|
|
<script src="/assets/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/assets/js/app.js"></script>
|
|
</body>
|
|
</html> |