btcpayserver/BTCPayServer/Views/Server/Theme.cshtml
Dennis Reimann 7ccf0c3612
UI: Add custom theme file option
This adds a "Custom Theme CSS file" to the "Server settings: Theme" page. It works similar to the custom bootstrap and creative start fields, but is only added to the head in case it is set.

The main idea here is that users would choose one of our predefined themes and have the option to override specific values. The other apporach would be to let the custom theme replace the predefined one, but this could lead to issues in case we extend the set of variables, which would be unset then.
This way users can copy a predefined theme and override all variables or just the ones they want to customize.

The help icon besides the label links to a page in the docs I'm currently working on.
2019-11-22 21:09:18 +01:00

60 lines
2.9 KiB
Plaintext

@model BTCPayServer.Services.ThemeSettings
@{
ViewData.SetActivePageAndTitle(ServerNavPages.Theme);
}
<partial name="_StatusMessage" />
<div class="row">
<div class="col-lg-6">
<div asp-validation-summary="All" class="text-danger"></div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<form method="post">
<h4>Custom theme</h4>
<p>Select one of our predefined themes. Optionally you can also provide a CSS file that customizes the chosen theme.</p>
<div class="form-group">
<label asp-for="ThemeCssUri"></label>
<select asp-for="ThemeCssUri" class="form-control">
<option value="/main/themes/classic.css">Classic</option>
<option value="/main/themes/casa.css">Casa</option>
</select>
<span asp-validation-for="ThemeCssUri" class="text-danger"></span>
</div>
<div class="form-group mb-5">
<label asp-for="CustomThemeCssUri"></label>
<a href="https://docs.btcpayserver.org/development/theme#custom-themes" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>
<input asp-for="CustomThemeCssUri" class="form-control" />
<span asp-validation-for="CustomThemeCssUri" class="text-danger"></span>
</div>
<h4>Bootstrap theme</h4>
<div class="form-group">
<label asp-for="BootstrapCssUri"></label>
<a href="https://docs.btcpayserver.org/development/theme#bootstrap-themes" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>
<input asp-for="BootstrapCssUri" class="form-control" />
<span asp-validation-for="BootstrapCssUri" class="text-danger"></span>
<p class="form-text text-muted">
<a href="https://bootstrap.build/app/v4.0/" target="_blank">Build your own theme</a>
or <a href="https://bootswatch.com/" target="_blank">pick one already made</a>
</p>
</div>
<div class="form-group">
<label asp-for="CreativeStartCssUri"></label>
<input asp-for="CreativeStartCssUri" class="form-control" />
<span asp-validation-for="CreativeStartCssUri" class="text-danger"></span>
<p class="form-text text-muted">
<a href="https://startbootstrap.com/template-overviews/creative/" target="_blank">Creative Start theme</a>
is used on top of Bootstrap
</p>
</div>
<button type="submit" class="btn btn-primary" name="command" value="Save">Save</button>
</form>
</div>
</div>
@section Scripts {
@await Html.PartialAsync("_ValidationScriptsPartial")
}