Insert background on login page

BrunoMendes · October 30, 2023, 10:48pm

Hello OpenEMR family, I need help inserting a background on the Login page, I tried several ways, but without success. can anybody help me? Attached is an image of what I need to do.

adunsulag · October 31, 2023, 1:17pm

I put together a custom theme for a therapy clinic here: GitHub - DiscoverAndChange/oe-module-manning-custom-theme: Custom OpenEMR module theme that enhances OpenEMR Cobalt Blue theme for Manning client.

You can see how I customize the login page here: https://github.com/DiscoverAndChange/oe-module-manning-custom-theme/blob/main/public/assets/css/manning-theme.css

You should be able to use the same mechanics to override the background image of the login page.

Note that I write a custom module so I’m not hacking core code and can keepup with updates in the project. Others in the forum have done this kind of thing by modifying the themes page and recompiling. This approach lets a simple CSS to override values in the pages.

The key where I inject the CSS into the head of every page is here:

github.com

DiscoverAndChange/oe-module-manning-custom-theme/blob/04794b1a046a99d0e9bd57753c89968d89a497e9/src/Bootstrap.php#L80

      
        
            
            
    $this->moduleDirectoryName = basename(dirname(__DIR__));
                $this->eventDispatcher = $eventDispatcher;
                $this->eventDispatcher->addListener(TwigEnvironmentEvent::EVENT_CREATED, [$this, 'addTemplateOverrideLoader']);
            
            
    $this->logger = new SystemLogger();
            }
            
            
public function subscribeToEvents()
            {
                $this->eventDispatcher->addListener(StyleFilterEvent::EVENT_NAME, [$this, 'addStylesheet']);
                $this->eventDispatcher->addListener(TemplatePageEvent::class, [$this, 'oauth2TemplatePageOverrides']);
            }
            
            
public function addTemplateOverrideLoader(TwigEnvironmentEvent $event)
            {
                // TODO: @adunsulag figure out why this is getting fired twice.
                $twig = $event->getTwigEnvironment();
                // we make sure we can override our file system directory here.
                $loader = $twig->getLoader();
                if ($loader instanceof FilesystemLoader) {

github.com

DiscoverAndChange/oe-module-manning-custom-theme/blob/04794b1a046a99d0e9bd57753c89968d89a497e9/src/Bootstrap.php#L110-L115

      
        
            public function addStylesheet(StyleFilterEvent $event)
            {
                $styles = $event->getStyles();
                $styles[] = $this->getAssetPath() . "/css/manning-theme.css?v=" . urlencode($GLOBALS['v_js_includes']);
                $event->setStyles($styles);
            }

BrunoMendes · November 4, 2023, 8:02pm

Hello Stephen Nielson, I replaced the files, as per your guidance, but I was unsuccessful. After this change, should I do any more configuration? Thank you in advance for your help.

Param_CapMinds · November 6, 2023, 12:07pm

Hi Bruno Mendes,
Add body background style in file templates\login\base.html.twig

body{
background-image: url(“bg_image.png”);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

output:

Thanks,
Param,
help@capminds.com