Home
Documentation

Appearance and Customization

A guide on changing appearance and doing basic customizations.
Deø Kumar

A complete guide to customizing your blog's interface, including theme direction, colors, fonts, layouts, and other appearance settings. Learn how to fine-tune the look and feel of your site to match your style.

Direction

The theme automatically chooses Right-to-left or Left-to-right based on Blog language.

If you want to explicitly choose the direction irrespective of language chosen in Blog settings, follow these steps:

  1. Go to Theme Designer.
  2. Click on Advanced tab.
  3. From the dropdown list, select Style: Appearance.
  4. Change the length of Direction to 1px, 2px or 3px in order to use Automatic (language-based), Left-to-Right or Right-to-Left as direction.

Default mode

Light mode is used as default mode. To change it to Dark or System, you can follow these steps:

  1. Go to Theme Designer.
  2. Click on Advanced tab.
  3. From the dropdown list, select Style: Appearance.
  4. Change the length of Default Mode to 1px, 2px or 3px in order to use Light, Dark or System as default mode.

Theme Schemes

This feature allows users to choose a color from a predefined list of schemes.

Once selected, the website's appearance including the background, text, buttons, and other UI elements - will adapt to the chosen color scheme to provide a consistent and personalized look throughout the site.

This enhances the user experience by allowing visitors to match the website's aesthetic to their preferences or mood. Theme schemes may also support dark and light variants for better readability and accessibility.

This feature when enabled, generates colors using JavaScript. If you don't use this feature, disable it to prevent unnecessary computations.

This features comes enabled by default, you can configure or disable it through Theme Designer.

  1. Go to Theme Designer.
  2. Click on Advanced tab.
  3. From the dropdown list, select Style: Appearance.
How can I disable Theme Schemes feature?

You can change the length of Theme Schemes to 1px or 2px in order to disable or enable it respectively.

How can I change the predefined colors?

There are 15 color schemes excluding default scheme. You can choose your custom color in Theme n color (1 <= n <= 15) to change the color of nth scheme. Choose your custom color in Default Theme color to set default scheme.

You can toggle on transparent to disable a scheme except for default scheme.

Status Bar color

This feature allows you to customize the color of the browser's status bar, primarily on mobile devices.

By setting a specific color, the status bar blends seamlessly with your website's theme, providing a more immersive and professional appearance.

This is especially useful for Progressive Web Apps (PWAs) and full-screen web experiences where branding consistency matters. The color can be set dynamically based on the active theme or user preferences.

You can choose your preferred color for Status Bar through Theme Designer.

  1. Go to Theme Designer.
  2. Click on Advanced tab.
  3. From the dropdown list, select Style: Status Bar.
  4. Now choose your custom color in Status Bar color (Light) and Status Bar color (Dark) for Light and Dark mode respectively.

Box Design

This feature gives components a boxed look with shadows and rounded corners, enhancing depth and visual separation across the layout.

This feature comes disabled by default, you can enable it through Theme Designer.

  1. Go to Theme Designer.
  2. Click on Advanced tab.
  3. From the dropdown list, select Style: Appearance.
  4. Change the length of Box Design to 1px or 2px in order to disable or enable it respectively.

Custom fonts

Fonts are loaded dynamically by theme based on few conditions in order to improve PageSpeed score.

You can either use a web-safe font (built into most browsers) or import a custom font from sources like Google Fonts or other CDNs.

Using link tag

  1. Go to Google Fonts, select a font, and copy the attribute href of provided <link> tag having attribute rel="stylesheet" as shown below. 
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
  2. Escape the copied url by replacing & to &amp;, < to &lt;, > to &gt;, ' to &#39; and " to &quot; if there exists any.
    For example the above url contains &. Therefore, we need to escape by replacing it to &amp; as shown. 
    https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap
    https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap
  3. Through Blogger HTML Editor, find the following code snippet and put the escaped url in one of the marked parts, whichever first is empty. 
    <Variable name="font.link1" description="Font Link 1" type="string" default="" value=""/>
[!] Font Link 1
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link2" description="Font Link 2" type="string" default="" value=""/>
[!] Font Link 2
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link3" description="Font Link 3" type="string" default="" value=""/>
[!] Font Link 3
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link4" description="Font Link 4" type="string" default="" value=""/>
[!] Font Link 4
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link5" description="Font Link 5" type="string" default="" value=""/>
[!] Font Link 5
[!] @type {String}
[!] Warning: Don't add invalid font css url
    <Variable name="font.link1" description="Font Link 1" type="string" default="" value="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap"/>
[!] Font Link 1
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link2" description="Font Link 2" type="string" default="" value=""/>
[!] Font Link 2
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link3" description="Font Link 3" type="string" default="" value=""/>
[!] Font Link 3
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link4" description="Font Link 4" type="string" default="" value=""/>
[!] Font Link 4
[!] @type {String}
[!] Warning: Don't add invalid font css url

<Variable name="font.link5" description="Font Link 5" type="string" default="" value=""/>
[!] Font Link 5
[!] @type {String}
[!] Warning: Don't add invalid font css url

If you don't want to dynamically load your fonts, skip above steps and put all <link> tags provided by Google Fonts in-between of following two lines of code through Blogger HTML Editor. Note that you still need to escape the value of href attribute.

<b:comment><!--[ </head> | <!> [below] Custom codes (Global) ]--></b:comment>



