Mercuric Modular Documentantion

Global groups

Global groups are the key element of every professional theme on HubSpot.

They allow you to share the entire section of a global group between any number of templates.

 

In Mercuric Modular, Headers and Footers are built by the use of global groups.

You can find all global groups in the Mercuric Modular/global content/global groups folder.

Global groups

 

Full list of Mercuric Modular global groups:

  • me-footer
  • me-footer-landing
  • me-header-hamburger
  • me-header-landing
  • me-header-logo-only
  • me-header-standard
  • me-header-top-panel

 

To learn more about global groups in HubSpot, see the official documentation.

Headers

Mercuric Modular has 4 main types of headers:
  1. Standard (me-header-standard) - live preview
  2. Hamburger (me-header-hamburger) - live preview
  3. Landing (me-header-landing) - live preview
  4. Logo only (me-header-logo-only) - live preview

 

All templates have all 4 main types of headers built-in. The tutorial about changing the type of navigation in the template is available here.

Additionally, for each of the listed above headers, there is a top panel (also built as a global group) with fast links (telephone number, email) and social buttons - "me-header-top-panel" - live preview.

Description of how to activate the global group with the top panel is here.

Standard header

Global group me-header-standard - live preview

It consists of modules: Logo, Main menu - standard navigation in desktop version and the hamburger type for mobiles, Search popup, Language switcher and Call-to-Action.

Due to the limited space for the Main manu, it is not recommended for very extensive pages. The recommended number of items in the first level of the menu is from 4 to 5.
If the website contains more pages, better consider using the hamburger type of the header.

Standard header preview

Standard header

 

Do you want to learn more about changing the navigation in the template? Have a look here.

Hamburger header

Global group me-header-hamburger - live preview

In the collapsed state this navigation contains Logo and the hamburger button.

Hamburger header collapsed preview

Hamburger header collapsed components

 

In the expanded state it also includes Logo, Main menu, Language switcher, Search, Socials (follow us).

Hamburger header expanded preview

Hamburger header expanded components

 

You may find information about how to change your navigation in the template or on the website here.

Landing header

Global group me-header-landing - live preview

All the elements except Main menu are the same as in the standard navigation (me-header-standard): Logo, Popup search, Language switcher, Call-to-Action.

Landing header preview

Landing header components

 

Find out here how to quickly change the navigation in the template.

Logo only header

Global group me-logo-only-header - live preview

Logo only header is the simplest type of Mercuric Modular headers and contains only a module with the Logo on it.

Landing only header preview

Landing only header components

 

It is available in two variants differing in the layout of the logo. In the first option, the logo will appear on the left side of the page and in the second - in the middle.

Logo only center preview

 

How to change the navigation type in the template and on the web pages, including centering the logo? Find out here.

Top panel

Global group me-header-top-panel - live preview

 

Top panel preview

 

This global group consists of 2 elements "fast links" on the left side and "follow us" on the right side. They can be activated for each of the 4 types of navigation.

Top panel components

 

Both modules from the global group me-top-panels may be switched off independently using the "show module" field.

Toggle module

 

Learn more about how to activate a global group with the top panel in the Show top panel tutorial.

Footers

Mercuric Modular offers 2 types of the footer:
  1. Standard (me-footer) - available in all templates except Landing pages, e.g. Team #1 block
  2. Landing (me-footer-landing) - dadded to all Landing templates, e.g. Landing #1 ebook

 

Both footers have the "seesaw" effect, which means that they emerge from under the website body when the page is scrolled to the bottom

Seesaw effect

"Seesaw" effect will not work if the page height is not sufficient - it must be slightly higher than the screen height.
On short websites, footer will be static.

Global modules

Global modules, like global groups, are used to share the same resources between multiple templates.

 

There are only two global modules in Mercuric Modular:


  1. me-css and me-js - stores all CSS and JS files.
    Learn more about CSS and JS assets
  2. me-blog-variables - is used for the proper functioning of all blogs templates. Modifications are not recommended!

 

Both global modules are in the folder: Mercuric Modular/global content/global modules.

Global modules in Turbo Mercuric

CSS and JS assets

In the global module me-css and me-js all internal and external links to CSS and JS files are stored. 

