Adding designs to pages

support
8

You can customize modals visually with CSS.

For example

.d-modal.login-modal {
    background: url(https://upload.wikimedia.org/wikipedia/commons/9/96/Ambrosius_Bosschaert_the_Elder_%28Dutch_-_Flower_Still_Life_-_Google_Art_Project.jpg) 0% 0% / contain;
}

47%20PM
47%20PM2448×1886 1.58 MB

or

.login-modal.in .modal-inner-container {
    background: url(https://vignette.wikia.nocookie.net/mrmen/images/b/b7/MMS_MrTall_ca03-1-.jpg/revision/latest?cb=20101106151544);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    padding-left: 140px;
}

05%20PM
05%20PM1710×1176 218 KB

This isn’t functionality that comes with Discourse, so this would require a plugin or theme. There are some similar #howto topics that could help, like Banner themes (and instructions for customizing them) — there’s an example there that helps you create a collapsable banner. Dismissing the banner entirely wouldn’t be a vastly different process.

15 Likes