Quickly changing the main colors

Owned by Cedric
Last updated: 04 Apr, 2024
1 min read

Valid as of Datafari 5.2

Please check the following DatafariUI documentation: Customizing DatafariUI | Customizing colors and theme

In case you still want to use ajaxfrancelabs (not maintained anymore), please check the documentation below)

Valid up to Datafari 5.1 included

To customize the main colors of the UI, you should modify results-color.css and color.css :

  • To change the green that it is used as background, you should change the attribute background of .bc-color in color.css. You should also change the footer.bc-color. We have separated the color of the footer from the others because of the effect of the shadow that impacts the apparent color.

  • To change the green used in the pagination and the checkbox of the facets, you should change the line 126 in color.css where the css selectors are : 

    #facets .checkboxIcon, #facets_mobile input[type="checkbox"]:checked + label span.checkboxIcon, .pagerModule .pages .page, .pagerModule i

  • To change the green used in the Searchbox icons (all words, at least one word), edit the file check_radio_sheet.png located in images folder with a graphics editor.

  • To change the color of each document's link, edit the file results-color.css. Change the color attribue at the line :

    .resultWidget .doc .res .address { color: #378140; }