theme customization

Theme Customization

Welcome to the Theme Customization guide for the Logos Docusaurus preset. In this guide, you'll learn how to customize various aspects of the Logos theme, including the navigation bar and footer links. The Logos Docusaurus preset offers a flexible theme that allows you to tailor your website to your specific needs.

Customizing Navigation Bar Links

The navigation bar is a prominent element of your website. You can add, modify, and remove navigation links to enhance the user experience.

Adding Navigation Links:

To add navigation links, navigate to the themeConfig section in your docusaurus.config.js file.

You can add new links by creating a new object with the following properties:

• label: The text that appears for the link.
• to: Use this property for internal pages on your website. Ensure the path is absolute. For example, 'to': '/about'.
• href: Use this property for external links. Provide the complete URL, such as 'href': 'https://example.com'.

Example of Adding Links:

themeConfig: {
  navbar: {
    items: [
      // Existing items...
      {
        label: 'New Page',
        to: '/new-page',
      },
      {
        label: 'External Link',
        href: 'https://example.com',
      },
    ],
  },
}

Creating Links to Specific Sections on a Page: If you want to create a link to a specific section on a page, you can do so by adding an ID to the relevant component in your markdown page.

Here's an example:

src/pages/index.md

<FeatureList
  id="features" // This is the ID you can use to create a link
  alignment="top"
  features={[]}
/>

Once you've added an ID to the component you want to link to, you can create the link in your docusaurus.config.js by using the to property with an absolute path that includes the ID, and make sure the path is absolute, like this:

{
  label: 'Features', // The text that appears for the link
  to: '/#features', // Use the ID to link to a specific section
}

Positioning Links:

You can control the position of links in the navigation bar using the position property within each link object. Links with position: 'right' will be placed on the right side of the navigation bar, while others will be placed on the left.

Using Icons for Links:

The theme allows you to use icons in place of text for navigation links. This means you can have a Github icon instead of text for your Github link. Here's an example of how to do it:

{
  label: '',
  href: 'https://github.com/your-org',
  className: 'header-icon-link header-github-link',
}

The Logos theme provides styles for the Github icon. However, if you want to use a different icon, you can define a custom CSS class for the link. In your CSS file, create a style for the custom class and specify the icon you'd like to use.

1. First, prepare the icon you want to use in your desired format (e.g., PNG, SVG).
2. Move the icon to the static/ directory in your project (e.g., static/img/custom-icon.svg).
3. To style the custom link icon, add custom CSS styles for the link. In your project's custom CSS file, create styles for the icon. Here's an example of CSS to define styles for your custom link icon:

.header-custom-link {
  background: url('static/img/custom-icon.svg') center center/cover no-repeat; /* URL of your icon */
}

Please replace /img/custom-icon.png with the actual URL to your custom icon.

4. In your docusaurus.config.js file, add the custom CSS class to the link object. Here's an example of how to do it:

{
  label: '',
  href: '',
  className: 'header-icon-link header-custom-link',
}

Customizing Footer Links

The Logos theme renders footer links in rows, allowing you to organize and present multiple links in an organized manner.

Modifying Footer Links:

In your docusaurus.config.js file, navigate to the themeConfig section. Here, you can configure the footer links.

Example:

themeConfig: {
  footer: {
    links: [
      {
        items: [
          {
            href: 'https://twitter.com/example',
            label: 'X',
          },
          {
            href: 'https://discord.gg/example',
            label: 'Discord',
          },
        ],
      },
      {
        items: [
          {
            href: 'https://github.com/example',
            label: 'GitHub',
          },
          {
            href: '/terms',
            label: 'Terms & Conditions',
          },
        ],
      },
    ],
    copyright: 'Your Copyright Text',
  },
}

Use Custom CSS

If you're using one of our templates, there should be a custom.scss file in the src/css/ directory. You can use this file to add custom CSS styles to your website. Follow these steps if the file doesn't exist:

1. Create a file named custom.scss in the src/css/ directory.
2. Add your custom CSS styles to the file.
3. Locate the preset configuration in your docusaurus.config.js file.
4. Add the customCss option to the preset configuration as shown in the example below:

presets: [
  [
    '@acid-info/logos-docusaurus-preset',
    {
      businessUnit: 'Logos',
      theme: {
        options: {
          customCss: [require.resolve('./src/css/custom.scss')],
        },
      },
    },
  ],
]