CINXE.COM
Roundcube Webmail Screenshots
<!DOCTYPE html> <html lang="en" class="h-100" data-bs-theme="light"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Roundcube Webmail Screenshots</title> <meta name="keywords" content="round,cube,roundcube,webmail,email,mail,client,software,solution,application,imap,php,open source,free,github,development"> <meta name="description" content="Free and open source webmail software for the masses, written in PHP"> <meta name="author" content="hello [at] roundcube dot net"> <meta name="copyright" content="Roundcube Webmail Dev Team"> <meta name="robots" content="index,follow"> <meta name="revisit-after" content="7 days"> <meta name="theme-color" content="#343a40"> <meta name="msapplication-navbutton-color" content="#343a40"> <link rel="canonical" href="https://roundcube.net/screens/"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css" integrity="sha384-h/hnnw1Bi4nbpD6kE7nYfCXzovi622sY5WBxww8ARKwpdLj5kUWjRuyiXaD1U2JT" crossorigin="anonymous"> <link rel="stylesheet" href="/styles/styles.min.css?v=2024021800"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="alternate" type="application/rss+xml" title="Roundcube News Feed" href="/feeds/atom.xml"> <script> var host = 'roundcube.net'; if ((host == window.location.host) && (window.location.protocol != 'https:')) { window.location.protocol = 'https'; } </script> </head> <body class="d-flex flex-column h-100"> <nav class="navbar navbar-expand-md bg-navbar fixed-top flex-wrap flex-md-nowrap" data-bs-theme="dark"> <div class="container-xxl"> <a class="navbar-brand" href="/"><img src="/images/roundcube_logo_icon.svg" width="40" height="40" alt="Roundcube - open source webmail software"></a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" id="navbarSupportedContent"> <div class="offcanvas-header p-4 pb-0"> <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Roundcube</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body p-4 pt-0 p-md-0"> <hr class="d-md-none text-white-50 my-3"> <ul class="navbar-nav me-auto flex-row flex-wrap"> <li class="nav-item col-6 col-md-auto"><a href="/about/" class="nav-link ">About</a></li> <li class="nav-item col-6 col-md-auto"><a href="/news/" class="nav-link ">News</a></li> <li class="nav-item col-6 col-md-auto"><a href="/screens/" class="nav-link active">Screenshots <span class="visually-hidden">(current)</span></a></li> <li class="nav-item col-6 col-md-auto"><a href="/download/" class="nav-link ">Download</a></li> <li class="nav-item col-6 col-md-auto"><a href="https://plugins.roundcube.net" class="nav-link" target="_blank">Plugins</a></li> <li class="nav-item col-6 col-md-auto"><a href="/support/" class="nav-link ">Support</a></li> <li class="nav-item col-6 col-md-auto"><a href="/contribute/" class="nav-link ">Contribute</a></li> </ul> <hr class="d-md-none text-white-50 my-3"> <ul class="navbar-nav flex-row flex-wrap ms-md-auto float-md-end"> <li class="nav-item col-6 col-md-auto"><a class="nav-link p-md-2" aria-label="GitHub" href="https://github.com/roundcube/roundcubemail" target="_blank" rel="noopener"><span class="fa-brands fa-github"></span><span class="d-md-none ps-2">GitHub</span></a></li> <li class="nav-item col-6 col-md-auto"><a class="nav-link p-md-2" aria-label="DockerHub" href="https://hub.docker.com/r/roundcube/roundcubemail/" target="_blank" rel="noopener"><span class="fa-brands fa-docker"></span><span class="d-md-none ps-2">Docker</span></a></li> <li class="nav-item col-6 col-md-auto"><a class="nav-link p-md-2" aria-label="X" href="https://x.com/roundcube" target="_blank" rel="noopener"><span class="fa-brands fa-x-twitter"></span><span class="d-md-none ps-2">X</span></a></li> </ul> </div> </div> </div> </nav> <main class="flex-shrink-0 container pb-5"> <h1>Impressions of Roundcube's User Interface</h1> <p>Below are some screenshots of Roundcube in use. Additional skins are <a href="https://packagist.org/?type=roundcube-skin" class="rc-icon external-link" target="_blank">available on Packagist</a>. You can also <a href="https://github.com/roundcube/roundcubemail/wiki/Skins" class="rc-icon external-link" target="_blank">create your own skin</a> or <a href="https://github.com/roundcube/roundcubemail/wiki/Skins#extending-skins" class="rc-icon external-link" target="_blank">extend an existing skin</a> to make Roundcube look just right for you.</p> <h2 id="elastic" class="mb-0">Elastic <a class="anchor" href="#elastic" aria-label="Link to this section: Elastic"></a></h2> <span class="text-body-secondary mt-0">Author: Aleksander Machniak</span> <p class="my-2">Released with Roundcube version 1.4.0, Elastic is Roundcube's first official responsive skin. It has support for desktops, tablets and phones.</p> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link text-capitalize active " id="elastic-desktop-tab" data-bs-toggle="tab" href="#elastic-desktop" role="tab" aria-controls="elastic-desktop" aria-selected="true">desktop</a> </li> <li class="nav-item"> <a class="nav-link text-capitalize " id="elastic-tablet-tab" data-bs-toggle="tab" href="#elastic-tablet" role="tab" aria-controls="elastic-tablet" aria-selected="true">tablet</a> </li> <li class="nav-item"> <a class="nav-link text-capitalize " id="elastic-phone-tab" data-bs-toggle="tab" href="#elastic-phone" role="tab" aria-controls="elastic-phone" aria-selected="true">phone</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active " id="elastic-desktop" role="tabpanel" aria-labelledby="elastic-desktop-tab"> <ul id="screenshots-elastic-desktop" class="screens p-0 w-100 mt-3"> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-1" class="d-inline-block text-center" href="#" title="Mailbox view" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/mailbox_widescreen.png" height="97" alt="Mailbox view"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-2" class="d-inline-block text-center" href="#" title="Message viewer with privacy protection" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/viewmail.png" height="97" alt="Message viewer with privacy protection"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-3" class="d-inline-block text-center" href="#" title="Multilingual display" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/mailbox_cn.png" height="97" alt="Multilingual display"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-4" class="d-inline-block text-center" href="#" title="Dark mode support" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/mailbox_dark.png" height="97" alt="Dark mode support"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-5" class="d-inline-block text-center" href="#" title="Compose HTML mails with attachments" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/compose.png" height="97" alt="Compose HTML mails with attachments"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-6" class="d-inline-block text-center" href="#" title="Address book with LDAP integration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/contacts.png" height="97" alt="Address book with LDAP integration"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-7" class="d-inline-block text-center" href="#" title="Extensible contact management form" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/contacts_edit.png" height="97" alt="Extensible contact management form"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-8" class="d-inline-block text-center" href="#" title="Versatile user settings" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/settings_preferences.png" height="97" alt="Versatile user settings"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-9" class="d-inline-block text-center" href="#" title="Easy IMAP folder management" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/settings_folders.png" height="97" alt="Easy IMAP folder management"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-10" class="d-inline-block text-center" href="#" title="Sender identities with signature" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/settings_identities.png" height="97" alt="Sender identities with signature"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-11" class="d-inline-block text-center" href="#" title="Plugins like Enigma for signing and encrypting emails" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/settings_enigma.png" height="97" alt="Plugins like Enigma for signing and encrypting emails"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-desktop-12" class="d-inline-block text-center" href="#" title="...or Managesieve filter configuration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/desktop/thumbs/settings_managesieve.png" height="97" alt="...or Managesieve filter configuration"></a></li> </ul> </div> <div class="tab-pane fade " id="elastic-tablet" role="tabpanel" aria-labelledby="elastic-tablet-tab"> <ul id="screenshots-elastic-tablet" class="screens p-0 w-100 mt-3"> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-1" class="d-inline-block text-center" href="#" title="Mailbox view" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/mailbox_widescreen.png" height="97" alt="Mailbox view"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-2" class="d-inline-block text-center" href="#" title="Message viewer with privacy protection" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/viewmail.png" height="97" alt="Message viewer with privacy protection"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-3" class="d-inline-block text-center" href="#" title="Multilingual display" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/mailbox_cn.png" height="97" alt="Multilingual display"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-4" class="d-inline-block text-center" href="#" title="Dark mode support" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/mailbox_dark.png" height="97" alt="Dark mode support"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-5" class="d-inline-block text-center" href="#" title="Compose HTML mails with attachments" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/compose.png" height="97" alt="Compose HTML mails with attachments"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-6" class="d-inline-block text-center" href="#" title="Address book with LDAP integration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/contacts.png" height="97" alt="Address book with LDAP integration"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-7" class="d-inline-block text-center" href="#" title="Extensible contact management form" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/contacts_edit.png" height="97" alt="Extensible contact management form"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-8" class="d-inline-block text-center" href="#" title="Versatile user settings" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/settings_preferences.png" height="97" alt="Versatile user settings"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-9" class="d-inline-block text-center" href="#" title="Easy IMAP folder management" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/settings_folders.png" height="97" alt="Easy IMAP folder management"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-10" class="d-inline-block text-center" href="#" title="Sender identities with signature" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/settings_identities.png" height="97" alt="Sender identities with signature"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-11" class="d-inline-block text-center" href="#" title="Plugins like Enigma for signing and encrypting emails" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/settings_enigma.png" height="97" alt="Plugins like Enigma for signing and encrypting emails"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-tablet-12" class="d-inline-block text-center" href="#" title="...or Managesieve filter configuration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/tablet/thumbs/settings_managesieve.png" height="97" alt="...or Managesieve filter configuration"></a></li> </ul> </div> <div class="tab-pane fade " id="elastic-phone" role="tabpanel" aria-labelledby="elastic-phone-tab"> <ul id="screenshots-elastic-phone" class="screens p-0 w-100 mt-3"> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-1" class="d-inline-block text-center" href="#" title="Mailbox view" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/mailbox_widescreen.png" height="97" alt="Mailbox view"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-2" class="d-inline-block text-center" href="#" title="Message viewer with privacy protection" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/viewmail.png" height="97" alt="Message viewer with privacy protection"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-3" class="d-inline-block text-center" href="#" title="Multilingual display" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/mailbox_cn.png" height="97" alt="Multilingual display"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-4" class="d-inline-block text-center" href="#" title="Dark mode support" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/mailbox_dark.png" height="97" alt="Dark mode support"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-5" class="d-inline-block text-center" href="#" title="Compose HTML mails with attachments" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/compose.png" height="97" alt="Compose HTML mails with attachments"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-6" class="d-inline-block text-center" href="#" title="Address book with LDAP integration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/contacts.png" height="97" alt="Address book with LDAP integration"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-7" class="d-inline-block text-center" href="#" title="Extensible contact management form" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/contacts_edit.png" height="97" alt="Extensible contact management form"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-8" class="d-inline-block text-center" href="#" title="Versatile user settings" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/settings_preferences.png" height="97" alt="Versatile user settings"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-9" class="d-inline-block text-center" href="#" title="Easy IMAP folder management" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/settings_folders.png" height="97" alt="Easy IMAP folder management"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-10" class="d-inline-block text-center" href="#" title="Sender identities with signature" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/settings_identities.png" height="97" alt="Sender identities with signature"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-11" class="d-inline-block text-center" href="#" title="Plugins like Enigma for signing and encrypting emails" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/settings_enigma.png" height="97" alt="Plugins like Enigma for signing and encrypting emails"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-elastic-phone-12" class="d-inline-block text-center" href="#" title="...or Managesieve filter configuration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/elastic/phone/thumbs/settings_managesieve.png" height="97" alt="...or Managesieve filter configuration"></a></li> </ul> </div> </div> <h2 id="larry" class="mb-0">Larry <a class="anchor" href="#larry" aria-label="Link to this section: Larry"></a></h2> <span class="text-body-secondary mt-0">Author: FLINT / B眉ro f眉r Gestaltung, Switzerland</span> <p class="my-2">Released with Roundcube version 0.8.0, Larry provides visual impact thanks to its use of color and specially designed graphics.<br><i>Support deprecated as of Roundcube 1.6.0. Available via Composer.</i></p> <div class="tab-content"> <div class="tab-pane fade show active " id="larry-desktop" role="tabpanel" > <ul id="screenshots-larry-desktop" class="screens p-0 w-100 mt-3"> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-1" class="d-inline-block text-center" href="#" title="Three-paned mailbox view" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/mailbox_widescreen.png" height="97" alt="Three-paned mailbox view"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-2" class="d-inline-block text-center" href="#" title="Message viewer with privacy protection" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/viewmail.png" height="97" alt="Message viewer with privacy protection"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-3" class="d-inline-block text-center" href="#" title="Multilingual display" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/mailbox_cn.png" height="97" alt="Multilingual display"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-4" class="d-inline-block text-center" href="#" title="Compose HTML mails with attachments" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/compose.png" height="97" alt="Compose HTML mails with attachments"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-5" class="d-inline-block text-center" href="#" title="Address book with LDAP integration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/contacts.png" height="97" alt="Address book with LDAP integration"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-6" class="d-inline-block text-center" href="#" title="Extensible contact management form" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/contacts_edit.png" height="97" alt="Extensible contact management form"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-7" class="d-inline-block text-center" href="#" title="Versatile user settings" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/settings_preferences.png" height="97" alt="Versatile user settings"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-8" class="d-inline-block text-center" href="#" title="Easy IMAP folder management" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/settings_folders.png" height="97" alt="Easy IMAP folder management"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-9" class="d-inline-block text-center" href="#" title="Sender identities with signature" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/settings_identities.png" height="97" alt="Sender identities with signature"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-10" class="d-inline-block text-center" href="#" title="Plugins like Enigma for signing and encrypting emails" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/settings_enigma.png" height="97" alt="Plugins like Enigma for signing and encrypting emails"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-larry-desktop-11" class="d-inline-block text-center" href="#" title="...or Managesieve filter configuration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/larry/desktop/thumbs/settings_managesieve.png" height="97" alt="...or Managesieve filter configuration"></a></li> </ul> </div> </div> <h2 id="classic" class="mb-0">Classic <a class="anchor" href="#classic" aria-label="Link to this section: Classic"></a></h2> <span class="text-body-secondary mt-0">Author: The Roundcube Dev Team</span> <p class="my-2">Formally known as Default, renamed to Classic as of Roundcube version 0.8.0, this is Roundcube's original skin.<br><i>Support deprecated as of Roundcube 1.4.0. Available via Composer.</i></p> <div class="tab-content"> <div class="tab-pane fade show active " id="classic-desktop" role="tabpanel" > <ul id="screenshots-classic-desktop" class="screens p-0 w-100 mt-3"> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-1" class="d-inline-block text-center" href="#" title="Three-paned mailbox view" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/mailbox_widescreen.png" height="97" alt="Three-paned mailbox view"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-2" class="d-inline-block text-center" href="#" title="Message viewer with privacy protection" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/viewmail.png" height="97" alt="Message viewer with privacy protection"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-3" class="d-inline-block text-center" href="#" title="Multilingual display" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/mailbox_cn.png" height="97" alt="Multilingual display"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-4" class="d-inline-block text-center" href="#" title="Compose HTML mails with attachments" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/compose.png" height="97" alt="Compose HTML mails with attachments"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-5" class="d-inline-block text-center" href="#" title="Address book with LDAP integration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/contacts.png" height="97" alt="Address book with LDAP integration"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-6" class="d-inline-block text-center" href="#" title="Extensible contact management form" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/contacts_edit.png" height="97" alt="Extensible contact management form"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-7" class="d-inline-block text-center" href="#" title="Versatile user settings" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/settings_preferences.png" height="97" alt="Versatile user settings"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-8" class="d-inline-block text-center" href="#" title="Easy IMAP folder management" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/settings_folders.png" height="97" alt="Easy IMAP folder management"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-9" class="d-inline-block text-center" href="#" title="Sender identities with signature" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/settings_identities.png" height="97" alt="Sender identities with signature"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-10" class="d-inline-block text-center" href="#" title="Plugins like Enigma for signing and encrypting emails" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/settings_enigma.png" height="97" alt="Plugins like Enigma for signing and encrypting emails"></a></li> <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-classic-desktop-11" class="d-inline-block text-center" href="#" title="...or Managesieve filter configuration" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/classic/desktop/thumbs/settings_managesieve.png" height="97" alt="...or Managesieve filter configuration"></a></li> </ul> </div> </div> <p class="text-body-secondary mt-5">Note: The following plugins, distributed with Roundcube, were active when the screenshots where taken: acl, archive, enigma, help, managesieve, markasjunk, password, and vcard_attachments.</p> <div id="viewer" class="modal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered modal-xl mx-auto"> <div class="modal-content bg-transparent"> <div class="modal-body text-center p-0 loading"> <div class="modal-loading text-center py-5"><span class="fa-solid fa-circle-notch fa-spin"></span></div> <img src="data:," class="img-fluid mx-auto" onload="screen_loaded(this);" data-bs-dismiss="modal" alt=""> <div class="modal-arrow left-arrow" onclick="move_screen(true);"></div> <div class="modal-arrow right-arrow" onclick="move_screen();"></div> </div> <div class="modal-footer bg-footer d-block border-top-0"> <div class="nav float-end ps-2 mb-0" data-bs-theme="dark"> <a href="#" onclick="move_screen(true); return false;" class="fa-solid fa-circle-chevron-left nav-link previous p-0 pe-1"></a> <a href="#" onclick="move_screen(); return false;" class="fa-solid fa-circle-chevron-right nav-link next p-0 px-1"></a> <a href="#" data-bs-dismiss="modal" class="fa-solid fa-circle-xmark nav-link p-0 ps-1"></a> </div> <p class="m-0"></p> </div> </div> </div> </div> <script> var viewer = document.getElementById('viewer'); viewer.addEventListener('show.bs.modal', function(e) { var source = e.relatedTarget; var img = source.querySelector('img'); var screen = this.querySelector('.modal-body > img'); screen.src = img.getAttribute('src').replace('/thumbs/', '/screens/'); screen.alt = img.getAttribute('alt'); this.querySelector('.modal-footer > p').textContent = img.getAttribute('alt'); this.setAttribute('data-rc-cur-index', source.id.replace(/^screenshots-[a-z]+-[a-z]+-/, '')); this.setAttribute('data-rc-cur-source', source.id.replace(/-[0-9]+$/, '')); // update button status var prev_button = this.querySelector('.modal-footer > .nav > .nav-link.previous').classList; var next_button = this.querySelector('.modal-footer > .nav > .nav-link.next').classList; prev_button.remove('disabled'); next_button.remove('disabled'); prev_button.add(get_next_screen_id(true) == 0 ? 'disabled' : null); next_button.add(get_next_screen_id() == 0 ? 'disabled' : null); }); viewer.addEventListener('hidden.bs.modal', function() { var screen = this.querySelector('.modal-body > img'); screen.src = 'data:,'; screen.alt = ''; screen.style.removeProperty('height'); if (viewer.getAttribute('data-rc-no-resize') != 'true') { this.querySelector('.modal-dialog').style.removeProperty('width'); } this.querySelector('.modal-footer > p').textContent = ''; this.setAttribute('data-rc-cur-index', ''); this.setAttribute('data-rc-cur-source', ''); this.querySelector('.modal-body').classList.add('loading'); }); // keyboard navigation document.addEventListener('keyup', function(e) { // Is the modal viewer open? if (viewer.classList.contains('show')) { if (e.which === 37) { // left move_screen(true); } else if (e.which === 39) { // right move_screen(); } } }); // swipe navigation var touchstartX = 0; var touchstartY = 0; viewer.querySelector('.modal-body').addEventListener('touchstart', function(event) { touchstartX = event.changedTouches[0].screenX; touchstartY = event.changedTouches[0].screenY; }); viewer.querySelector('.modal-body').addEventListener('touchend', function(event) { var touchendX = event.changedTouches[0].screenX; var touchendY = event.changedTouches[0].screenY; if ((touchendY - touchstartY) > 100 || (touchendY - touchstartY) < -100) { return; } else if (viewer.classList.contains('show')) { if (touchendX - touchstartX > 200) { // left move_screen(true); } else if (touchendX - touchstartX < -200) { // right move_screen(); } } }); function screen_loaded(img) { viewer.querySelector('.modal-dialog').style.removeProperty('width'); var max_width = viewer.querySelector('.modal-body').offsetWidth, max_height = window.innerHeight * 0.75, img_height; img_height = Math.min((img.height / img.width) * max_width, img.height); if (img_height > max_height) { img_height = max_height; } img_width = (img.width / img.height) * img_height; img.style.height = img_height + 'px'; viewer.querySelector('.modal-dialog').style.width = img_width + 'px'; viewer.querySelector('.modal-body').classList.remove('loading'); } function move_screen(reverse) { var source = viewer.getAttribute('data-rc-cur-source'); var target = get_next_screen_id(reverse); if (target > 0) { viewer.setAttribute('data-rc-no-resize', true); bootstrap.Modal.getInstance(viewer).hide(); document.getElementById(source + '-' + target).click(); viewer.setAttribute('data-rc-no-resize', false); } } function get_next_screen_id(reverse) { var source = viewer.getAttribute('data-rc-cur-source'); var current = parseInt(viewer.getAttribute('data-rc-cur-index')); var total = document.getElementById(source).getElementsByTagName('li').length; var target = 0; if (reverse) { target = (current === 1) ? 0 : (current - 1); // change 0 to total for loop } else { target = (current === total) ? 0 : (current + 1); // change 0 to 1 for loop } return target; } </script> </main> <footer class="text-body-secondary w-100 mt-auto pt-3 small bg-body-tertiary"> <div class="container"> <div class="row"> <div class="col-12 col-sm-6"> <ul class="m-0 p-0"> <li><a href="/support">Support</a></li> <li><a href="/contact">Contact</a></li> <li><a href="https://github.com/roundcube/roundcubemail/wiki/Howto-Report-Issues" class="rc-icon external-link" target="_blank" rel="noopener">Found a bug?</a></li> <li><a href="/license">License</a></li> <li class="mt-3"> <div class="color-modes dropend"> <a class="dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false"> <span class="fa-solid fa-palette me-1"></span> Switch theme </a> <ul class="dropdown-menu py-1"> <li><a class="dropdown-item px-2 pe-3 py-1 rc-icon light-mode" href="#" onclick="switch_color_mode('light'); return false;">Light theme</a></li> <li><a class="dropdown-item px-2 pe-3 py-1 rc-icon dark-mode" href="#" onclick="switch_color_mode('dark'); return false;">Dark theme</a></li> <li><a class="dropdown-item px-2 pe-3 py-1 rc-icon auto-mode current-theme" href="#" onclick="switch_color_mode('auto'); return false;">Auto detect</a></li> </ul> </div> </li> </ul> </div> <div class="col-12 col-sm-6 mt-4 mt-sm-0 text-sm-end"> <ul class="m-0 p-0"> <li><a aria-label="GitHub" href="https://github.com/roundcube/roundcubemail" target="_blank" rel="noopener"><img src="https://img.shields.io/github/stars/roundcube/roundcubemail?color=%23066da5&label=stars&logo=github&logoColor=%23fff&style=flat-square" alt="GitHub Stars"></a></li> <li><a aria-label="GitHub Contributors" href="https://github.com/roundcube/roundcubemail/graphs/contributors" target="_blank" rel="noopener"><img src="https://img.shields.io/github/contributors/roundcube/roundcubemail?color=%23066da5&label=contributors&logo=github&logoColor=%23fff&style=flat-square" alt="GitHub Contributors"></a></li> <li><a aria-label="DockerHub" href="https://hub.docker.com/r/roundcube/roundcubemail/" target="_blank" rel="noopener"><img src="https://img.shields.io/docker/pulls/roundcube/roundcubemail?color=%23066da5&label=pulls&logo=docker&logoColor=%23fff&style=flat-square" alt="Docker Downloads"></a></li> </ul> </div> </div> <div class="row mt-5"> <div class="col"> <p>Hosted by <a href="https://github.com"><span class="fa-brands fa-github"></span> GitHub</a></p> <p>© Roundcube.net, all rights reserved.</p> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script> var color_mode = 'auto'; if (typeof(Storage) !== "undefined" && window.localStorage.getItem("color-mode") !== null) { color_mode = window.localStorage.getItem("color-mode"); } switch_color_mode(color_mode, true); function switch_color_mode(mode, onload) { var color_mode = mode; if (mode == 'auto') { color_mode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', color_mode) document.querySelector('div.color-modes > ul.dropdown-menu a.current-theme').classList.remove('current-theme'); document.querySelector('div.color-modes > ul.dropdown-menu a.' + mode + '-mode').classList.add('current-theme'); if (!onload && typeof(Storage) !== "undefined") { if (mode == 'auto') { window.localStorage.removeItem('color-mode'); } else { window.localStorage.setItem('color-mode', mode); } } var event = new Event('switch-color-mode'); document.dispatchEvent(event); } var copytext = "Copy to clipboard"; var copycomplete = "Copied"; var copyerror = "Copy failed"; document.querySelectorAll('a.copy-popover-link').forEach((sumbtn) => { var popover = new bootstrap.Popover(sumbtn, { content: sumbtn.closest('td').querySelector('.copy-popover-target').innerHTML, html: true, customClass: 'copy-popover' }); sumbtn.addEventListener('shown.bs.popover', () => { document.querySelectorAll('div.popover a.copy-link').forEach((copybtn) => { var tooltipInstance = new bootstrap.Tooltip(copybtn, {'title': copytext}); copybtn.addEventListener("click", function(e) { clipboard(this, tooltipInstance, e); }, false); }); }); }); if (document.querySelectorAll('a.copy-popover-link').length > 0) { document.addEventListener("click", function(e) { document.querySelectorAll('a.copy-popover-link').forEach((sumbtn) => { var popover = bootstrap.Popover.getInstance(sumbtn); if (popover.tip && event.target.closest('.popover.show') == null && popover.tip.classList.contains('show')) { popover.hide(); } }); }, false); } document.querySelectorAll('a.copy-link').forEach((copybtn) => { var tooltipInstance = new bootstrap.Tooltip(copybtn, {'title': copytext}); copybtn.addEventListener("click", function(e) { clipboard(this, tooltipInstance, e); }, false); }); async function clipboard(copybtn, tooltipInstance, e) { e.preventDefault(); var payload = copybtn.closest('p,td,div').querySelector('.copy-target').textContent.trimEnd(); try { await navigator.clipboard.writeText(payload); copybuttonupdate(copybtn, tooltipInstance, 'complete', copycomplete); } catch (err) { copybuttonupdate(copybtn, tooltipInstance, 'error', copyerror); } } function copybuttonupdate(copybtn, tooltipInstance, css, text) { tooltipInstance.setContent({'.tooltip-inner': text}); copybtn.classList.add(css); window.setTimeout(function() { tooltipInstance.setContent({'.tooltip-inner': copytext}); copybtn.classList.remove(css); }, 2500); } </script> </body> </html>