Logo Toha
  • Home
  • About
  • Skills
  • Experiences
  • Projects
  • More
    Recent Posts Featured Posts Achievements
  • Posts
  • Notes
  • Docs
  • English
    English Français বাংলা Español
  • Dark Theme
    Light Theme Dark Theme System Theme
Logo Inverted Logo
  • Posts
  • Features
  • Quickstart
  • Getting Started
    • Prepare Site
    • Deploy in Github Pages
    • Deploy in Netlify
    • Automate Theme Update
  • Configuration
    • Site Parameters
    • Sections
      • About Section
      • Skills Section
      • Experiences Section
      • Education Section
      • Projects Section
      • Featured Posts Section
      • Recent Posts Section
      • Achievements Section
  • Writing Posts
    • Organizing Posts
      • Creating Category
      • Sub-Category
        • Creating Sub-Category
    • Front Matter
    • Markdown Guide
    • Math Guide
    • Rich Content
    • Mermaid
    • Using Emoji
  • Customizing
    • Enable Dark Theme
    • CSS Customization
    • Layout Customization
    • Adding New Section
  • Translation
    • Adding new language
    • Translating Homepage
    • Translating Posts
  • Analytics
  • Comments
  • Support Links
  • Shortcodes
  • External Link Example
  • Contributing
  • V3 to V4 Migration
Hero Image
Adding a new section

If the default sections, templates, and components do not meet your needs, you can easily add new sections, templates, and components to your site. This guide will demonstrate how to add a new section to your site. Step 1 : Add Layout File To add a new section to your site, you need to create a layout file in the layouts/partials/sections directory. The file should be named after the section’s name. For example, if you want to add a contact section with a contact form, create a file named contact.html. Use the following template for the contact.html file:

Saturday, January 13, 2024 | 2 minutes Read
Hero Image
Customizing CSS

This theme allows you to customize the appearance of your site and its components by overriding the default CSS. This guide will demonstrate how to override the theme’s color scheme and customize the CSS of individual components. This theme uses Sass to generate CSS. If you are not familiar with Sass, you can learn more about it from here. Override Theme Colors Variables If you want to change the default color scheme of the theme, you can override the theme color variables. To override the theme color variables, you need to create a file named variables.scss in the assets/styles directory of your site. Then copy the content of the default variables.scss file and put into your custom variables.scss file. Here, only the $theme section from default variables.scss file is shown below:

Saturday, January 13, 2024 | 2 minutes Read
Hero Image
Enable Dark Theme

To enable the dark mode in Toha v4.0.0, simply set the darkMode.enable field to true under the params.features section in your hugo.yaml file. For example: params: features: darkMode: enable: true Congratulations! You are all set. You can now enjoy the dark mode in your site. The dark mode will obey user’s system preference.

Sunday, June 12, 2022 | 1 minute Read
Hero Image
Customizing the layout

If you customize the layout of an existing component, you will not receive any future updates for that component when the theme is updated. You will need to manually update the component in your repository. In this tutorial, I will guide you on how to customize the layout of a theme. I have personally gone through the process and will share my insights to make it easier for you.

Saturday, August 7, 2021 | 2 minutes Read
Navigation
  • About
  • Skills
  • Experiences
  • Projects
  • Recent Posts
  • Featured Posts
  • Achievements
Contact me:
  • johndoe@example.com
  • johndoe
  • John Doe
  • +0123456789

Liability Notice: This theme is under MIT license. So, you can use it for non-commercial, commercial, or private uses. You can modify or distribute the theme without requiring any permission from the theme author. However, the theme author does not provide any warranty or takes any liability for any issue with the theme.


Toha Theme Logo Toha
© 2020 Copyright.
Powered by Hugo Logo