This module is used in all Mercuric Modular templates except the mailing templates. It is absolutely necessary for the proper functioning of the theme. Removing it from any template will cause fatal errors in the display of the page.

 

In the HTML + HUBL window, you may find links to Font Family and a link to the FontAwesome icons. If you seek more information about changing the font, have a look here.

Links to font family and font awesome

 

Below there is the code responsible for the "wow" animation in all templates. Want to learn more about "wow" animation? Click here.

Wow code

 

On the right side in the section "Linked files", there are CSS and JS files directly uploaded to the Design Manager.

Linked files

Deleting any of these files will cause Turbo Mercuric templates to malfunction.

 

All CSS files, including the main style sheet mercuric-styles.css, are in the Mercuric Modular/assets/mercuric_css folder.

CSS assets location

 

JS libraries, including the main script file mercuric-scripts.js, are in the Mercuric Modular/assets/mercuric_js folder.

JS assets location

Templates

Mercuric Modular is made up of 100 templates.

All templates are located in the Mercuric Modular/templates folder and are categorized in the following subfolders:

Templates location

Blog templates

Mercuric Modular blog templates are in the Mercuric Modular/templates/blog folder.
Blog templates location
 
In total there are 13 blog templates:
  1. me-301-Blog listing 1
  2. me-302-Blog listing 2
  3. me-303-Blog listing 3
  4. me-304-Blog listing 4
  5. me-305-Blog listing 5
  6. me-306-Blog single 1
  7. me-307-Blog single 2
  8. me-308-Blog single 3
  9. me-309-Blog single 4
  10. me-310-Blog single 5
  11. me-311-Blog single 6
  12. me-312-Blog combined 1
  13. me-313-Blog combined 2

 

Blogs templates from me-301 to me-305 contain only the listing view. In order to work properly, they need another template like a single post template, i.e. one from me-306 to me-313 group. Click here to learn how to create a blog page from the separate listing and single post templates.

Blogs templates with numbers me-312 and me-313 are complete blog’s pages consisting of a listing view and a single post template.
They can be also used as a single post view for templates with listing only (me-301 - me-305) and conversely (me-306 - me-311).

Email templates

Mercuric Modular email templates are in the Mercuric Modular/templates/email folder.

Email templates location

 

In total there are 5 email templates:
  1. me-401-Mailing 1 - v2
  2. me-402-Mailing 2
  3. me-403-Mailing notification 1
  4. me-404-Mailing double opt-in 1
  5. me-405-Mailing resubscription 1

 

All the above templates are crested as pure HTML + Hubl code. This makes it easier to customize them for different email clients so that they display the same everywhere and without errors.

All Mercuric Modular email templates are responsive.

Landing templates

Mercuric Modular landing templates are in the Mercuric Modular/templates/landings folder.

Landing templates location

 

In total there are 15 landing templates. Those with numbers from me-201 to me-210 work best as Landing pages and those from me-2011 to me-2015 as Thank you pages.

 

List of all landing templates:
  • me-201-Landing 1 ebook - v2
  • me-202-Landing 2 ebook - v2
  • me-203-Landing 3 subscribe - v2
  • me-204-Landing 4 video - v2
  • me-205-Landing 5 video
  • me-206-Landing 6 offer
  • me-207-Landing 7 two column
  • me-208-Landing 8 three column
  • me-209-Landing 9 multi column
  • me-210-Landing 10 full photo
  • me-211-Thank you 1 ebook - v2
  • me-212-Thank you 2 ebook
  • me-213-Thank you 3 video - v2
  • me-214-Thank you 4 offer
  • me-215-Thank you 5 offer

System templates

All System templates are in the Mercuric Modular/templates/system folder.

System templates location

 

Mercuric Modular pack consists of 6 System templates.

A complete list:
  1. me-501-Error 404 1 - v2
  2. me-502-Error 500 1
  3. me-503-Subscription preferences 1
  4. me-504-Subscriptions confirmation 1
  5. me-505-Backup unsubscribe 1
  6. me-506-Search result 1

 

me-501-Error 404 1 - v2 and me-502-Error 404 1 - v2

