Configuring Default Options and Advanced Settings

Default settings as well as advanced settings for the Materia X2 theme.
Yasya El Hakim

Materia X2 was developed and designed optimally so that users can use it easily. Installing and Customizing the Materia X2 theme does not require any special knowledge of HTML, CSS or JavaScript.

Forbidden Settings

Although you can customize the Materia X2 theme flexibly. However, there are settings that are forbidden to change. The setting is Background image.

Background Image Settings

Initially, this setting is useful for changing Meta Image for Index page as well as for changing Key color (Browser Tab/Navbar Color). Since we still haven't figured out the best way to set it up, we hope you haven't changed anything in it.

Default Options

There's a Default setting that you don't really need to touch, but it's important and you can still customize it. Here are each one:

Viewport Pinch Zooming

This feature is useful for when the user wants to zoom in on a page on a mobile device or other touch screen device by pinch-zooming the screen, allowing you to zoom in and out. This functionality is mostly needed to provide an application experience on a web page.

By default, this feature is enabled. If it is disabled, it will cause problems  for users with low vision who rely on screen magnification to properly see the contents of a web page.

But if you want to customize it, you can follow these steps:

  1. Go to Blogger Dashboard, select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown.
  4. Look for the Slider setting named Viewport Pinch Zooming (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Pinch Zooming will be disabled.
    • 2px: Enable - Pinch Zooming will be enabled.
  5. Click the Save button (diskette icon) in the lower right corner.
If you disable this feature, most Web Development Tools such as PageSpeed Insight and Web.dev will reduce the accessibility score.

Main Section Max Width

This setting is useful for setting the width of the main section (Section in the middle).

Please note that if you are using a Desktop screen with a resolution below 1366px, then you will not see any changes.

If you want to customize it, you can follow these steps:

  1. Go to Blogger Dashboard, select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown.
  4. Look for the Option named Main Section Max Width, drag the slider right or left until you find the width you want.
  5. Click the Save button (diskette icon) in the lower right corner.

Custom SVG Icon

Materia X2 uses SVG icons with a Material Design theme. There are several advantages of Icon SVG, including scalability, SEO friendly, editing ability, and independent resolution. Therefore, the future of SVG will look bright and the trend of using SVG will continue to increase.

In addition to using the Default Icon, you can also change all the icons in Materia X2.

More documentation will be explained separately in the Configuring Custom Icons and Icon Packs.

Default Fonts

This feature is useful for changing the Font on the Materia X2 Theme. There are several default Blogger fonts that you can use. However, we have also converted some of those built-in Fonts to Optional Fonts. These font conversions include:

  • Allerta Font - Converted to Inter Font.
  • Allerta Stencil Font - Converted to Google Sans Font.
  • Arima Font - Converted to Google Sans Text Font.
  • Arvo Font - Converted to Rubik's Font.
  • Bentham Font - Converted to Tajawal Font (Arabic).
You can request other fonts by writing them on the Request and Feedback page.

Here are some steps to change the font in the Materia X2 Theme:

  1. Go to Blogger Dashboard, select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown.
  4. Look for the Option named Default Fonts, click Default Dropdown and select the font you want to use.
  5. Click the Save button (diskette icon) in the lower right corner.

Browser Tab/Appbar Color and Key Color

This setting is useful for changing the Key color in the Materia X2 Theme. A key color is the primary color for the tab or app bar on a web browser (usually a web browser app on a mobile device) as well as the primary color (the default color) for a specific element or component.

Here are some steps to customize it:

  1. Go to Blogger Dashboard, select the Theme menu.
  2. Click the CUSTOMIZE button.
  3. Click Advanced Dropdown, click Default Options Dropdown.
  4. Find a color setting and select the color you want to change.
  5. Click the Save button (diskette icon) in the lower right corner.

Advanced Settings

All the documentation we created to customize the Materia X2 Theme, about 98% you don't need to touch the code at all. But this time, you are required to touch the code via Edit HTML if you want to add a certain Meta Tag (Custom Meta Tag).

Custom Meta Tags

Here we will not explain more about Custom Meta Tags, because we are sure you already understand them.

If you want to add Custom Meta Tags, then we have provided a location to place them. Place your Custom Meta Tags just below the following code:

<b:comment>Put your Custom Meta Tag below</b:comment>

Open Graph and image_src Image

You can change the image for the image_src Meta Tag as well as the image for the Open Graph by finding and changing the image URL below to the image URL you want:

https://lh3.googleusercontent.com/-Efigs16DUTQ/YKrJkJaHDKI/AAAAAAAAg_A/_xTHzW1sLmssSTAFEZtZTL_QqseedXjfACLcBGAsYHQ/s720-rw/index.webp

Note that this setting is only useful on the Index (Multiple Items) page.

Those are some steps to configure the Default Options in Materia X2 Theme. If you have any questions, please write them in the comments section.

If you want to report some bugs, you can write them in the comments section on the Bug Report page and if you want to request new features or want to provide feedback, please write them in the comments section on the Request and Feedback page.

Yasya El Hakim
404 Not Found!
Comments
To add an image:
[image] image_url [/image]

To add a code block:
[code] your_code [/code]

To add a quote:
[quote] your_quote [/quote]

To add a link:
[link] your_link_text | link_url [/link]
Guru Comment Poster
I will soon feature Materia X2 in my list of premium blogger themes.
Guru Comment Poster
I will soon feature Materia X2 in my list of [link] premium blogger themes | https://www.bhavana.com.np/category/blogger/theme/ [/link].
Anggria Novita, M.Pd Comment Poster
nice theme!
Thanks
SMPCIA Comment Poster
hhhhh