Is it possible to change the name of "Back to site"?

question
1

I know it is possible to change to url for “back to site” with the AppPath-attribute. But is it also possible to change the name?

BR,
Roland

2

I don’t think there is an official/supported mechanism to change the “back to site” name/text.

However, I believe it can be changed using some CSS, in a linked CSS file that is set as an “embedded resource”, as follows. I did some quick testing (in an ASP.NET Core 8.0 project) and the following seemed to work for me.

Caution: This depends on specific (undocumented) HTML detail in the dashboard page, and that HTML may change in future Hangfire releases (in that case, you may need to change the CSS shown below).

The following depends on the fact that recent versions of Hangfire support setting a custom stylesheet (and also JavaScript) for the dashboard - see:

Note that this link shows this feature being added in v1.8.0, but I don’t think it was released until v1.8.1.

If you view the page source (in the browser) of a Hangfire project, the dashboard pages include some HTML like this to display the “Back to site” name/label/link:

<ul class="nav navbar-nav navbar-right">
<li>
	<a href="/AppPath-URL">
		<span class="glyphicon glyphicon-log-out"></span>
		<span class="hidden-sm">
			Back to site
		</span>
	</a>
</li>
</ul>

With the following CSS, you can hide the above “Back to site” text, and insert new text (with the “after” pseudo CSS tag):

a .glyphicon.glyphicon-log-out +.hidden-sm {
	visibility: hidden;
	position: relative;
}
a .glyphicon.glyphicon-log-out +.hidden-sm:after {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	text-wrap: nowrap;
	content: "My Home Page";
}

[I found the above CSS mentioned at: Reddit - The heart of the internet] Note that this CSS will hide/replace any text in any of the pages with a similar HTML/class construct, but the “Back to Site” link is likely the only item with this specific combination of classes and tags.

Note that the new content (“My Home Page”) above should be a similar length (or shorter than) the original “Back to Site” link text; otherwise it will extend beyond the edge of the web page.

In my test, I inserted the above CSS into a file named “embeddeddashstyle.css”. [Use a relatively unique name for this file in your project.] You then need to mark this file as an “embedded resource”. In Visual Studio, right-click the file in Solution Explorer, and select “Properties”. In the “Properties” panel, select the “Build Action” property, and change that option to “Embedded resource”.

Next, you need to link this CSS file (as an embedded resource) to the project so that the Hangfire dashboard can access it. I used the following, but I don’t know whether this is the best approach.

In Program.cs (ASP.NET Core project), setting a custom stylesheet can be achieved with the following code:

Find an assembly/resource reference to this file, and then use that reference in the “UseDashboardStylesheet” configuration option in the “AddHangfire” method:

var execAssembly = Assembly.GetExecutingAssembly();
var dashEmbeddedStyle = execAssembly.GetManifestResourceNames().FirstOrDefault(name => name.EndsWith("embeddeddashstyle.css", StringComparison.OrdinalIgnoreCase));

builder.Services.AddHangfire(configuration => configuration
.UseDashboardStylesheet(execAssembly, dashEmbeddedStyle!) // ######
.SetDataCompatibilityLevel(CompatibilityLevel.Version_180)
.[...]

Now, when you run the project, the original “Back to Site” link text in the dashboard should be hidden and overwritten with your new text (“My Home Site” in the example above).

1 Like