me-501-Error 404 1 - v2 and me-502-Error 404 1 - v2 are templates responsible for displaying errors on the page. 404 when the page is not available at the requested URL address and 500 when a server error occurred.

Like all System pages, you can create them by selecting the appropriate templates in your account settings: Settings -> Website -> Pages -> System Pages tab.

How to set 404 and 500 sites

 
me-503-Subscription preferences 1, me-504-Subscriptions confirmation 1 and me-505-Backup unsubscribe 1

These templates are needed to allow your contacts to change their email preferences.

They are set up similarly to the Error pages: Settings -> Marketing -> Email -> Subscriptions tab.

How to set subscription sites

 

More information about Error and Subscription system templates you will find here.

 

me-506-Search result 1

It is a special System template to display search results on your website.

It is set up in the same place as the Error pages: Settings -> Website -> Pages -> System Pages tab.

Search results page

 

More about Search results page.

Website templates

Mercuric Modular Website templates are in the Mercuric Modular/templates/website folder.

System templates location

 

The most numerous group of templates, which includes as many as 61 templates.

Full list of website templates:
  1. me-001-Home 1 main
  2. me-002-Home 2 banner
  3. me-003-Home 3 slider
  4. me-004-Home 4 video
  5. me-005-Home 5 features
  6. me-101-Contact 1 - v2
  7. me-102-Contact 2 - v2
  8. me-103-Contact 3 - v2
  9. me-104-Contact 4 - v2
  10. me-105-About us 1 - v2
  11. me-106-About us 2 - v2
  12. me-107-About us 3 - v2
  13. me-108-Team 1 - v2
  14. me-109-Team 2 - v2
  15. me-110-Team 3 - v2
  16. me-111-Team 4 - v2
  17. me-112-Team 5 - v2
  18. me-113-Team single 1 - v2
  19. me-114-Team single 2 - v2
  20. me-115-Team single 3 - v2
  21. me-116-Product 1 - v2
  22. me-117-Product 2
  23. me-118-Product 3
  24. me-119-Product single 1
  25. me-120-Pricing 1
  26. me-121-Pricing 2
  27. me-122-Pricing 3
  28. me-123-Pricing all tables 1
  29. me-124-Portfolio 1 - v2
  30. me-125-Portfolio 2 - v2
  31. me-126-Portfolio 3 - v2
  32. me-127-Portfolio 4 - v2
  33. me-128-Portfolio 5 fullscreen
  34. me-129-Project single 1
  35. me-130-Project single 2
  36. me-131-Services 1 - v2
  37. me-132-Services 2 - v2
  38. me-133-Services 3
  39. me-134-Company 1 - v2
  40. me-135-Company 2
  41. me-136-Company 3
  42. me-137-Case study listing 1 - v2
  43. me-138-Case study listing 2
  44. me-139-Case study single 1 - v2
  45. me-140-Resources 1 - v2
  46. me-141-Our clients 1
  47. me-142-Our process 1
  48. me-143-Our process 2
  49. me-144-Career listing 1
  50. me-145-Career single 1
  51. me-146-Privacy policy 1 - v2
  52. me-147-FAQ 1 - v2
  53. me-148-FAQ 2 - v2
  54. me-149-Support 1
  55. me-150-Coming soon 1
  56. me-151-Two columns 1
  57. me-152-Two columns 2
  58. me-153-Two columns 3
  59. me-154-Two columns 4
  60. me-155-Three columns 1
  61. me-156-Three columns 2

Custom modules

All Mercuric Modular Custom modules are located in the Mercuric Modular/custom modules folder and are categorized in subfolders according to their scope of application:
  • /blog modules - 22 modules
  • /email modules - 11 modules
  • /footer modules - 2 modules
  • /general modules - 91 modules
  • /header modules - 6 modules
  • /system modules - 5 modules

Total number of modules - 137

Custom modules location

 

Most of the modules are easy and intuitive to use. More advanced modules have fields with "Help text", describing their rules of operation or guidelines/requirements. Always read instructions to ensure that the used modules are set properly.

Help text

Change type of navigation

The type of the navigation can be set individually in each template or independently for individual pages built on the same template.

