Median UI v1.7 Typography & Writing Formats

The Median UI v1.7 Blogger theme has been available for some time now, bringing enhanced features and design refinements over its predecessors. However, official documentation for this version remains outdated or incomplete.

Exploring the typography and layout options in Median UI v1.7

To bridge this gap, I’ve explored the theme thoroughly and compiled an updated guide on its typography and writing formats for Median UI v1.7. This post covers everything from image layouts to syntax highlighters, complete with examples and code snippets to help you make the most of this versatile theme.

Image with Grid Layout

This layout arranges images in a clean grid, perfect for showcasing galleries or visual collections. Below is an example using sample images from Pixabay, followed by the code to implement it.

Image Source: Pixabay

Writing Code

<div class="psImg grImg">
  <div class="zmImg"><img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied=""></div>
  <div class="zmImg"><img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied=""></div>
  <div class="zmImg"><img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied=""></div>
  <div class="zmImg"><img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied=""></div>
</div>

YOUR-IMAGE-LINK-HERE - Replace with your actual image URLs.

Image with Show All Function

This feature allows you to hide additional images behind a "Show All" button, which reveals them when clicked. It’s a one-time reveal—no hiding them again after activation.

Image Source: Pixabay

Show All

Writing Code

<input class="inImg hidden" id="for-hideImage" type="checkbox">
<div class="psImg hdImg">
  <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
  <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
  <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
  <div class="btImg">
    <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
    <label for="for-hideImage" aria-label="Show all image">Show All</label>
  </div>
  <div class="psImg shImg">
    <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
    <div><img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"></div>
  </div>
</div>

YOUR-IMAGE-LINK-HERE - Replace with your image URLs.

Image with Scroll Layout

Similar to the grid layout, this version adds a smooth side-scrolling effect on mobile devices, enhancing the browsing experience.

Image Source: Pixabay

Writing Code

<div class="psImg scImg scrlH">
  <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE">
  <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE">
  <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE">
</div>

YOUR-IMAGE-LINK-HERE - Replace with your image URLs.

Manual Related Posts

Add a custom list of related posts to guide readers to more content.

Related Posts:

• Download Median UI v1.7 Blogger Theme
• How to Customize Median UI v1.7
• Top Features of Median UI v1.7

Writing Code

<div class="pRelate notranslate">
  <b>Related Posts:</b>
  <ul>
    <li><a href="YOUR-POST-LINK">YOUR-POST-TITLE</a></li>
    <li><a href="YOUR-POST-LINK">YOUR-POST-TITLE</a></li>
    <li><a href="YOUR-POST-LINK">YOUR-POST-TITLE</a></li>
  </ul>
</div>

YOUR-POST-LINK - Replace with your post URL.
YOUR-POST-TITLE - Replace with your post title.

Paragraph with Drop Cap

This paragraph features a drop cap for visual appeal.

Writing Code

<p><span class="dropCap">T</span>his paragraph features a drop cap for visual appeal.</p>

Blockquote

“The only way to do great work is to love what you do.”

—Steve Jobs

Another style:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Point one about this topic.
• Point two for emphasis.

Writing Code

<!-- Style 1 -->
<blockquote><i>“The only way to do great work is to love what you do.”<br><br>—Steve Jobs</i></blockquote>

<!-- Style 2 -->
<blockquote class="s-1 notranslate">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <ul>
      <li>Point one about this topic.</li>
      <li>Point two for emphasis.</li>
    </ul>
  </div>
</blockquote>

Table

No	Column 1	Column 2	Column 3	Column 4
1	Data 1	100	200	300
2	Data 2	150	250	350

Writing Code

<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data 1</td>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data 2</td>
        <td>150</td>
        <td>250</td>
        <td>350</td>
      </tr>
    </tbody>
  </table>
</div>

Syntax Highlighter

<!DOCTYPE html>
<html>
  <head><title>Sample</title></head>
  <body><p>Hello, world!</p></body>
</html>

Writing Code

<div class="pre html">
  <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Sample&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;&lt;p&gt;Hello, world!&lt;/p&gt;&lt;/body&gt;
&lt;/html&gt;</pre>
</div>

Use an HTML encoder for your code.

MultiTab Syntax Highlighter

HTML here

CSS here

JS here

Writing Code

<div class="pre tb">
  <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked>
  <input class="prei hidden" id="preT-2" type="radio" name="preTab">
  <input class="prei hidden" id="preT-3" type="radio" name="preTab">
  <div class="preH tbHd scrlH">
    <label for="preT-1" data-text="HTML"></label>
    <label for="preT-2" data-text="CSS"></label>
    <label for="preT-3" data-text="JS"></label>
  </div>
  <div class="preC-1"><pre>HTML here</pre></div>
  <div class="preC-2"><pre>CSS here</pre></div>
  <div class="preC-3"><pre>JS here</pre></div>
</div>

Show Hide Button

Answer:

Here’s the answer!

Writing Code

<details class="sp notranslate">
  <summary data-show="Show" data-hide="Hide">Answer:</summary>
  <p>Here’s the answer!</p>
</details>

Accordion / Toggle Menu

First Title

Content here.

Second Title

Content here.

Writing Code

<div class="showH">
  <details class="ac">
    <summary>First Title</summary>
    <div class="aC"><p>Content here.</p></div>
  </details>
  <details class="ac">
    <summary>Second Title</summary>
    <div class="aC"><p>Content here.</p></div>
  </details>
</div>

Note Block

This is a note.

Warning!
This is critical.

Writing Code

<p class="note notranslate">This is a note.</p>
<p class="note wr notranslate"><b>Warning!</b><br>This is critical.</p>

All Button Styles

Standard Button
Download
Demo

Writing Code

<div class="btnF">
  <a class="button" href="YOUR-LINK">Standard Button</a>
  <a class="button ln" href="YOUR-LINK"><i class="icon dl"></i>Download</a>
  <a class="button" href="YOUR-LINK"><i class="icon demo"></i>Demo</a>
</div>

Lazy YouTube

Writing Code

<div class="lazyYt" data-embed="YOUR-YOUTUBE-ID">
  <div class="play">
    <svg viewbox="0 0 213.7 213.7"><polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="c" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
</div>

This guide should help you leverage Median UI v1.7’s typography and formatting options effectively. Happy blogging!