Theming

The ST Gtour package comes with 3 built in themes. It also allows for custom themes to be built.

Pre-built Themes

Adding a Custom Theme

Create a new theme class and inherit from the GTour.Abstractions.ITheme. Implement the class names to use. Below is an example of the Bootstrap implementation.

        public class MyOwnCustomTheme : GTour.Abstractions.ITheme
        {
            public string GTourOverlay { get; set; }
            public string GTourWrapper { get; set; }
            public string GTourArrow { get; set; }
            public string GTourStepWrapper { get; set; } = "modal-content ";
            public string GTourStepHeaderWrapper { get; set; } = "modal-header ";
            public string GTourStepContentWrapper { get; set; } = "modal-body ";
            public string GTourStepFooterWrapper { get; set; } = "modal-footer ";
            public string GTourStepHeaderTitle { get; set; } = "modal-title ";
            public string GTourStepCancelButton { get; set; } = "btn btn-warning ";
            public string GTourStepPreviousButton { get; set; } = "btn btn-secondary ";
            public string GTourStepNextButton { get; set; } = "btn btn-primary ";
            public string GTourStepCompleteButton { get; set; } = "btn btn-success ";
        }
    

Setting the theme in Startup.cs

        public void ConfigureServices(IServiceCollection services)
        {
            ...
            services.UseGTour();
            GTourService.Theme = new GTour.Themes.Bootstrap(); // Or Custom Theme
            ...
        }
    

Highlight Element

A highlight class is appended to an element for the current tour step. A default implementation is supplied and to use this, you should include the styles in the host file. The style name is .element-highlight and can also be overwritten with a custom style.

<link rel='stylesheet' href='_content/STGtour.GTour/css/styles.css' />

    .element-highlight {
        border: solid 2px #008aff;
        z-index: 9;
        position: relative;
        background-color: white;
      }