personnaliser-cvhal - Inria - Institut national de recherche en sciences et technologies du numérique

Give your CV-HAL some freshness.

1 - How to use

On HAL, logged in users can access a functionality named "My CV": it allows to display dynamically a page with the list of publications of an author present in HAL and other information about your current research activity.

To be able to use this functionality, you must be the author of at least one publication in HAL and have created your idHAL unique identifier

If you do not have an idHAL, simply click here:Create your IDHal

The page can be completed with a title, text, the photo from your HAL profile, data from IdHAL (ORCID, IdRef, Twitter account, blog address, etc.) and others extracted data like : disciplines, keywords, co-authors, journal titles, years of publication, participation in ANR or European projects.

2 - How to Install

Inria offers 3 templates for your CV-Hal. A light mode and a dark mode playing with contrast for better accessibility, visual rest and energy saving.

Also a 3rd preset that displayed automatically in light or dark depending on your browser/operating system preferences powered by the "prefer-color-scheme" CSS rule.

To do this, navigate to My CV

Then in the "Personalization" tab

Finally, go to the section 3 - How to Download to choose between the 2 models.

Finally, copy all of the code found in the file you downloaded into the "Stylesheet" section.

Don't forget to click on Save (the top right button).

3 - How to Download

Depending on your needs, 3 styles are available (+ a tutorial on how to personalize your banner)

 CV-HAL Light Theme ( .txt - 10 Ko )
 CV-HAL Dark Theme ( .txt - 10 Ko )
 CV-HAL Light/Dark Auto ( .txt - 10 Ko )

4 - Banner Customisation

Inria offers you the possibility of personalizing your CV-HAL in the same colors as the Inria's graphic charter, but you can choose other colors by searching for "Any Color picker" on your search engine, or visiting Color Picker - HTML Color Codes

Inria members can also to see the Inria color scheme on the following link (intranet): Graphical universe

The easiest way is, go to the section Color scheme for banners then search this

#resume-presentation-visu

Once you are there, go down to the section Color scheme for banners.

Then, copy the line of the color that you want on your banner and replace the one inside of the element with the line you copied.

The background below is the gray-blue of the graphic charter.

#resume-presentation-visu { background: #272f3d; }

Which I replace it with the purple of the graphic charter

#resume-presentation-visu { background: #6561a8; }

Be careful when changing colors to not forget the coma -> ; at the end of the line to not "break the code".

5 - Customizing widget/button color

Do you wish to have widgets the same color as your banner ?

In that case, go to the bottom of the page Color Scheme for widgets, this part contains the Inria color scheme and variation when hovering the element with the mouse.

Select the desired color and its variant "hover". Then go to "Variable that triggers buttons and hovering buttons, widget headers and search bar color line and pictogramme" and replaced the "Hexadecimal #00000" values of effect and hov-effect (hov-effect is the hovering effet of the cursor).

Example: The color below is the Inria's red and I want to change them to blue.

--effet: #e53212;

--effet-hov: #b9251a;

I replace the red with the blue from the color scheme.

--effet: #1587c9;

--effet-hov: #0f6597;

Be careful when changing colors to not forget the coma -> ; at the end of the line to avoid "breaking the code".

6 - Ergonomie et Accessibilité

For ergonomic purposes, text on certain colors: such as Yellow, Light Blue and Light Green. You will need to change the text color from white to black.

Go to back to stylesheet in the personalization and search for "Variable text", a description is present on each element to indicate the usefulness . All you will have to do is change the hexadecimal value.

#fff:

This value is White

#000;

This value is Black

If you need to put your own colors and don't know if contrast are valid, take a look at this tool. This will allow you to compare the readability between 2 colors WebAIM Constrast Checker

Color scheme for banner

Red Banner

Orange Banner

Lilac Banner

Blue Banner

Green Banner

Yellow Banner

Mauve Banner

Light Blue Banner

Light Green Banner

Color scheme for widgets

Color Palette