topic Re: how to change header-background color in Alfresco Archive

how to change header-background color

jaeni — Tue, 28 Apr 2015 08:20:22 GMT

HiI want to change the background color of the header component. i have found several blog posts about this, but none worked for the latest version of alfresco community 5.0.d.how do i overwrite the following css correctly:.alfresco-share .alf-header .alfresco-header-Header‍‍‍for alfresco sdk 2.0tha

Re: how to change header-background color

ddraper — Thu, 07 May 2015 07:51:26 GMT

There are several CSS selectors that you'll need to override in order to achieve this. The header bar is comprised of widgets in the "alfresco/header" package which mostly just extend base "alfresco/menus" package widgets and add in additional CSS dependencies that change the colours. Therefore to change the CSS classes you'll need to take exactly the same approach. You can either just copy the selectors for those widgets and write more specific selectors (or ensure your new CSS dependency file is loaded after the defaults) so that your selectors "win".

I appreciate that this is not the best solution… what we should have done (and I've raised an issue to address this in a future Aikau sprint: https://issues.alfresco.com/jira/browse/AKU-286) is to update the CSS dependencies to use a LESS variable for the background colour (and related colours) and then all that will be required is to provide a LESS file with that updates those colour variables.

Since you're using 5.0.d it will be possible to use the weekly Aikau releases (the last release was 1.0.16 released on the 5th May 2015) which contain updates and bug fixes. So I would recommend that if you're able to hold on for a few weeks there should be a much simpler solution available.

Regards,
Dave

Re: how to change header-background color

ddraper — Tue, 19 May 2015 11:18:29 GMT

The Aikau 1.0.18 release includes updates to the alfresco/header packaged widgets that make header colour customization much simpler, see http://blogs.alfresco.com/wp/developer/2015/05/19/share-header-colour-customization/