In order to change the navigation type in the template globally for all current (in which the navigation type was not overwritten from the "Content editor" level) and future pages, built on it, you need to:
  1. Open the template in Design Manager.
  2. In the sidebar „Edit” tab find the "Additional <head> markup" and click "Expand" for more convenient editing.
  3. In the "header_config__option" module (line 1), change the content of the attribute "value" to one of the options available in the "choices" paramenter.
  4. Publish changes.

change_type_of_menu_in_template

 

In order to change the type of the header for a particular page, you should:
  1. In the "Content editor" move forward the side panel with the modules.
  2. Find the "Choose header type" module - this should be the first on the list.
  3. Select the desirable option from the dropdown menu.
  4. Apply changes.

change_type_of_menu_in_template3

Show top panel

The additional panel above the navigation can be set individually for each template or independently for individual pages built on the same template.

If you want to activate the top panel in the template globally for all current (in which the navigation type was not overwritten from the "Content editor" level) and future pages, built on it, you need to:
  1. Open the template in Design Manager.
  2. In the sidebar "Edit" tab find the "Additional <head> markup" section and click "Expand" for more convenient editing.
  3. In the "header_config__top_panel" module (line 2), change the content of the attribute "value" to "True".
  4. Publish changes.

show_top_panel_in_template

 

To display an additional panel above the navigation only for the specific page, you should:
  1. In the "Content editor" move forward the side panel with the modules.
  2. Find the "Show header top panel?" module - this should be the second on the list.
  3. Click to switch the button to "True".
  4. Apply changes.

show_top_panel_in_content_creator

Change the navigation background color

There are 2 navigation color options available:
  1. White background.
  2. Transparent background, which changes color to white while scrolling down a page.

 

To change the color of the navigation background, you should:
  1. Find the "me-header-color-and-logo-swap-config" module in the template.
  2. Select one of the "Header color" field options.
  3. Publish changes.

If you need to set the background color of the navigation only for a particular page, you need to unlock the editing of this module. You may do this, by changing the value of the "Prevent editing in content editors" switcher to "False". Then the module edition will also be available from the "Content editor" level.

change_menu_background

Set the color changeable logo (like in our demo)

To set the logo, which changes color while scrolling the page, you just need to:
  1. Open the template in Design Manager and find the module named "me-header-color-and-logo-swap-config".
  2. Click on the "Swap logo on scroll?" button to make it active. Using this feature is most effective when combined with the activated "Transparent" option in the "Header color" field.
  3. Publish changes.

swap_logo_1

Then:

  1. Go to edit one (or more, depending on your needs) of the global header groups.
  2. Find the Image module named "Logo for swap - on transparent header…", which is under the module with the main logo ("Logo" module).
  3. Set a logo that will be displayed when the page is not scrolled.
  4. Set the same size of the new logo as the original one.
  5. Publish changes.

swap_logo_2

 

swap_logo_3

Grid introduction

Our Mercuric Modular theme uses the "grid system" based on Bootstrap 4.

Unlike the native HubSpot’s grid, which is based on old Bootstrap 2 and is focused on desktop devices ("desktop first"), our grid provides many more possibilities such as more responsive breakpoints and the flexbox technology. What’s more, it is highly focused on mobile devices ("mobile first").

Using our grid is not difficult, however basic knowledge of HTML and CSS is recommended. 


Of course, you don’t have to worry about anything to create a template based on Mercuric Modular - the drag and drop HubSpot’s system is fully supported by us and the structure the user build in the Design Manager (i.e. the layout of columns) will be exactly reflected on the published website.

When building a template without our grid, the page will change its layout of columns only for screens whose width is lower than 768 px.

With our grid classes you may freely change the width of columns for the following screen widths:

  • < 576px
  • ≥ 576px
  • ≥ 768px
  • ≥ 992px
  • ≥ 1200px

Moreover, the flexbox technology provides control over the behavior of the columns.
You can specify whether the columns in a row should be centered vertically or horizontally. You can even change the order of the columns for specific breakpoints.

Containers

To protect Mercuric Modular template’s CSS classes, we added the prefix "me-" to most of classes’ names. This way our classes will not interfere with other classes that may be found on your website.

 

