How to purchase Gelleno UI. Complete Guide from Purchasing to Getting Licence Key
This is a compresive guide for getting GUI activation key and regular updates. You can download free new updates once you …
Table of contents
All Typography, Writing formats and other shortcodes
Pardeep Poonia
2 min read
Change font size
 |
| All typography and codes for GUI v1.3.0 - SEPT24 UPDATE |
You can use these codes to make your blog more easy to navigate, by pasting the below required codes in HTML View only. For this
- Go to Blogger.com
- Create a new page/post or edit exiting one.
- Click on and select ' HTML View'.
- Copy paste the required codes from below.
Tip: Use <p>Text_goes_here </p> to add text in article.
Note and Warning Block
This feature enables you to add important info, warning sentences or highlight sentences with appropriate links, there are two styles that you can try including:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas et id tempore iure, dolorem quidem odio dicta fuga explicabo animi officia tenetur neque. Harum doloribus ipsam ea deserunt a!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas et id tempore iure, dolorem quidem odio dicta fuga explicabo animi officia tenetur neque. Harum doloribus ipsam ea deserunt a!
Writing style:
<div data-text="Write_heading_text" class="note">
<div class="action">
<i class="bi bi-three-dots-vertical"></i>
<div class="btns">
<a href="#" class="href">Write_link_text</a>
<a href="#" class="href">Write_link_text</a>
</div>
</div>
<span>
Text_goes_here </span>
</div>
Tabs
You can now separate your paragraphs into tabs, upto 4 tabs are recommended.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque laboriosam sunt explicabo modi asperiores deleniti officiis ab quidem. Illo error, maiores laborum non nesciunt a officiis culpa sunt blanditiis reprehenderit?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci eius, voluptates, fuga blanditiis cum voluptas ducimus, illo atque necessitatibus quam pariatur? Asperiores sint omnis veritatis repellendus rerum impedit facilis cupiditate!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi cumque, illum quae optio distinctio, est quaerat eligendi, accusantium culpa totam animi ad repudiandae. Odio suscipit id, assumenda quam quos minus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse voluptatibus officiis tenetur placeat provident exercitationem quasi dicta distinctio, nemo eius consectetur maiores rem voluptate mollitia nulla neque repellat eveniet veniam.
<div class="tabs">
<input checked="" class="hide" type="radio" name="postTab" id="c1i"/>
<input class="hide" type="radio" name="postTab" id="c2i"/>
<input class="hide" type="radio" name="postTab" id="c3i"/>
<input class="hide" type="radio" name="postTab" id="c4i"/>
<div class="fn">
<label class="fn1i" for="c1">Chapter 1</label>
<label class="fn2i" for="c2">Chapter 2</label>
<label class="fn3i" for="c3">Chpater 3</label>
<label class="fn4i" for="c4">Chpater 4</label>
<div class="indCi"></div>
</div>
<div class="tabCi">
<div class="tab1i">Text_goes_here
</div>
<div class="tab2i">Text_goes_here2</div>
<div class="tab3i">Text_goes_here3</div>
<div class="tab4i">
Text_goes_here4
</div>
</div>
</div>
You can use only one <div class="tabs"/> per page. Delete "i" from input IDs.
Blockquote
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo rem, odit odio vero possimus praesentium porro et eos, debitis, ut officiis! Dicta minima commodi veniam. Odit atque tempore enim possimus!Writing style:
<blockquote data-name="Write_text">
Text_goes_here
</blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo rem, odit odio vero possimus praesentium porro et eos, debitis, ut officiis! Dicta minima commodi veniam. Odit atque tempore enim possimus!Writing style:
- Nulla rerum aperiam repellat obcaecati quibusdam dicta minus nihil accusamus architecto officiis ratione, numquam sunt.
- Cumque assumenda magni amet quo at commodi dolores, rerum repudiandae beatae corrupti ipsa dolore dolorem!
<blockquote class="s1">
Text_goes_here
<ul>
<li>Text_goes_here</li>
</ul>
</blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque debitis ad incidunt? Rem, atque sit soluta iste a maxime cupiditate repellat ut quos omnis molestiae eaque voluptatem esse quas mollitia?Writing style:
<blockquote class="s2">
Text_goes_here
<ul>
<li> <a href="#" class="icon s2"><i class="bi bi-facebook"></i></a></li>
</ul>
</blockquote>
Post Break
One of the best way to separate new section of information in a article.
Writing style:
<hr>
Custom list with description.
You can guide the users with proper steps and some of the context of the steps to do while performing those steps.
-
Title_goes_here
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, culpa voluptas qui ad sed, corporis iste inventore assumenda animi, voluptates consequatur natus laborum praesentium minus ut fugiat excepturi exercitationem veniam.
-
Title_goes_here
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, nemo mollitia id quisquam eligendi aliquid enim officiis in illum atque illo quibusdam commodi dolor. Ratione eius similique expedita fuga! Repellat!
Writing style:
<ul class="listed-num">
<li>
<span><span>
Title_goes_here
</span>
<p>
Description_goes_here
</p></span>
</li></ul>
Tabel
The table in this theme has been set responsive, for example, if the number of columns or the width of the table exceeds the width of the screen, it will automatically have a scroll function.
Please open this article on your mobile device and highlight the table section below:
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Writing style:
<div class='table nS'>
<table style='white-space:nowrap; min-width:100%;'>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
</div>
Accordion
Write the text data in accordion ,which is made for user choice to view it or not.
Accordion
Text_goes_here
Accordion
Text_goes_here
Accordion
Text_goes_here
Accordion (alt)
Text_goes_here
Writing style:
<div class="accord">
<details class="ac">
<summary>Accordion</summary>
<div class="acC">
<p>Text_goes_here</p>
</div>
</details>
<details class="ac alt">
<summary>Accordion</summary>
<div class="acC">
<p>Text_goes_here</p>
</div>
</details>
</div>
External Links
Show users the external source leading site.
External Link External Link altWriting style:
<a href="#" class="extL">Text_goes_here</a>
<a href="#" class="extL alt">Text_goes_here</a>
Buttons
ButtonAlternative style:
Button lnWriting style:
<a href="#" class="button">Download</a>
<a href="#" class="button ln">Demo</a>
With Icons:
Download DemoWriting style:
<a href="#" class="button"><i class="icon dl"></i>Download</a>
<a href="#" class="button"><i class="icon demo"></i>Demo</a>
Writing style:
<div class="flex-btn">
<a href="#" class="button ln"><i class="bi bi-send"></i>Demo</a><a href="#" class="button"><i class="bi bi-download"></i>Download</a>
</div>
Download Box
Give users more details about what they are going to download.
Writing style:
<div class="db">
<div class="type">zip</div>
<div class="data">
<span class="name">file_name.zip</span>
<span class="size">200kb</span>
</div>
<a href="#" class="button"><svg class="line" viewBox="0 0 24 24">
<polyline points="8 17 12 21 16 17"></polyline>
<line x1="12" x2="12" y1="12" y2="21"></line>
<path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path>
</svg></a>
</div>
Download Box with timer
In this version you can provide the link after some time interval.
ZIP
file_name.zip
340kbGoogle Drive
<div class="timerDb">
<div class="db timer">
<div class="type">ZIP</div>
<div class="data"><span class="name">file_name.zip</span>
<span class="size">340kb</span><span class="src">Google Drive</span>
</div>
<span id="dbb" class="button"><svg class="line" viewBox="0 0 24 24">
<polyline points="8 17 12 21 16 17"></polyline>
<line x1="12" x2="12" y1="12" y2="21"></line>
<path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path>
</svg></span></div>
<div id="dbc" class="timerBox hide">
<span class="countDown">Wait for <span data-num="15" id="dbt">16</span> Seconds.</span>
<a class="button" href="#" id="dbl">Download</a>
</div>
</div>
Tip: Keep the data-num="15" 1s less than the text of #dbt
Drop Cap paragraph
L
orem, ipsum dolor sit amet consectetur adipisicing elit. Officiis eum adipisci, voluptatum veniam maxime numquam iste cum officia, nulla voluptate assumenda! Placeat dolorem dolore facere rerum quasi, nulla ipsum assumenda.
Writitng style:
<div> <span class="dropC">Text_goes_here</span>
<p>Text_goes_here</p>
</div>
Keep the <span class="dropC"/><p/>in a <div/>
Paragraph with Text Indent
This paragraph have a indent style in its first line of text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni doloremque ad iusto fugit aspernatur possimus, doloribus omnis consequuntur quod alias obcaecati illo totam facilis accusamus exercitationem soluta distinctio vitae assumenda.
Writing style:
<p class="pInt">Text_goes_here</p>
Images in Grid style
With this style you can show many images in a grid style to make all in a block summary.
<div class="grImg"><img src="src.jpg" alt=""/></div><div class="grImg alt"><img src="src.jpg" alt=""/></div>
Images in Scroll style
With this style you show the images in a scrolling layout.
<div class="scImg nS"><img src="src.jpg" alt=""/></div>
Pardeep Poonia
UI/UX Designer and Developer at HiFi Themes. Follow me on Instagram
Post a comment
Subscribe to:
Post Comments (Atom)
Most Visited
Most Visited
Explore our Popular articles!
Enabling Subscription Request ( USR JS )
USR JS stands for "User Subscription Request" which enables the blog admins to get a free and fast subscription request…
What's New in GUI v1.4
GUI v1.4 We recently released GUI v1.4 on Sept 19,2024. In this update, we debugged many bugs and released many more features as w…
Post with Tabs Function
Chapter 1 Chapter 2 Chpater 3 Chpater 4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, enim praesentium. Aspernatur vol…
Making Changes in Top post scrollbar
you can change the scrollbar posts just by changing these values. $label:{Blogger,How To},$num{5}
Post with Fullpage style
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis perspiciatis enim adipisci praesentium expedita corporis i…
Categorised Posts System JS Functions
CPS JS v2 is a super fast javascript that loads posts on labels and upto specified numbers. You can use the number of labels…
Comments
Post a Comment
Your comment form paragraph goes here. Can be edited in Blogger>Settings>Comments (Comments form message)