Git Product home page Git Product logo

Comments (6)

robertovaldesperez avatar robertovaldesperez commented on June 14, 2024 1

It works very well, thank you very much @augustoproiete.

image

from hangfire-dashboard-customize.

augustoproiete avatar augustoproiete commented on June 14, 2024

Thanks for reporting @robertovaldesperez Looks like we need to adjust the Regex so that it skips the title header.

Let me know if this is something you're keen to send a PR to fix, otherwise I'll take a look over the weekend.

from hangfire-dashboard-customize.

robertovaldesperez avatar robertovaldesperez commented on June 14, 2024

Don't worry, I'm not in a hurry, check it out on the weekend if you can. Thanks a lot @augustoproiete

from hangfire-dashboard-customize.

augustoproiete avatar augustoproiete commented on June 14, 2024

@robertovaldesperez I've just published Hangfire.Dashboard.Customize v1.1.0-preview which should fix the issue you reported and allow a little more control over the title replacement.

When doing the replacement of the DashboardTitle I make sure to skip to the HTML <body> first to ensure the title you see on the browser tab is not replaced with the contents of your DashboardTitle property (where you can have the image as in your example).

I also introduced a new property called BrowserTitle (optional) which allows you to replace the title you see in the browser tab separately. This allows you to have a one title in the browser tab (no images) and another in the nav bar (with or without images).

The configuration code looks like this:

app.UseHangfireDashboardCustomOptions(new HangfireDashboardCustomOptions
{
    BrowserTitle = () => "Titulo",
    DashboardTitle = () => "<img style=\"display: inline !important; margin-top: -7px;\" src=\"/images/logo.png\" /> Titulo",
});

e.g.

image

If you have a chance, please take it for a spin and let me know if this fixes and/or if you see any other issue.

<PackageReference Include="Hangfire.Dashboard.Customize" Version="1.1.0-preview" />

If everything works, I'll release version 1.1.0 RTM later this week.

from hangfire-dashboard-customize.

robertovaldesperez avatar robertovaldesperez commented on June 14, 2024

It works very well, thank you very much @augustoproiete.

image

Is it possible to customize the icon of the browser tab? It would be great to be able to customize the image of the browser tab

from hangfire-dashboard-customize.

augustoproiete avatar augustoproiete commented on June 14, 2024

@robertovaldesperez Great!

As for the icon of the browser tab, we need a slightly different approach because the Hangfire Dashboard doesn't define a link tag, so it's not a 1:1 replacement like the title is.

I've just published Hangfire.Dashboard.Customize v1.1.0-preview2, which adds a couple more optional properties: AppendToHead and AppendToBody.

  • AppendToHead allows you to inject any content just before </head> tag - this gives you the ability to, for example, add icons, or perhaps load other CSS files to override existing styles.

  • AppendToBody allows you to inject any content just before the </body> tag - this gives you the ability to, for example, load other javascript files.

app.UseHangfireDashboardCustomOptions(new HangfireDashboardCustomOptions
{
    BrowserTitle = () => "Titulo",
    DashboardTitle = () => "<img style=\"display: inline !important; margin-top: -7px;\" src=\"/images/logo.png\" /> Titulo",

    AppendToHead = () => "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon.ico\" />",
});

image

As before, if you have a chance, please take it for a spin and let me know if this works.

<PackageReference Include="Hangfire.Dashboard.Customize" Version="1.1.0-preview2" />

Again, if everything works, I'll release version 1.1.0 RTM later this week.

from hangfire-dashboard-customize.

Related Issues (5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.