List of available container classes:
  • me-container - main container class - width 1170px
  • me-container header-container - for hamburger menu - width 1585px
  • me-container me-container--big - width 1920px
  • me-container me-container--large - width 1400px
  • me-container me-container--small - width 940px
  • me-container me-container--smaller - width 740px
  • me-container me-container--half - width 585px
  • me-container-fluid - full screen width

 

CSS styles for Mercuric Modular’s containers are available in the main CSS file "mercuric-styles.css" in the "__globals.scss" section.

Mercuric containers

Feel free to modify the containers’ widths or add new ones so that the whole will best suit your needs.

 

In order to use the container class in practice, it should be added to the "CSS class" field of the module group.

If you want to set one of the modified container classes, remember to always add the main class "me-container", and then after space, the class which brings new width.

Set container in Design Manager

 

The exception is "me-container-fluid". This class should be without the antecedent "me-container" class because its task is to extend the columns over the entire width of the screen.

Container fluid

Columns

Following the latest trends and best web-development practices, the Mercuric Modular’s grid is coded according to the "mobile first" conception.

To make it easier to use, we used the same class names as in the original Bootstrap 4.

You don’t need to use them, because the layout of the columns you set on the Design Manager will be retained. Additional columns’ classes are used to improve the page’s responsiveness.

 

Example of application of additional classes:

Grid columns

  • col-12 - full container width - 12 columns
  • col-md-6 - 6/12 of the container width for screens above 768px
  • col-lg-4 - 4/12 of the container width for screens above 992px

In the example above, only col-sm- and col-xl- are missing.
However, the rules of conduct are the same.
For example, col-sm-8 will set the column width to 8/12th of a container for screens above 576px and col-xl-10 to 10/12th of a container for screens above 1200px.

Flexible columns

FHubSpot’s Flexible Columns provide freedom in creating websites. Read more about them here.

However, they have a significant disadvantage - modules in such a group are always stretched over the full width of the container.

To solve this problem we’ve prepared special classes thanks to which you can freely change the width of the columns in the Flexible Column group.

They are very similar to the usual Bootstrap 4 classes, which are described in the previous section Mercuric Modular Grid columns. The only difference is the additional "flex-" prefix.

 

In view of the HubSpot limitations, the set of classes is added directly to the Flexible Columns group, because individual modules in such a group do not have "CSS class" field.

Flexible column grid

The flex-col- styles will be applied to all modules in the same group. Analyzing the screenshot above that will be:

  • flex-col-12 - each module has full screen width - 12 columns
  • flex-col-sm-6 - each module has 6/12th of container width for screens above 576px
  • flex-col-md-4 - each module has 4/12th of container width for screens above 768px
  • flex-col-lg-3 - each module has 3/12th of container width for screens above 992px

Columns order

The usage of the flexbox technology is the unquestionable advantage of our grid.

Among other things, the flexbox technology gives the possibility to change the order of columns in a container. This is specially useful when, for example, in a two-column layout, with a large screen width (desktop), an image is in the right column, and the text in the left, and in the mobile version the picture is to be placed above the text, not below it, as it results from the natural behavior of the HTML structure.

Two column layout

 

To make the column with the image change its layout when resizing to a mobile version, you need to add 2 classes: order-first and order-md-0 to the "CSS class" field.

Flexbox order

Because our grid uses the "mobile first" conception, classes:

  • order-first - is responsible for the location of the column as the first one in the container
  • order-md-0 - will restore the layout of the columns to their natural order for screens above 768px.

Learn more about "order" classes in the official Bootstrap 4 documentation.

Alignment

Due to the flexbox technology, it is possible to freely control the alignment of the columns in the container, both vertically and horizontally.

For this purpose, we also used the classes from Bootstap 4. You will find a detailed description of all available classes here.

 

In order to apply them in practice, the alignment class should be added to the group located directly above the columns. Most often it is a group with the me-container class.

Alignment class

 

If you want to align all modules inside a Flexible Column, just add the desired class to the Flexible Column.

Alignment class for Flexible Column

No gutters

As in Bootstrap 4, the "no-gutters" class added to the "CSS class" field of the group will remove the spaces between all columns in the group.

In the Mercuric Modular theme, it is often used in the version for Flexible Column: "flex-col-no-gutters".
Added directly to Flexible Column will remove the spaces between all modules in the Flexible Column.

