Custom Wizard Plugin 🧙

I have a blank page: Welcome

I setup the standard welcome template.

Welcome Template

2 Likes

I think maybe something changed with routes… I have blank page too and the error in console.

1 Like

Is your discourse and the plugin at latest versions?

1 Like

Yes they are all latest.

2 Likes

Alright. Taking a look now.

p.s.

Just fixed the issue. Please update the plugin and confirm.

7 Likes

Hello @fzngagan,

Works perfectly :blush: Thank you for this superfast fix :heart_eyes:

2 Likes

Please refrain from updating the plugin or discourse before the first week of the next month.

4 Likes

Of course as always but unfortunately I have to do this now causing other issues. Anyways thank you to fix this out of the maintenance date. :slightly_smiling_face:

2 Likes

Yes, it works now.

However, on rebuild I do get this. It’s a minor thing but just letting you guys know.

3 Likes

Thanks! That was helpful. I’ve updated the plugin to address that warning.

https://github.com/paviliondev/discourse-custom-wizard/commit/76ab7aece83d445c65e185caa852a42283af644b

2 Likes

Not sure what’s going on but since I’ve moved my forum to another subdomain (after following the documentation instructions and remapping everything), the CSS for custom wizards doesn’t seem to work. Every time I open the console it says that some stylesheets have failed to load, even when they loaded properly on the last subdomain.

1 Like

how you were doing remapping ?

1 Like

The docs say to fix broken links to enter the app and run discourse remap oldurl newurl then to rebake posts.

1 Like

Still having these issues and I’m no closer to figuring this out myself. I’ve tried rebuilding the forum to see if the plugin would fix, but I’ve had no luck.

1 Like

Perhaps you could share the specific messages that you’re seeing?

Screenshots of the console might help.

Also what are the exact symptoms?

i. e. What isn’t happening that should be WRT to CSS? When the CSS fails to load what is the impact?

1 Like

Is it possible to change the font? If so, how?

2 Likes

The functionality works as intended, it’s just some of the styling doesn’t work, such as the fonts:

It does say that a stylesheet couldn’t be loaded, but I don’t know why it didn’t transfer or how to reinstall them.

1 Like

For anyone interested in customizing the look of your wizard here is the css to customize pretty much everything. Change to fit your needs. Note that I changed the Done button to read Continue… and hid the Maybe Later button. I also imported some google fonts at the end.

I would recommend creating a new theme and using this within the wizard under the Theme setting.

.wizard-column .wizard-column-contents {
    background: #1D1E22;
}

.custom-wizard .wizard-field .field-label {
    color: #FEDA6A;
    margin: 0px;
}

.custom-wizard .wizard-field .field-label p {
    margin: 0px;
}

.custom-wizard .wizard-field .field-description p {
    color: #FDEBD2;
    line-height: 1.4;
}

.custom-wizard .wizard-step-description p {
    color: #FDEBD2;
}

.custom-wizard .wizard-field-upload .wizard-btn-upload-file {
    background: #FEDA6A;
    color: #1D1E22;
}

.custom-wizard .wizard-step-title p {
    color: #FEDA6A;
    margin-bottom: 0px;
}

.custom-wizard input, .custom-wizard textarea {
    background: #32343B;
    color: white;
    border: 1px solid #485769;
}

.select-kit.combo-box .select-kit-header {
    background: #32343B;
    border: 1px solid #485769;
}

.select-kit .select-kit-header .selected-name {
    color: white;
}

.select-kit .select-kit-row.is-selected.is-highlighted {
    background: #444549;
}

.wizard-column .wizard-step-footer button.wizard-btn.done:hover, .wizard-column .wizard-step-footer button.wizard-btn.done:focus, .wizard-column .wizard-step-footer button.wizard-btn.finish:hover, .wizard-column .wizard-step-footer button.wizard-btn.finish:focus {
    color: white;
    background-color: #78b657;
}

.wizard-column .wizard-step-footer button.wizard-btn.done {
    color: white;
    background-color: #65A185;
}

.wizard-column .wizard-progress {
    visibility: hidden;
}

.select-kit .select-kit-row {
    background: #32343B;
}

.select-kit .select-kit-row.is-highlighted {
    background: #7d5f01;
}

.select-kit .select-kit-row .name {
    color: #FEDA6A;
}

.select-kit .select-kit-row .name.is-highlighted {
    color: white;
}

.wizard-column .wizard-field .field-description a {
    color: #FEDA6A;
}

.wizard-column {
    border: 0px;
}

.select-kit.multi-select .multi-select-header {
    background: #32343B;
    border: 1px solid #485769;
}

.wizard-column .wizard-step-footer button.wizard-btn.done #text:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Post Image";
}

.wizard-column .wizard-step-footer button.wizard-btn.done #text {
    visibility: hidden;
}

.select-kit .select-kit-collection {
    background: #32343B;
}

.select-kit .select-kit-collection.is-highlighted {
    background: #7d5f01;
}

.select-kit .select-kit-row .discourse-tag, .select-kit .select-kit-row .discourse-tag-count {
    color: #FEDA6A;
}

.wizard-column .wizard-footer {
    border-top: 1px solid #485769;
}

.select-kit.multi-select .choices .selected-name {
    background: #485769;
}

.select-kit .select-kit-filter .filter-input {
    display: none;
}

.select-kit .select-kit-header .caret-icon {
    color: #485769;
}

.custom-wizard .wizard-field .field-label p {
    margin-top: 0px;
}

.wizard-column .wizard-btn {
    padding: .5em 3em;
}

.wizard-column .action-link {
    display: none !important;
}

.select-kit .select-kit-header .caret-icon {
    padding-left: 100px;
}

.select-kit.combo-box .select-kit-collection {
    min-width: 200px;
}

.wizard-column .wizard-footer {
    display: none;
}

.wizard-column .wizard-step-footer button.wizard-btn.done {
    visibility: hidden;
    position: relative;
}

.wizard-column .wizard-step-footer button.wizard-btn.done:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Continue...";
    background-color: #65A185;
    padding: 10px 30px;
    cursor: pointer;
    border-radius: 3px;
}

.wizard-column .wizard-step-footer button.wizard-btn.done:hover:after {
    background-color: #4d7b65;

}

.custom-wizard {
    color: #FDEBD2;
}

.wizard-column .wizard-btn.primary {
    background-color: #FEDA6A;
    color: #1D1E22;
}

.wizard-column .wizard-btn.primary:hover, .wizard-column .wizard-btn.primary:focus {
    background-color: #FEDA6A;
    color: #1D1E22;
}

@import url('https://fonts.googleapis.com/css?family=Blinker|Lato');
    body {
        font-family: 'Lato', sans-serif;
    }
    h1 {
        font-family: Blinker;
    }

5 Likes

I’ll check when I can get to my computer, but following a recent update of the Custom Wizard Plugin, I found that the font was changed to Times New Roman (or at least a Serif font) but didn’t have time to investigate further.

I THINK you’ve found a general problem that is not related to your move and remap.

1 Like

@serrif, I also get the same error - albeit I’m using a developer install so get a more specific error.

I don’t believe it’s related to your subdomain and remap actions.

It looks like the scss variables for the wizard are not where they should be, or the import is not specifying the correct location.

I’ve filed a bug on thepavilion.io which will get some attention in the next support window - probably the first week of September.

3 Likes