NL Design #2
Open
NL Design #2
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Create header-override.css for white header with blue logo bar - Override nldesign theme CSS with maximum specificity selectors - Add Nederland logo in blue bar (matching login page design) - Load override CSS in Application.php boot() method - Header is now white with dark icons/text for better contrast
- Blue bar now extends 50px above header (top: -50px) - Bar height increased to 100px for proper visibility - Nederland logo copied to mydash/img/ folder for accessibility - Logo positioned at bottom of blue bar (bottom: 5px) - Logo uses relative path from CSS folder (../img/nederland-logo.svg) - Body overflow set to visible to allow bar to extend above page - Header overflow set to visible for pseudo-elements
- Remove filter: invert(1) from icons (was making them white) - Set all header text to dark gray (#333333) - Set app name and header links to Rijksblauw (#154273) - App menu active/hover states use blue (#154273) with bold text - Unified search icon and SVGs set to dark (#333333) - User menu, notifications, contacts icons set to dark (opacity: 0.8) - Settings menu icon filter removed for proper dark display - All icons and text now properly visible on white header background
BREAKING CHANGE: Switch from CSS ::before/::after to real DOM element positioning - Use position: fixed on header-appname-container/dashboard link - Blue bar now targets actual logo element instead of pseudo-elements - Logo displays at bottom of bar with flexbox (align-items: flex-end) - Z-index: 9999 ensures bar floats above all content - Logo made white via filter: brightness(0) invert(1) - Works with both <img> and <svg> logo elements - Bar dimensions: 60px wide × 100px tall, positioned at top: 0, left: 5px - Remove old ::before and ::after pseudo-element code - Logo now properly visible at bottom of blue bar across all pages
- Target actual Nextcloud logo link: a#nextcloud and a[href="/"] - Also target .header-start wrapper (in addition to .header-left) - Logo div (.logo) background replaced with nederland-logo.svg - Remove incorrect selectors (.header-appname-container, dashboard link) - Add legacy support for img/svg elements inside logo link - Box-sizing: border-box for proper padding calculation - Logo positioned at bottom via flexbox (align-items: flex-end) - Fixed positioning ensures logo bar floats above all content
- Remove margin-top and padding-top from html, body, and #body-user - Eliminates white space above blue bar - Change flexbox to flex-direction: column with justify-content: flex-end - Logo now correctly positioned at bottom of blue bar - Adjust padding: remove all padding except padding-bottom: 10px - Logo displays at bottom with proper spacing from edge
- Height reduced from 100px to 60px for more compact look - Left position changed from 5px to 15px - margin-top: 0px !important to override Nextcloud header.scss - margin-left: 0px !important for precise positioning - Logo height adjusted to 30px to fit 60px bar
- Height changed from 60px to 80px for better visual balance - Logo height adjusted to 32px to fit proportionally
- visibility: visible !important (was hidden) - padding: 0 !important (remove 70px left padding) - text-indent: 0 !important (was -9999px) - min-height and max-height: 32px (override 50px) - text-align: center for proper centering - Logo now properly visible and centered in blue bar
- Add eslint.config.js with Nextcloud ESLint config - Add required ESLint dependencies - Fix indentation and trailing spaces - All linting checks now pass
SudoThijn
approved these changes
Feb 12, 2026
SudoThijn
left a comment
SudoThijn
left a comment
There was a problem hiding this comment.
looks fine to me, my only gripe is that your are uploading the build files
There was a problem hiding this comment.
You do not upload builds, therefore you should put /js/ in the .gitignore
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.