Upcoming Customizable Theme > Your Feedback is appreciated

Hi there,

this weekend I started to make the default jitsi theme customizable. The idea behind was, to leave as much as possible unchanged, but give us the possibility to adjust jitsi fast and simple on our customers design. What have I did?

First I defined a preset of css global variables:

:root {
    --body-background-color: #474747;
	--body-font-family: -apple-system, BlinkMacSystemFont, open_sanslight, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    --body-font-size: 14px;
    --body-font-weight: 400;
	--body-text-color: #f1f1f1;
	--body-line-height: 1.4285714286;
    --text-dark-color: #333;
	--text-light-color: #f1f1f1;
    --small-font-size: 12px;
	--small-text-color: #707070;
    --heading-1-3-font-family: Times, serif;
	--heading-1-3-color: #333;
    --heading-4-6-font-family: Times, serif;
	--heading-4-6-color: #333;
	--link-color: #95a5a6;
	--link-hover-color: #7f8c8d;
	--link-active-color: #7f8c8d;
	--primary-color: #0c2461;
	--primary-light-color: #1e3799;
	--primary-dark-color: #061230;
	--secondary-color: #4a69bd;
	--secondary-light-color: #6a89cc;
	--secondary-dark-color: #25345e;
	--success-color: #20bf6b;
	--success-light-color: #26de81;
	--success-dark-color: #105f35;
	--info-color: #2d98da;
	--info-light-color: #45aaf2;
	--info-dark-color: #164c6d;	
	--warning-color: #f7b731;
	--warning-light-color: #fed330;
	--warning-dark-color: #7b5b18;	
	--danger-color: #eb3b5a;
	--danger-light-color: #fc5c65;
	--danger-dark-color: #751d2d;
	--modal-background-color: lilac;
	--modal-border-color: #7f8c8d;
	--navigation-background-color: pink;
	--navigation-border-color: #7f8c8d;
	--poweredby-text-color: #707070;
}

After this I started to replace the hard coded definitions with variables in all.css. Then I defined different color sets (yellow, red, blue, green, light, dark). That means I generated css files only containing the color definitons as shown above and saved them with their respective color name (yellow.css, red.css etc.). At the beginning of the reworked all.css (with variables instead of hard coded definitions) I have only to import the preferred color.css now to change the complete appearance.

Remarking that there are many inline styles, e.g. the popup panels background styling, I created a overrides.css, that contains all inline style definitions that should be overwritten. Added an import line to all.css, to load all the overrides for the inline styles.

Here’s the actual content from overrides.css:

    /* Inline Style > Setting Panel */
.itZGfB {
    color: var(--text-light-color) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    padding: 20px 0px 4px;
}
/* Inline Style > Modal Panels Background */
.eoRGoR, .CvzNc {
    background-color: var(--primary-light-color) !important;
    border-radius: 3px;
    box-shadow: rgba(9, 30, 66, 0.08) 0px 0px 0px 1px, rgba(9, 30, 66, 0.08) 0px 2px 1px, rgba(9, 30, 66, 0.31) 0px 0px 20px -6px;
    color: var(--text-light-color) !important;
}

/* Inline Style > Filmstrip Text */
.tOoji {
    color: var(--text-light-color) !important;
}

/* ALL.CSS > Welcome Page */
.welcome .header .tab-container {
  min-height: 150px !important;
  max-width: calc(100% - 40px) !important;
  width: 680px !important;
  background: #f3f3f3 !important;
  border-top: 2px solid var(--primary-color);
  padding: 25px 30px !important;
}

.welcome-page-content {
    margin-top: 0 !important;
}

Here’s the actual result:

All the changed files are licensed under GPL and free available. We like to give something back to this great project and remarked, that a lot of discussions are in the community about adjusting the default theme.

At this point your feedback is appreciated: Do you have some wishes, critics, improvements, requests …?

Best regards,
Jürgen

Sorry… new user can only embed one media. So here are the other ones step by step:

Sorry… new user can only embed one media. So here are the other ones step by step:

Sorry… new user can only embed one media. So here are the other ones step by step:

Sorry… new user can only embed one media. So here are the other ones step by step:

1 Like

Sorry… new user can only embed one media. So here are the other ones step by step:

Here you can see the changed colors on the conference site:

1 Like

FYI there has been posts on about changing css without patching all.css. IIRC it relies on the empty body.html file - it’s not touched across updates, so you can add included css files safely.
Try to search the forum for that, you should get it.

@gpatel-fr: Before starting with this project, I have spend many hours to do a research, how to customize the UI. All solutions I have found are changing core code. Please could you post some links to posts in the forum, that are showing an update safe solution? Many thanks for your help

here it is (after hitting body.html + css in the search box):

Are you sure, that “body.html” isn’t overriden by update? I will make a feature request, that custom.css and custom.js should be loaded by default through the core, so we can create update safe modifications.

if you mean is there a documentation about this feature and an official warranty, of course not. But I have never seen it ‘updated’, and updating an empty file does not seem likely.

I have also never seen it updated. However, it’s really easy to have a single file copied into place after an update. Just write a simple script. Your other files that are referenced from here will not be impacted.