nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Extension module to customize login CSS

alejandrogarcia

Hi folks,

My this thread is strictly related to another thread about the same topic which already exists (https://forums.alfresco.com/en/viewtopic.php?f=47&t=42921). I have decided to go with the extension based approach, because I guess is the most suitable for most scenarios, correct me if I'm wrong.

I have followed the instructions of this Dave's blog entry(http://blogs.alfresco.com/wp/ddraper/2012/01/04/extensibilty-updates-roundup/) and I have the defined the next extension XML:

<extension>
   <modules>
      <module>
         <id>Provides a custom "login.css" that overrides required selectors.</id>
         <auto-deploy>true</auto-deploy>
         <customizations>
            <customization>
               <targetPackageRoot>org.alfresco.global</targetPackageRoot>
               <dependencies>
                  <css>/res/mycompany/login.css</css>
               </dependencies>
               <sourcePackageRoot></sourcePackageRoot>
            </customization>
         </customizations>
      </module>
   </modules>
</extension>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note: I have added the empty tag <sourcePackageRoot></sourcePackageRoot>, otherwise I get this error: "“sourceTargetPackageRoot is required".

My custom CSS is located in the path META-INF/mycompany/login.css within the JAR file after building.

I'm just trying to override some selectors, but doesn't work, I have inspected the resultant HTML file in the browser and I don't see my CSS file imported in the HTML <head>. Any tip?

Thanks.

Regards.

Find more posts tagged with

Comments

alejandrogarcia

Didn't anybody try to create a similar extension to provide additional CSS/JS files? I keep trying without success :?

Thanks.

erikwinlof

Try this instead…

acme-prettifylogin.jar!alfresco/site-data/extensions/acme-prettifylogin-extension.xml

<extension>
   <modules>
      <module>
         <id>Acme :: Prettify Login (1)</id>
         <auto-deploy>true</auto-deploy>
         <!– Enhance individual WebScripts when their paths match –>
         <customizations>
            <customization>
               <targetPackageRoot>org.alfresco</targetPackageRoot>
               <sourcePackageRoot>acme.prettifylogin.customizations</sourcePackageRoot>
            </customization>
         </customizations>
      </module>
   </modules>
</extension>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

then

acme-prettifylogin.jar!alfresco/site-webscripts/acme/prettifylogin/customizations/components/head/resources.get.html.ftl

<@markup id="acme-prettifylogin-resources" action="after" target="resources">
   <link rel="stylesheet" type="text/css" href="${url.context}/res/acme/prettifylogin/customizations/components/head/resources.css" ></link>
</@markup>‍‍‍

acme-prettifylogin.jar!META-INF/acme/prettifylogin/customizations/components/head/resources.css

<Whatever css rules that make you happy>‍

Cheers & good luck, Erik

alejandrogarcia

Thanks a million Erik, your answer looks promising. I'll try it out and then I'll let you know the result.

Regards.

alejandrogarcia

Thanks a million Erik, your answer looks promising. I'll try it out and then I'll let you know the result.

Regards.

Erwin, your solution works like a charm.

Nevertheless, I have to say that for a login CSS customization I'm still interested in the approach of a extension module as I tried to create in my first post of this thread. Why? Because as the login page has it's own CSS and it is only imported for the login page, the customized version should behave similarly, rather than a global custom CSS which is imported for all the Share pages, do you know what I mean?. Are you thinking I am too picky? Maybe you are right

At the same time, I'd like to know why the way I was initially trying doesn't work when Dave has it published in one of his articles (http://blogs.alfresco.com/wp/ddraper/2012/01/04/extensibilty-updates-roundup/). Anyway, it works and is a pretty elegant solution, so I will leave it as it is at the moment.

Thanks very much!

Regards.