Search…

X3 Photo Gallery Support Forums

Search…
 
timewind
Topic Author
Posts: 3
Joined: 02 Oct 2020, 11:03

Custom header

02 Oct 2020, 11:44

Hi

Please include an option to add a custom header to the pages with placeholders for organisation name and a logo image.

Best regards
Stefan Sundberg
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Files app 0.2.0 :apple:

02 Oct 2020, 23:43

Hi Stefan. I moved your post to a new topic.
timewind wrote:Please include an option to add a custom header to the pages with placeholders for organisation name and a logo image.
I have a custom solution for you which might cover your requirements for now. Depending on how it turns out, I might include an option for this in a future update. The solution simply involves adding a new custom header element:
Image

1. First, open the index.php file and locate <main id="main">, currently around line 1367. Add your custom header HTML below the <main> item, for example:
Code
<main id="main">
      <div id="custom-header">Custom Header</div>
2. Create a file _files/css/custom.css, which will automatically get loaded as a stylesheet by Files app. Open the CSS file in a text editor an include the following:
Code
#custom-header {
  background-color: var(--col950);
  color: var(--col100);
  font-weight: 500;
  min-height: 58px;
  align-items: center;
  display: flex;
  font-size: 20px;
  padding-left: 16px;
}
.menu-enabled.sidebar-closed #custom-header {
  padding-left: 54px;
}
3. Save, and refresh your Files app in browser.

This is just a basic example. If you want different style, you would have to adjust styles in custom.css appropriately. You could also include a logo without much trouble, but the above is the basics to create a custom topbar area where you can include any custom content. Let me know how it goes!
 
timewind
Topic Author
Posts: 3
Joined: 02 Oct 2020, 11:03

Re: Custom header

03 Oct 2020, 02:38

Unfortunately, the _files/css/custom.css file doesn't seem to load. Only a white bar with the "Custom Header" text is shown.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom header

03 Oct 2020, 02:42

timewind wrote:Unfortunately, the _files/css/custom.css file doesn't seem to load. Only a white bar with the "Custom Header" text is shown.
It should work. Do you have a public link so I can diagnose?
 
timewind
Topic Author
Posts: 3
Joined: 02 Oct 2020, 11:03

Re: Custom header

03 Oct 2020, 05:44

Strange it's not loading the CSS file. This should work: Scroll down to approximately line 1366 and locate the line:
<?php custom_script('css'); ?>

Add below it:
<link href="_files/css/custom.css" rel="stylesheet">

The CSS file is loaded with the additional code. Thank you