Fine-tune the Look and Feel of the Website
Let's find out how to edit the look and feel of the website according to our needs and requirements.
Let’s learn how to customize our website’s look and feel so we can personalize the artistic elements, including the website title, profile image, favicon, font style, font properties, and color choices.
CSS (Cascading Style Sheets) normally control the appearance of the website. While HTML defines the general layout of a webpage, CSS is used to control the appearance of an HTML webpage. CSS has elements including font styles, colors, buttons, links, positioning of images, and so on. However, our website uses Sass (Syntactically Awesome Style Sheets) files instead of CSS. This helps us divide our style sheet into modules and components for an improved structure and easier navigation. Sass also allows us to define variables that can be used throughout the code.
About the inspect tool
The inspect tool in the browser can be used to experiment with changes to CSS properties directly in the browser. Using the inspect tool results in temporary changes to the CSS. When we refresh the browser, the original CSS properties are restored.
We can right-click on any webpage element that we want to edit (for example, images, text, links, buttons) and click on “Inspect” to access this tool.
Important files for personalization
To change the look and feel of our website, we’ll have to edit the following files in our project directory:
config.yamlconfig/_default/languages.toml