Home
Posts

Appearance and Customization

Sagar Shrestha

 

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?

How can I change the predefined colors?

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.

  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
  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

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>

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}

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"/>

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

Post a Comment