Flexible column no gutters

 

No gutters preview

Layout introduction

To make it easier to customize themes, Mercuric Modular comes with a number of predefined CSS classes designed to allow you to make minor changes from the Design Manager level, without unnecessary interfering with the CSS files.
Just add any class to the "CSS class" field to get the desired effect.

CSS class field

 

In the following sections, more about the defined CSS classes is presented.

Basic knowledge of HubSpot Design Manager is recommended.
If you do not feel too confident with this tool, it is worthwhile to use their official documentation and tutorials. The best place to start learning is here: Get started with the design manager.

Spacings

In Mercuric Modular you may easily change the spacing between sections and modules. For this purpose, we have prepared classes, which can be added in the "CSS class" field to the whole group or individual modules/columns in the Design Manager.

 

All classes that are intended to change spacings are written according to the same scheme.
The first part is the space type and the second is the value, e.g. mt--40 means margin-top(--)40px .

Additionally, responsive classes are available, e.g. mt—sm-40 sets "margin-top" value to 40px for devices with a screen width above 576px.

 

Available types:
  • mt - margin-top (outer spacing), e.g. mt--100
  • mb - margin-bottom, e.g. mb--20
  • pt - padding-top (inner spacing), e.g. pt--40
  • pb - padding-bottom, e.g. pb--25
  • pl - padding-left, e.g. pl--50
  • pr - padding-right, e.g. pr--65

 

Available values: 0-100, step 5.

 

Standard spacings

 

If you want to add a space for all modules in the Flexible Column, you may use the special class for margin-bottom (all others are not available in the Flexible Column version).
It is analogous to the previously mentioned classes. The only difference is the prefix "flex-" at its beginning, e.g. flex-mb—25.

Spacing for flexible columns

Background color

The colors assigned to the class are defined in the main CSS file (mercuric-styles.css) in its first lines as variables.

Main css file

 

A class with background color should be applied to the top parent group of columns. This will change the background within the whole group.

How to set background color class

How to set background color class preview

 

Available classes:
  • me-background-color--base-color - $firstColor
    First color variable

  • me-background-color--secondary-color - $secondColor
    Second color variable

  • me-background-color--gradient - mix between $firstColor and $secondColor

  • me-background-color--dark - $darkBackgroundsColor
    Dark color variable

  • me-background-color--light-grey - $lightGreyBackgroundsColor
    Light grey color variable

  • me-background-color--grey - $greyBackgroundsColor
    Grey color variable

  • me-background-color--grey-borders - $greyBordersColor
    Grey borders color variable

 

Text color on the changed background

If you change the background color to dark or one where the default font color is not clearly visible, consider changing the font color to white.

Some Mercuric modules have a white text color checkbox. Others change the font color automatically.
However, in the case of native HubSpot modules, e.g. Rich Text, it is not possible. For this purpose, we have added the CSS class "me-color-white". Entering it in the module "CSS class" field or any parent group will change the font color in all modules in the group to white.

Change color to white

Change color to white preview

 

You can read more about font colors in Typography.

Column border

If you want to clearly separate the columns, it is recommended to use the class showing the lateral edge line.

 

The color of the line depends on the color of the variable named $greyBordersColor from the main CSS file.

Grey borders variable

 

To give element an edge, enter one of the available, intuitive classes in the "CSS class" filed.

  • section-border--right/section-border--left
  • section-border--right-sm/section-border--sm-left - will display the edge for devices with the screen width above 576px
  • section-border--right-xl/section-border--md-left - will display the edge for devices with the screen width above 768px
  • section-border--right-lg/section-border--lg-left - will display the edge for devices with the screen width above 992px
  • section-border--right-xl/section-border--xl-left - will display the edge for devices with the screen width above 1200px

Section border right

Section border right preview

Fonts

There is 1 main font family in Mercuric Modular. The default is Nunito (font-weights: 300, 400, 500, 600, 700, 900) from Google Fonts.

 

The link to the font family is in the global module me-css and me-js (Mercuric Modular/global content/global modules).

Font family

 

The CSS variable responsible for the font throughout Mercuric Modular is in the main style sheet (mercuric-styles.css, folder Mercuric Modular/assets/mercuric_css) under the name "$fontFamily".

