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.

add image theme above the header

nikes

Hello,

What are the different ways to add and image above the header bar in Share?

Alfresco Version: 4.2.1

Not sure if it could be done in any alfresco theme or using new Aikau Framework
I found reference of this header script, but not sure how to proceed

tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\share\header\share-header.get.js

Thanks for any help.

Find more posts tagged with

Comments

hdalang

If you mean you want to replace images of the header of alfresco, you just need to check where is the files that includes all picture and replace it with the one you want, I've done this before by going throw the files and replace the images and it worked. I never had to do some changes.

nikes

Thanks for the reply,

But not exactly what I am looking for. I see there already sample themes and its related css and yui css files with icons.

However the requirement is to place banner at the top (Above Alfresco Header).

So, page will have, Banner at the top, then Alfresco Header below that, and then Title bar, dashlets as it is.

Thanks for any further help.

aaditvmajmudar

I think you need to customize "share-header.get.html.ftl" file to place the banner above the header.

Header rendering start with the below code,

#############
<@markup id="widgets">
   <@inlineScript group="dashlets">
      <#if page.url.templateArgs.site??>
         Alfresco.constants.DASHLET_RESIZE = ${siteData.userIsSiteManager?string} && YAHOO.env.ua.mobile === null;
      <#else>
         Alfresco.constants.DASHLET_RESIZE = ${((page.url.templateArgs.userid!"-") = (user.name!""))?string} && YAHOO.env.ua.mobile === null;
      </#if>
   </@>
   <@processJsonModel group="share"/>
</@>
############33

So you can write your own code to place banner above header here.

Hope this helps.

nikes

Thanks for the suggestion Andit.

Actually I did it using a module customization.
http://docs.alfresco.com/4.2/tasks/dev-extensions-share-tutorials-add-content.html

In module config, set region id to "share-header"

  <module>
      <id>Custom Banner Module</id>
      <components>
          <component>
              <region-id>share-header</region-id>
              <source-id>global</source-id>
              <scope>global</scope>
              <sub-components>
                <sub-component id="New_Content" index= "-1" >
                <url>/custom/banner</url>
               </sub-component>
              </sub-components>
          </component>
       </components>
     </module> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In webscript, "*.html.ftl", set <img> element to point to custom banner

 <div>   
   <img src="${url.context}/res/components/images/banner.png"/>
</div>    ‍‍‍

Please feel free to provide feedback on this approach, and if anyone did same with alternate approaches.

Thanks!
Nikesh