April 2017 Special — Windows 95 Theme

Really miss the 90s? You've come to the right place. Appcues is highly customizable, so you can even create fun themes great for the holidays or April Fool's.

In this article, we'll cover how to add our special Windows 95 theme for your modals.

To create the Windows 95 theme, go to the Styling page within Appcues and create a new theme. Make sure to clear all of the values, then add the following CSS to the CSS Editor tab:

appcues cue {
    border-radius: 0;
    border-top: ridge 3px white;
    border-left: ridge 3px white;
    border-bottom: ridge 2px black;
    border-right: ridge 2px grey;
    background-color: rgb(192,192,192);
    color: black;
    font-family: 'Arial', 'sans serif';
    -webkit-font-smoothing: none;
    font-weight: 100;
    padding: 35px 15px 50px;
}

appcues .appcues-skip > a {
    background-color: rgb(192,192,192);
    opacity: 1;
    border-top: ridge 3px white;
    border-left: ridge 3px white;
    border-bottom: ridge 2px black;
    border-right: ridge 2px grey;
    width: 20px;
    height: 20px;
    top: 4px;
    right: 4px;
    border-radius: 0;
    font-size: 18px;
    padding: 0;
    line-height: .65;
    color: black;
}

appcues cue:before {
    content: 'Messenger Service';
    color: white;
    padding: 2px 15px 0;
    box-sizing: border-box;
    width: 100%;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0;
    background: #02007d; /* Old browsers */
    background: -moz-linear-gradient(left, #02007d 0%, #0081ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #02007d 0%,#0081ce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #02007d 0%,#0081ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02007d', endColorstr='#0081ce',GradientType=1 ); /* IE6-9 */
}

/* Buttons */
appcues cue .appcues-actions {
    padding: 0 15px 15px;
}
.appcues-button, .appcues-button.appcues-button-success {
    border-radius: 0;
    border-top: ridge 3px white;
    border-left: ridge 3px white;
    border-bottom: ridge 2px black;
    border-right: ridge 2px grey;
    background-color: rgb(192,192,192);
    color: black !important;
    padding: 3px 6px 3px;
    font-weight: normal;
}

.appcues-button:hover, .appcues-button.appcues-button-success:hover {
    background-color: rgb(192,192,192);
    outline: 1px solid black;
}

.appcues-button:active, .appcues-button.appcues-button-success:active {
    background-color: rgb(192,192,192);
    outline: 1px solid black;
}

.appcues-button:first-letter {
    border-bottom: 1px solid black;
}

.appcues-button[data-step=next] {
    padding-right: 20px;
}

.appcues-button[data-step=next]:after, .appcues-button[data-step=prev]:before {
    font-size: 22px;
    font-weight: 100;
    line-height: 1;
    border: none;
} 

.appcues-button[data-step=next]:after {
    content: '\203A';
    padding: 0 5px 0 10px;
}

.appcues-button[data-step=prev] {
    padding-left: 20px;
}

.appcues-button[data-step=prev]:before {
    content: '\2039';
    padding: 0 10px 0 5px;
}

You can now use this on your modals and slideouts. Note: this does not work for tooltips or hotspots!

Still need help? Contact Us Contact Us