EVOLUTION-MANAGER
Edit File: themes-and-branding.html
<!doctype html> <!-- Generated by Apache Maven Doxia at 2020-04-19 Rendered using Reflow Maven Skin 2.3.0 (http://devacfr.github.io/reflow-maven-skin) --> <html xml:lang="en" lang="en"> <head> <meta charset="UTF-8" /> <title>Apache OpenMeetings Project – Theme and color</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="" /> <meta name="author" content="Apache OpenMeetings Team" /> <meta http-equiv="content-language" content="en" /> <link href="./css/themes/cerulean/bootstrap.min.css" rel="stylesheet" /> <link href="./css/fontawesome/all.min.css" rel="stylesheet" /> <link href="./css/reflow-skin.css" rel="stylesheet" /> <link rel="stylesheet" href="./js/styles/github.min.css" /> <link href="./css/lightbox.css" rel="stylesheet" /> <link href="./css/site.css" rel="stylesheet" /> <link href="./css/print.css" rel="stylesheet" media="print" /> <link rel="stylesheet" href="./css/site.css"/> </head> <!-- end : head --> <body class="page-themes-and-branding project-openmeetings-server anchorjs-enabled scrolltop-smooth-enabled m-toc-sidebar-enabled m-toc-sidebar-expanded m-toc-sidebar-autoexpandable toc-sidebar-fixed"> <nav id="m-top-navbar" class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand mb-0 h1" href="index.html"> <span class="color-highlight">Apache</span> OpenMeetings </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-collapse-1" aria-controls="top-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="top-navbar-collapse-1"> <ul class="nav navbar-nav ml-auto"> <li class="nav-item " ><a href="demo.html" title="Demo" class="nav-link" >Demo</a></li> <li class="nav-item " ><a href="downloads.html" title="Download" class="nav-link" >Download</a></li> <li class="nav-item " ><a href="https://cwiki.apache.org/confluence/display/OPENMEETINGS" title="Wiki" class="externalLink nav-link" >Wiki</a></li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">General <b class="caret"></b></a> <div class="dropdown-menu"> <a href="index.html" title="Home" class="dropdown-item ">Home</a> <a href="https://www.apache.org/licenses/" title="License" class="dropdown-item ">License</a> <a href="https://www.apache.org/" title="ASF" class="dropdown-item ">ASF</a> <a href="https://www.apache.org/foundation/sponsorship" title="Sponsorship" class="dropdown-item ">Sponsorship</a> <a href="https://www.apache.org/foundation/thanks" title="Thanks" class="dropdown-item ">Thanks</a> <a href="CallForLogo.html" title="Call For Logo" class="dropdown-item ">Call For Logo</a> <a href="NewsArchive.html" title="News archive" class="dropdown-item ">News archive</a> <a href="security.html" title="Security" class="dropdown-item ">Security</a> <a href="commercial-support.html" title="Commercial Support" class="dropdown-item ">Commercial Support</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Installation <b class="caret"></b></a> <div class="dropdown-menu"> <a href="installation.html" title="Installation" class="dropdown-item ">Installation</a> <a href="Upgrade.html" title="Upgrade" class="dropdown-item ">Upgrade</a> <a href="InstallMediaServer.html" title="Media Server Installation" class="dropdown-item ">Media Server Installation</a> <a href="https://cwiki.apache.org/confluence/display/OPENMEETINGS/Tutorials+for+installing+OpenMeetings+and+Tools" title="Tutorials" class="dropdown-item ">Tutorials</a> <a href="CommandLineAdmin.html" title="Command Line Admin" class="dropdown-item ">Command Line Admin</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Community <b class="caret"></b></a> <div class="dropdown-menu"> <a href="get-involved.html" title="Get Involved" class="dropdown-item ">Get Involved</a> <a href="team.html" title="Committers" class="dropdown-item ">Committers</a> <a href="OurUsers.html" title="Our Users" class="dropdown-item ">Our Users</a> <a href="mailing-lists.html" title="Mailing Lists" class="dropdown-item ">Mailing Lists</a> <a href="https://cwiki.apache.org/confluence/display/OPENMEETINGS/" title="Wiki" class="dropdown-item ">Wiki</a> </div> </li> <li class="nav-item dropdown active"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Configuration <b class="caret"></b></a> <div class="dropdown-menu"> <div class="dropdown-submenu"> <a href="themes-and-branding.html#integration" title="Integration" class="dropdown-item" >Integration</a> <div class="dropdown-menu"> <a href="openmeetings-webservice/apidocs/index.html" title="SOAP/REST API" target="_blank" class="dropdown-item ">SOAP/REST API</a> <a href="RestAPISample.html" title="REST API Sample" class="dropdown-item ">REST API Sample</a> <a href="LdapAndADS.html" title="Ldap and ADS" class="dropdown-item ">Ldap and ADS</a> <a href="oauth2.html" title="OAuth2" class="dropdown-item ">OAuth2</a> <a href="voip-sip-integration.html" title="VoIP and SIP" class="dropdown-item ">VoIP and SIP</a> <a href="errorvalues.html" title="Errors table" class="dropdown-item ">Errors table</a> <a href="CalDAVandGCal.html" title="CalDAV and Google Calendar integration" class="dropdown-item ">CalDAV and Google Calendar integration</a> <a href="ExternalVideo.html" title="External Video/Camera" class="dropdown-item ">External Video/Camera</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#plugins" title="Plugins" class="dropdown-item" >Plugins</a> <div class="dropdown-menu"> <a href="MoodlePlugin.html" title="Moodle Plugin" class="dropdown-item ">Moodle Plugin</a> <a href="SakaiPlugin.html" title="Sakai Plugin" class="dropdown-item ">Sakai Plugin</a> <a href="JiraPlugin.html" title="Jira Plugin" class="dropdown-item ">Jira Plugin</a> <a href="JoomlaPlugin.html" title="Joomla Plugin" class="dropdown-item ">Joomla Plugin</a> <a href="DrupalPlugin.html" title="Drupal Plugin" class="dropdown-item ">Drupal Plugin</a> <a href="BitrixPlugin.html" title="Bitrix Plugin" class="dropdown-item ">Bitrix Plugin</a> <a href="ConfluencePlugin.html" title="Confluence Plugin" class="dropdown-item ">Confluence Plugin</a> <a href="SugarCRMPlugin.html" title="SugarCRM Plugin" class="dropdown-item ">SugarCRM Plugin</a> <a href="RedminePlugin.html" title="Redmine Plugin" class="dropdown-item ">Redmine Plugin</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#db" title="DB Sample Configurations" class="dropdown-item" >DB Sample Configurations</a> <div class="dropdown-menu"> <a href="H2Config.html" title="H2" class="dropdown-item ">H2</a> <a href="IBMDB2Config.html" title="IBM DB2" class="dropdown-item ">IBM DB2</a> <a href="OracleConfig.html" title="Oracle" class="dropdown-item ">Oracle</a> <a href="MySQLConfig.html" title="MySQL" class="dropdown-item ">MySQL</a> <a href="PostgresConfig.html" title="Postgres" class="dropdown-item ">Postgres</a> <a href="MSSQLConfig.html" title="MSSQL" class="dropdown-item ">MSSQL</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#localization" title="Localization and languages" class="dropdown-item" >Localization and languages</a> <div class="dropdown-menu"> <a href="Internationalisation.html" title="Internationalisation" class="dropdown-item ">Internationalisation</a> <a href="LanguageEditor.html" title="LanguageEditor" class="dropdown-item ">LanguageEditor</a> <a href="TimeZoneHandling.html" title="TimeZoneHandling" class="dropdown-item ">TimeZoneHandling</a> <a href="EditTemplates.html" title="EditTemplates" class="dropdown-item ">EditTemplates</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#port" title="NAT Port Settings" class="dropdown-item" >NAT Port Settings</a> <div class="dropdown-menu"> <a href="PortSettings.html" title="Port settings" class="dropdown-item ">Port settings</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#performance" title="Performance" class="dropdown-item" >Performance</a> <div class="dropdown-menu"> <a href="JVMPerformanceTuning.html" title="JVM performance tuning" class="dropdown-item ">JVM performance tuning</a> <a href="NetworkCalculator.html" title="Network bandwidth calculator" class="dropdown-item ">Network bandwidth calculator</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#interface" title="User Interface" class="dropdown-item active" >User Interface</a> <div class="dropdown-menu"> <a href="" title="Themes" class="dropdown-item active">Themes</a> <a href="Dashboard.html" title="Dashboard" class="dropdown-item ">Dashboard</a> <a href="WebcamResolutions.html" title="Webcam resolutions" class="dropdown-item ">Webcam resolutions</a> <a href="ConferenceRoomLayoutOptions.html" title="Room layout options" class="dropdown-item ">Room layout options</a> <a href="HotKeys.html" title="Hot Keys" class="dropdown-item ">Hot Keys</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#customize" title="Customization" class="dropdown-item" >Customization</a> <div class="dropdown-menu"> <a href="WebappNamePath.html" title="Webapp name/path" class="dropdown-item ">Webapp name/path</a> <a href="CalendarAndTimezone.html" title="Calendar and timezone" class="dropdown-item ">Calendar and timezone</a> <a href="CustomRoomTypeHowTo.html" title="Custom room type" class="dropdown-item ">Custom room type</a> <a href="CustomCryptMechanism.html" title="Custom crypt mechanism" class="dropdown-item ">Custom crypt mechanism</a> <a href="GeneralConfiguration.html" title="General Configuration" class="dropdown-item ">General Configuration</a> <a href="PrivacyStatement.html" title="Privacy Statement" class="dropdown-item ">Privacy Statement</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#security" title="Security" class="dropdown-item" >Security</a> <div class="dropdown-menu"> <a href="RestrictedAccess.html" title="Restricted Access" class="dropdown-item ">Restricted Access</a> <a href="HTTPS.html" title="HTTPS" class="dropdown-item ">HTTPS</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#convert" title="Converters" class="dropdown-item" >Converters</a> <div class="dropdown-menu"> <a href="OpenOfficeConverter.html" title="OpenOffice Converter" class="dropdown-item ">OpenOffice Converter</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#cluster" title="Clustering" class="dropdown-item" >Clustering</a> <div class="dropdown-menu"> <a href="Clustering.html" title="Clustering" class="dropdown-item ">Clustering</a> </div> </div> <div class="dropdown-submenu"> <a href="themes-and-branding.html#misc" title="Misc" class="dropdown-item" >Misc</a> <div class="dropdown-menu"> <a href="GetVersionInfo.html" title="Get version info" class="dropdown-item ">Get version info</a> </div> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Development <b class="caret"></b></a> <div class="dropdown-menu"> <a href="scm.html" title="Source Code" class="dropdown-item ">Source Code</a> <a href="issue-management.html" title="Bugs / Issues" class="dropdown-item ">Bugs / Issues</a> <a href="dependencies.html" title="Dependencies" class="dropdown-item ">Dependencies</a> <a href="ci-management.html" title="Continuous Integration" class="dropdown-item ">Continuous Integration</a> <a href="BuildInstructions.html" title="Build Instructions" class="dropdown-item ">Build Instructions</a> <a href="JUnitTesting.html" title="JUnit Testing" class="dropdown-item ">JUnit Testing</a> <a href="ManualTesting.html" title="Manual Testing" class="dropdown-item ">Manual Testing</a> <a href="ReleaseGuide.html" title="Release Guide" class="dropdown-item ">Release Guide</a> <a href="WebsiteGuide.html" title="Website Guide" class="dropdown-item ">Website Guide</a> </div> </li> </ul><!--/ul.navbar-nav --> </div><!--/.nav-collapse --> </div> <!--/.container --> </nav> <!--/.navbar --> <div class="main-body"> <div class="header text-light bg-secondary" role="main"> <div class="container container-fluid"> <div id="banner" class="header--banner"> <div class="row m-1"> <div class="col-md-12"> <div class="float-left header--banner--left bannerLeft"> <a href="index.html"> <img class="float-left m-2 img-fluid" src="images/logo.png" alt="Apache OpenMeetings" /> </a> </div> <div class="float-right header--banner--right bannerRight"> <a href="https://apache.org"> <img class="float-left m-2 img-fluid" src="https://apache.org/img/asf_logo.png" alt="Apache" /> </a> </div> </div> </div> </div> </div> </div> <!-- end : header --> <div class="row mt-5"> <div class="d-xs-none d-sm-none d-md-none d-lg-block col-lg-2"> </div> <main class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-8" role="main"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="publishDate version-date"> Last Published: 2020-04-19</li> </ol> </nav> <section> <div class="page-header"> <h2 id="available-since-apache-openmeetings-20">Available since Apache OpenMeetings 2.0</h2> </div> <p>Themes are only available starting with Openmeetings 2.x.</p> </section> <section> <h2 id="editing-the-theme">Editing the theme</h2> <p>To modify default theme used by OM</p> <ul> <li>please open following file in the Git:<br> <a class="externalLink" href="https://github.com/apache/openmeetings/blob/master/openmeetings-web/src/main/webapp/css/theme_om/jquery-ui.css" target="_blank" rel="nofollow">https://github.com/apache/openmeetings/blob/master/openmeetings-web/src/main/webapp/css/theme_om/jquery-ui.css </a><br> Or if you already installed OpenMeetings on your machine at:<br> <code>/webapps/openmeetings/css/theme_om/jquery-ui.css</code> </li> <li>follow the link next to "To view and modify this theme, visit" text in css comments</li> </ul> <p> The file contains border, background and font color definitions as well as paths to icons that are loaded at runtime. <br> You can change the theme at runtime and just reload the browser (eventually clear the browser cache) to see updates based on modification in your theme. </p> <p>All other elements might be styled by modifying CSS files in <code>/webapps/openmeetings/css</code> folder</p> </section> <section> <h2 id="creating-custom-css-rules">Creating custom CSS rules</h2> <ol style="list-style-type: decimal"> <li>open <code>webapps/openmeetings/css/custom.css</code> file</li> <li>add you custom rules</li> <li>restart OM (force reload might be required)</li> </ol> </section> <section> <h2 id="ready-to-use-themes">Ready to use themes</h2> Ready to use themes are available <a class="externalLink" href="https://cwiki.apache.org/confluence/display/OPENMEETINGS/Custom+Themes">here</a>. </section> </main> <div class="d-none d-sm-none d-md-none d-lg-none d-xl-block col-xl-2"> <div id="m-toc-sidebar" class="d-print-none m-toc-sidebar-enabled m-toc-sidebar-expanded m-toc-sidebar-autoexpandable toc-sidebar-fixed"> <nav id="m-toc-sidebar-nav flex-column"> <ul class="m-nav--sidebar nav flex-column flex-nowrap"> <li class="h2"> <a class="nav-link" href="#available-since-apache-openmeetings-20" title="Available since Apache OpenMeetings 2.0">Available since Apache OpenMeetings 2.0</a> </li> <li class="h2"> <a class="nav-link" href="#editing-the-theme" title="Editing the theme">Editing the theme</a> </li> <li class="h2"> <a class="nav-link" href="#creating-custom-css-rules" title="Creating custom CSS rules">Creating custom CSS rules</a> </li> <li class="h2"> <a class="nav-link" href="#ready-to-use-themes" title="Ready to use themes">Ready to use themes</a> </li> </ul> </nav> </div> </div> </div> <!-- row: end --> </div> <!-- .main-body: end --> <div id="m_scrolltop" class="m-scrolltop"> <i class="fa fa-arrow-up"></i> </div> <!-- Footer --> <footer class="footer-light bg-light"> <div class="container"> <div class="row"> <div class="col bottom-nav"> <ul class="nav flex-column nav-list"> <li class="nav-header"> General </li> <li class="nav-item "><a href="index.html" title="Home" class="nav-link" >Home</a></li> <li class="nav-item "><a href="https://www.apache.org/licenses/" title="License" class="externalLink nav-link" >License</a></li> <li class="nav-item "><a href="https://www.apache.org/" title="ASF" class="externalLink nav-link" >ASF</a></li> <li class="nav-item "><a href="https://www.apache.org/foundation/sponsorship" title="Sponsorship" class="externalLink nav-link" >Sponsorship</a></li> <li class="nav-item "><a href="https://www.apache.org/foundation/thanks" title="Thanks" class="externalLink nav-link" >Thanks</a></li> <li class="nav-item "><a href="CallForLogo.html" title="Call For Logo" class="nav-link" >Call For Logo</a></li> <li class="nav-item "><a href="NewsArchive.html" title="News archive" class="nav-link" >News archive</a></li> <li class="nav-item "><a href="security.html" title="Security" class="nav-link" >Security</a></li> <li class="nav-item "><a href="commercial-support.html" title="Commercial Support" class="nav-link" >Commercial Support</a></li> </ul> </div> <div class="col bottom-nav"> <ul class="nav flex-column nav-list"> <li class="nav-header"> Installation </li> <li class="nav-item "><a href="installation.html" title="Installation" class="nav-link" >Installation</a></li> <li class="nav-item "><a href="Upgrade.html" title="Upgrade" class="nav-link" >Upgrade</a></li> <li class="nav-item "><a href="InstallMediaServer.html" title="Media Server Installation" class="nav-link" >Media Server Installation</a></li> <li class="nav-item "><a href="https://cwiki.apache.org/confluence/display/OPENMEETINGS/Tutorials+for+installing+OpenMeetings+and+Tools" title="Tutorials" class="externalLink nav-link" >Tutorials</a></li> <li class="nav-item "><a href="CommandLineAdmin.html" title="Command Line Admin" class="nav-link" >Command Line Admin</a></li> </ul> </div> <div class="col bottom-nav"> <ul class="nav flex-column nav-list"> <li class="nav-header"> Community </li> <li class="nav-item "><a href="get-involved.html" title="Get Involved" class="nav-link" >Get Involved</a></li> <li class="nav-item "><a href="team.html" title="Committers" class="nav-link" >Committers</a></li> <li class="nav-item "><a href="OurUsers.html" title="Our Users" class="nav-link" >Our Users</a></li> <li class="nav-item "><a href="mailing-lists.html" title="Mailing Lists" class="nav-link" >Mailing Lists</a></li> <li class="nav-item "><a href="https://cwiki.apache.org/confluence/display/OPENMEETINGS/" title="Wiki" class="externalLink nav-link" >Wiki</a></li> </ul> </div> <div class="col bottom-nav"> <ul class="nav flex-column nav-list"> <li class="nav-header"> Development </li> <li class="nav-item "><a href="scm.html" title="Source Code" class="nav-link" >Source Code</a></li> <li class="nav-item "><a href="issue-management.html" title="Bugs / Issues" class="nav-link" >Bugs / Issues</a></li> <li class="nav-item "><a href="dependencies.html" title="Dependencies" class="nav-link" >Dependencies</a></li> <li class="nav-item "><a href="ci-management.html" title="Continuous Integration" class="nav-link" >Continuous Integration</a></li> <li class="nav-item "><a href="BuildInstructions.html" title="Build Instructions" class="nav-link" >Build Instructions</a></li> <li class="nav-item "><a href="JUnitTesting.html" title="JUnit Testing" class="nav-link" >JUnit Testing</a></li> <li class="nav-item "><a href="ManualTesting.html" title="Manual Testing" class="nav-link" >Manual Testing</a></li> <li class="nav-item "><a href="ReleaseGuide.html" title="Release Guide" class="nav-link" >Release Guide</a></li> <li class="nav-item "><a href="WebsiteGuide.html" title="Website Guide" class="nav-link" >Website Guide</a></li> </ul> </div> </div> <!-- END: .row --> </div> <!-- END: .container --> </footer> <div class="container subfooter text-center"> <div class="row"> <div class="col-md-12"> <p class="copyright">Copyright ©2012-2020 <a href="https://apache.org">Apache Software Foundation</a> . All Rights Reserved.</p> </div> </div> </div> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="./js/jquery.min.js" crossorigin="anonymous"></script> <script src="./js/popper.min.js" crossorigin="anonymous"></script> <script src="./js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="./js/lightbox.min.js" crossorigin="anonymous"></script> <script src="./js/highlight.min.js" crossorigin="anonymous"></script> <script src="./js/site.js" type="text/javascript"></script> <script src="./js/jquery-ui.min.js" type="text/javascript"></script> <script src="./js/netcalc.js" type="text/javascript"></script> <p class="text-center">Apache OpenMeetings, OpenMeetings, Apache, the Apache feather, and the Apache OpenMeetings project logo</p> <p class="text-center">are trademarks of the Apache Software Foundation.</p> <script src="./js/reflow-skin.js" crossorigin="anonymous"></script> <script src="./js/anchor.min.js" crossorigin="anonymous"></script> </body> </html>