You are viewing limited content. For full access, please sign in.

Question

Question

Customizing the header logo in Laserfiche Forms & Repository

Laserfiche Forms Version 11
Updated April 10
asked on April 8 • Show version history

Hello,
I'm trying to customize the header logo for both the Form view and the Repository, and I can't find a feasible way to do it at the moment. The idea is that we want to include the village logo next to the Laserfiche Form and Laserfiche Repository logos, or perhaps replace it with the Village logo.
Do you know of any way this can be done?

Could this be part of a future implementation for Laserfiche 12? Would we have the ability to edit the styles in the Laserfiche environment? Perhaps so we don't have to touch Laserfiche's native CSS or JS style files? Could we use CSS Child Styles somehow, so we can add our own code and have LF apply them if these child files exist?

Thanks in advance, everyone.

lflogo.png
lflogo.png (26.17 KB)
0 0

Answer

SELECTED ANSWER
replied on April 8

We've done this for years.  I think I learned how to do this from a post here on Answers, but I'm having some trouble finding it now.  We were using this back on version 10 and have continued through version 11.  I haven't tested yet on version 12.

Here's how it looks:

And here's how to do it:

Put your logo file at this location on the server running LFForms:
C:\Program Files\Laserfiche\Laserfiche Forms\Forms\img

I recommend a PNG file with a transparent background.

Now locate this file:
C:\Program Files\Laserfiche\Laserfiche Forms\Forms\Views\Shared\_Layout.app.cshtml

Make a backup copy of the file so you can easily revert if needed.

In the file, search for this:     <svg class="lf-icon"

Add a line before that, containing the following code (replacing LOGO.PNG with the actual file name you stored in the img folder earlier): 

<image height="25px" src="~/img/LOGO.PNG"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

It's kind of crude, but it's just your logo image followed by 10 spaces to give it a gap before the Laserfiche Forms logo.

Save changes to the file.

You might need to restart the website in IIS.

Your logo should now show in Forms left of the Laserfiche Forms logo.

Note that the changes will revert after when you upgrade Forms in the future.

3 0
View 3 previous replies
replied on April 8

I was curious to test this in Forms 12. It appears that the _Layout.app.cshtml is written differently. I couldn't find the same wording that you mentioned. 

However, I couldn't get the logo to display. Oh well.

 

1 0
replied on April 9 • Show version history

Thank you very much, Matthew, for your excellent explanation and code details. I just implemented it, and it has greatly helped with what I need right now.

With your permission, I made a correction. Instead of repeating it several times, I replaced it with a margin-right CSS property, as you can see in the line below. Perhaps this will be helpful to simplify things a bit.

<img height="40px" src="~/img/LOGO.png" style="margin-right: 20px;" />

It might be interesting if our Laserfiche development colleagues could consider offering us a way to slightly customize Laserfiche's visual environment. This includes things like the Color Palette, Text Size, and Logo customization (always respecting Laserfiche's identity, of course), as well as other things that could be considered customizable. They also offer a way for us to slightly adapt the environment to suit each client without having to touch anything in the code. We've encountered cases where clients really like to maintain a visual identity that matches their functions.
Perhaps this could be established from the very design of each user's or user group's profile, where from there, you could decide, either predefined or by giving them the opportunity to determine through effective permissions whether the group or user has permissions to change colors or any visual element of their environment, beyond what we as administrators can predefine globally.
I don't know; these are ideas that might not make much of a difference because Laserfiche's strength lies in its applications and functions, but it could be a detail that, who knows, could be considered.

Thank you. 

1 0
replied on April 9

Matthew, I try to select your answers as the Solutions, but I can't see the option to mark a comment as a solution. Has something changed in the Answers forum functionality? What maybe I miss? 

These are the only options I can see: 

0 0
replied on April 9 • Show version history

A margin makes way more sense.  I’ve used this function for years and I’ve learned better ways to do things in that time and I don’t always think to reevaluate what I already have in place.  As I said, it was a crude method, haha.

You would need to edit your post and change it from a Discussion to a Question in order to select an answer.

1 0
replied on April 10

Yes, but despite being rudimentary, as you say, it works, which is the most important thing! I knew I hadn't done something right when I wrote the post because I didn't see the Mark as Answer option.
Thank you so much for your response and help.

1 0
replied on April 10 • Show version history

You are so very welcome for the help.

And I'm going to have to take a look at this again once I'm on version 12 (if I can ever find a spare minute to do the upgrade).

0 0

Replies

replied on April 10 • Show version history

I figured out what to do in Forms 12. In my case, I replaced the Laserfiche logo with our own.

Using the same C:\Program Files\Laserfiche\Laserfiche Forms\Forms\Views\Shared\_Layout.app.cshtml

@helper RenderSectionTopHeader()
{
    <div id="skiptocontent">
        <a id="skip-link" href="">@Resources.STR_SKIP_TO_MAIN_CONTENT</a>
    </div>
    <nav id="topnav" class="navbar navbar-inverse lff-app-nav navbar-static-top hide-on-dlg" role="navigation" layoutapp>
        <div class="lf-header lf-header--inverse" style="display: flex; align-items: center; padding: 0 10px;">
            
            <a href="@Url.Action("Inbox", "Home")" class="lfm-toolbar__brand hidden-xs" title="RAAFA">
                <img src="@Url.Content("~/img/LogoWhite.png")" alt="RAAFA Logo" style="height: 25px; margin-right: 15px;" />
            </a>
            <div class="lfm-toolbar__brandname hidden-xs" style="margin-left: 15px;">Forms</div>
            @* top level menu (start/tasks/instance/reports/manage) *@
            @RenderSection("MainNav", false)
            @* admin/help *@
            @if (IsSectionDefined("TopMenu"))
            {
                @* system setting/help *@
                @RenderSection("TopMenu", false)
            }
            <div class="lf-flex-spacer"></div>
            <div id="placeForAppPicker"></div>
            @*username*@
            @if (ViewBag.About != true)
            {
                @Html.Action("_LogOnPartial", "Home", new { SettingActive = ViewBag.layoutSetting ?? false }, true)
            }
        </div>
    </nav>

    @* Designer nav: modeler,forms,right,publish,results *@
    @RenderSection("Subnav", false)
}

 

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...