fontFamily variable

 

To change the font family, you should:
  1. Add a link to font family in the global module me-css and me-js, preferably by replacing the link with the default font. It is important to place the link in the "require_css" block.

    Change font family link


    If you want to use Google Fonts, it is best to choose one that has all the font-weight that are present in Mercuric, namely: 300, 400, 500, 600, 700 i 900.

    Font weights


  2. Replace the value of the "$fontFamily" variable in the main CSS mercuric-styles.css and publish the changes.

    Change font family variable

 

To change the font family you may also use our customizer.

The customizer will automatically generate a link to the selected font family as part of the CSS code for the mercuric-styles.css file. In this case, it is not necessary to change the font link in the me-css and m-js. However, it is a good practice to remove the old link from me-css and me-js, once it is no longer in use.

Change fonts with customizer

Text color

Mercuric Modular has 2 basic font colors:
  • One for the most typographic elements, such as paragraphs and lists.
  • Second for headers and some menu type items.

Both colors are declared as variables in the main CSS file mercuric-styles.css (Mercuric Modular/assets/mercuric_css folder).

  • $mainFontColor
  • $headersFontColor

Font color variables

 

To see which elements will change after setting a different color, use our customizer. It also makes it easier to implement the changes by generating CSS code for the change in the main style sheet - just follow the instructions in the customizer.

Change font colors with customizer

 

White text color.

If you change the background color to dark or one where the default font color is not clearly visible, consider changing the font color to white.

Some Mercuric modules have a white text color switcher. Others change the font color automatically.
However, in the case of native HubSpot modules, e.g. Rich Text, it is not possible. For this purpose, we have added the CSS class "me-color-white". Entering it in the module "CSS class" field or any parent group will change the font color in all modules in the group to white.

Change color to white

Change color to white preview

 

Dark text color.

A similar class to "me-color-white" is "me-color-dark”.

The color that is assigned to it is the color of the $headersFontColor variable from the main CSS file mercuric-styles.css.

Headers font color

The rule and scope of its operation are the same as the "me-color-white" - the color change will include all modules within the group with "me-color-dark” class.

me-color-dark css class

me-color-dark in action

 

Other font colors.

In addition to the "me-color-white" and "me-color-dark” classes, which are applied by entering in the "CSS class” field in Design Manage, Mercuric Modular also has classes that change the font color, which are assigned directly to HTML tags (e.g. <p>) in the "class” attribute.

A great place to use them is the HubSpot Rich Text field in the "Edit source code” mode, where the HTML tags may be modified easily, including adding a "class” attribute, such as <p class="me-text-color--secondary-color">.

Rich Text - edit source code

Add class attribute

Text color change

 

The following classes are available:
  • me-text-color--base-color - the color is determined by the "$firstColor" variable in mercuric-styles.css
    First color variable

  • me-text-color--secondary-color - "$secondColor" variable in mercuric-styles.css
    Second color variable

  • me-text-color--dark - $darkBackgroundsColor variable in mercuric-styles.css
    Dark color variable

  • me-text-color--white - white color (hex: #ffffff)
  • me-text-color--black - black color (hex: #000000)

Disable "wow" animation

Each Custom Module from Mercuric Modular has a "Dropdown" field or switcher where the animation may be changed/deactivated.

Animation dropdown

Animation toggle

 

In Mercuric Modular there are also native HubSpot modules, e.g. Rich Text, where the animation type is defined directly by adding a class with animation to the "CSS class” field of a module or a group of modules.

Animation for HS modules

All you have to do is to remove the fragment from "wow fadeIn…”, to deactivate animation.

 

You can also freely change your animations by entering one of the available Animate.css classes.

 

The following effects are used in Mercuric
  • fadeIn
  • fadeInLeft
  • fadeInRight
  • fadeInUp
  • fadeInDown

 

In Mercuric Modular it is possible to remove the animation effect globally.

Just find the global group called "me-css and me-js”, which is at the bottom of each template and click on "Edit global group content".

Edit me-css and me-js

Then remove or comment out the code in the <script> tag and publish the changes.

Comment out wow

Subscribe today

For weekly special offers and new updates!