Hyland Connect

alejandrogarcia · ‎12-05-2012

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.

alejandrogarcia · ‎12-07-2012

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

Thanks.

erikwinlof · ‎12-12-2012

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 · ‎12-12-2012

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

Regards.

alejandrogarcia · ‎12-12-2012

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 :lol: 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.

Hyland Connect

Extension module to customize login CSS