<b:comment><!--[ </head> | <!> [above] Custom codes (Global) ]--></b:comment>
<b:comment><!--[ </head> | <!> [below] Custom codes (Global) ]--></b:comment>

<link rel='preconnect' href='https://fonts.googleapis.com'/>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin=''>
<link href='https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap' rel='stylesheet'/>

<b:comment><!--[ </head> | <!> [above] Custom codes (Global) ]--></b:comment>

Using CSS

If you can't link fonts using external sources and you have CSS which imports font families, you can replace the marked part with your single line escaped font css, i.e. your css must be in a single line and escaped (replace & to &amp;, < to &lt;, > to &gt;, ' to &#39; and " to &quot;).

<Variable name="font.css" description="Font CSS" type="string" default="" value="@font-face{font-family:&#39;Google Sans Text&#39;;font-style:normal;font-weight:400;font-display:swap;src:local(&#39;Google Sans Text&#39;),local(&#39;Google-Sans-Text&#39;),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format(&#39;woff2&#39;)} @font-face{font-family:&#39;Google Sans Text&#39;;font-style:normal;font-weight:700;font-display:swap;src:local(&#39;Google Sans Text&#39;),local(&#39;Google-Sans-Text&#39;),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format(&#39;woff2&#39;)} @font-face{font-family:&#39;Google Sans Mono&#39;;font-style:normal;font-weight:400;font-display:swap;src:local(&#39;Google Sans Mono&#39;),local(&#39;Google-Sans-Mono&#39;),url(https://fonts.gstatic.com/s/googlesansmono/v4/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVQGrk.woff2) format(&#39;woff2&#39;)}"/>
[!] Font CSS
[!] @type {String}
[!] Warning: The font CSS must be in single line and string must be escaped

Font name

If you changed the default font sources, you may need to provide your font family name in order to be used by the document. To do so, you can follow these steps:

  1. Go to Blogger HTML Editor.
  2. Find the following code snippet and replace the existing font names with your custom font names. 
    <Variable name="font.head" description="Heading font name" type="string" default="" value="Google Sans Text"/>
[!] Heading font name
[!] @type {String}

<Variable name="font.body" description="Body font name" type="string" default="" value="Google Sans Text"/>
[!] Body font name
[!] @type {String}

<Variable name="font.bodyAlt" description="Body alternative font name" type="string" default="" value="Google Sans Text"/>
[!] Body alternative font name
[!] @type {String}

<Variable name="font.code" description="Code Font Name" type="string" default="" value="Google Sans Mono"/>
[!] Code font name
[!] @type {String}
    <Variable name="font.head" description="Heading font name" type="string" default="" value="Plus Jakarta Sans"/>
[!] Heading font name
[!] @type {String}

<Variable name="font.body" description="Body font name" type="string" default="" value="Plus Jakarta Sans"/>
[!] Body font name
[!] @type {String}

<Variable name="font.bodyAlt" description="Body alternative font name" type="string" default="" value="Plus Jakarta Sans"/>
[!] Body alternative font name
[!] @type {String}

<Variable name="font.code" description="Code Font Name" type="string" default="" value="Google Sans Mono"/>
[!] Code font name
[!] @type {String}

Custom texts

Blogger provides few texts which automatically get translated based on what language is choosen in Blog Settings. Few of these texts are Show more, Post a comment, Join the conversation, etc. But when using custom texts lets say Close, Appearance, About the Author, etc., it can't be automatically translated and will stay in English unless changed. You may want to modify these texts to your own.

  1. Go to Blogger HTML Editor.
  2. Find the following code snippet and replace the value attribute with your custom text in respect to what description says. 
    [!] Messages
[!] @type {String}
[!] Warning: Message value must be in single line and must not contain double quotes
<Variable name="m.new" description="Message for: New!" type="string" default="" value="New!"/>
<Variable name="m.free" description="Message for: Free!" type="string" default="" value="Free!"/>
<Variable name="m.open" description="Message for: Open" type="string" default="" value="Open"/>
<Variable name="m.close" description="Message for: Close" type="string" default="" value="Close"/>
<Variable name="m.hideAll" description="Message for: Hide all" type="string" default="" value="Hide all"/>
<Variable name="m.showAll" description="Message for: Show all" type="string" default="" value="Show all"/>
<Variable name="m.previous" description="Message for: Previous" type="string" default="" value="Previous"/>
<Variable name="m.next" description="Message for: Next" type="string" default="" value="Next"/>
    [!] Messages
[!] @type {String}
[!] Warning: Message value must be in single line and must not contain double quotes
<Variable name="m.new" description="Message for: New!" type="string" default="" value="नया!"/>
<Variable name="m.free" description="Message for: Free!" type="string" default="" value="मुक्त!"/>
<Variable name="m.open" description="Message for: Open" type="string" default="" value="खोलें"/>
<Variable name="m.close" description="Message for: Close" type="string" default="" value="बंद करें"/>
<Variable name="m.hideAll" description="Message for: Hide all" type="string" default="" value="सब छिपाएं"/>
<Variable name="m.showAll" description="Message for: Show all" type="string" default="" value="सब दिखाएं"/>
<Variable name="m.previous" description="Message for: Previous" type="string" default="" value="पिछला"/>
<Variable name="m.next" description="Message for: Next" type="string" default="" value="अगला"/>

    Only modify the value attribute, keep rest as it is.

About the author

Deø Kumar
Lost in the echoes of another realm.

Post a Comment

New comments are not allowed.