Documentation

Intro

Below you'll find the basics of how to get started with the Adamant HubSpot theme. Once you click the Install button in the HubSpot marketplace, you will arrive at a confirmation screen, and after a few minutes (it can take up to 5 minutes for the theme installation to be completed), you should be able to find your new theme among other themes in several places inside HubSpot:

1. Settings > Account Setup > Marketplace Downloads
2. Settings > Tools > Website > Themes
3. Marketing > Files and Templates > Design Tools
   

Reinstall Theme

In rare cases, due to a common bug on the HubSpot marketplace, your theme may not arrive successfully to your account.

If this happens to you, no worries, you just need to go to Settings > Account Setup > Marketplace Downloads, and then select Adamant HubSpot theme, click Actions, and then Uninstall.

It will take a few minutes, and after that, you need to click Actions again, and then Reinstall.

This will fix any issues that could have occurred. While this is a very unusual issue, in case it happens to you, the solution is simple and easy.

Create Child Theme

Once your new HubSpot theme is ready, consider an option to create a child theme before making any changes to the theme or building pages with it.

While this is not a required step,
it is highly suggested.

This is so you always have a clean backup in case you end up modifying any parts of the theme and want to go back to the original version. Also, it’s a great option in case you create another HubSpot website in the future, so you have a clean version of Adamant HubSpot theme ready for it.

In order to do it, go through the steps below:

1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
2. In the finder, click the @marketplace folder.
3. Right-click a theme folder, then select Create child theme.
4. In the dialog box, enter a name for the child theme.
5. To change where the child theme will be saved, click Change in the File location section. Click a folder, then click Select.
6. To customize the names of the theme's CSS and JS files, click Advanced options, then enter new file names in the CSS and JS fields.
7. To finish the process, click Create child theme.

From this point on, please ensure that if you make changes to the theme, always do them on the cloned version.

Create New Page

Once the Adamant HubSpot theme is in your HubSpot account, it’s ready to be applied to your website pages. To create a new page with the Adamant HubSpot theme, follow the instructions below:

1. Go to Marketing > Website > Website Pages.
2. Click Create > Website page button in the top right area of the HubSpot CMS. This will show you the Choose a Theme screen.
3. Pick Adamant HubSpot theme or its child theme if you created such, among other themes you may have.
4. Choose a page template next. For example, Adamant | Homepage and name it. The name given at this stage is only for internal use inside HubSpot CMS, and it doesn't affect webpage URL etc.

Apply Theme to Existing Page

It's possible to apply Adamant HubSpot theme to the current pages inside HubSpot CMS. In order to do this, go through the steps below:

1. Navigate to Marketing > Website pages.
2. Open a page you have. If it is published on a new screen, click on the Edit button in the right area of the page. If it's unpublished, Content Editor will be available right after the page is open.
3. Go to the Settings tab and scroll down its content.
4. Open Advanced Options and scroll down to the Template section of it.
5. Click Use Different Template, and you'll be redirected to screens to choose themes & templates similar to how to create a new page.

Intro: FAQ

Will my website get affected if I purchase/install the Adamant theme?

No. Purchasing the Adamant HubSpot theme will only install the theme files on your HubSpot account; however, it won’t affect in any way your current website.

Once you purchase it, you will be able to start creating page by page using your new theme, and you will be able to push it live whenever you are ready, so there is nothing to worry about.

Can I use Adamant HubSpot Theme for more than one site?

The Adamant license lets you use the Adamant HubSpot Theme on as many sites as you want within the same company or project.

If your company has five websites, you can use the Adamant theme on all of them, as it’s already included in your license.

However, if you are creating websites for other companies (if you are an agency or a freelancer), you should ask your client to install the theme so they can have it licensed to receive updates.

Customization

There are various options for how the Adamant theme can be customized, starting with global settings and going to specific modules.

Global settings are located in the Design section of the Content Editor. Here's how to find it:

1. Open any of your pages based on the Adamant HubSpot theme.
2. Once inside Content Editor, go to the Design tab in the left pane.
3. Click Edit Theme Settings, and you will be redirected to the Theme settings screen. Here, you will have access to all global design customization settings of the Adamant HubSpot theme.

Theme Settings consist of 10 main sections:

• Global colors
• Global fonts
• Typography
• Layout
• Buttons
• Forms
• Tables
• Header
• Footer
• Performance

Options presented here are applied directly to the corresponding elements of the theme. At the same time, they impact many others automatically via CSS and hubl to ensure visual consistency of the website built upon the Adamant HubSpot theme. For example, base font size influences the margins and paddings throughout the theme templates.

Customization: FAQ

How to set up custom fonts?

Adamant theme allows choosing fonts among a massive gallery of Google Fonts. Custom fonts can be added manually by editing the code of the theme. This comes as part of our premium customization services.

If you're familiar with HubSpot development, you may follow the instructions from HubSpot itself. It's recommended to host font files in the files tool, then reference them in the stylesheet through CSS.

Please note: custom fonts are only available in accounts with access to the design manager and need to be applied with CSS. Adding a custom font will not add the font to styling dropdown menus in the content editor.

To use a font in content, upload the font's files to the files tool. HubSpot recommends uploading a minimum of the .woff, .ttf, & .eot versions to ensure your font loads on all browsers. You can use the Expert mode on Font Squirrel's converter tool to generate additional file formats.

1. In your HubSpot account, navigate to Marketing > Files and Templates > Files.
2. Click Upload files.
3. On your computer's hard drive, select the font files, then click Open.
4. Click the name of an uploaded font file.
5. In the right panel, click Copy URL to copy the URL where the file is hosted. You will need the URL for the font in each file format.

Once you've added a custom font to the files tool, you can reference it in a stylesheet. Each font style (italics, bold, etc.) will require a separate @font-face rule.

1. In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
2. In the finder, open the stylesheet used for your content.
3. For each font style, at the top of the stylesheet, paste the following code: @font-face { font-family: 'Your Font Name'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
   Replace Your Font Name with the name of the font.
   Replace your_font_file.xxx? with the URL from the files tool. Repeat for each file format.
4. Create CSS rules with the font-family property to apply the custom font.
5. In the top right, click Update or Publish to take your changes live.

Does Adamant theme support Arabic?

Currently, Adamant theme supports only LTR languages. We also provide premium customizations that might help convert Adamant theme to RTL specifically for your website.

Blog

One of the pillars of inbound marketing is a blog. Let's match your blog to the rest of the pages using the Adamant theme.

To choose the Blog Listing and Blog Post template, you need to go to Settings > Website > Blog > Templates.

Then, click on Actions to choose Change template. Pick Adamannt and its corresponding templates. Click the Save button at the bottom after templates are chosen.

System Pages

There are a bunch of system pages that are important for user experience, and Adamant also has them. To update the default HubSpot templates or your current ones for system pages, go to Settings > Website > Pages. Then, open the System Pages tab.

Below is a list of pages to update:

• 404 error page
• 500 error page
• Password prompt page

Support

Adamant HubSpot theme is a free theme with no support included.

However, we offer premium support services to help with any customization needed above the core theme functionality. Feel free to send us an email at support@kohorta.co — either Olia or Roman will contact you back.