Giniplexwp All Style (Typography, Elements, etc)

All Documentation info or About How to Setting Themes and Typografy Code for Giniplexwp Themes. you can see this if you still dont know..

Giniplexwp All Style (Typography, Elements, etc)

Images

All images will be clickable and displayed into Lightbox.

Default style of image with caption

Writing format:


<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;">
	<tbody>
		<tr>
			<td style="text-align: center;">
				<a href="/ar/your_image_link/" style="display: block; margin-left: auto; margin-right: auto; padding: 1em 0px; text-align: center;">
					<img alt="your_image_title" border="0" src="your_image_link" title="your_image_title" width="600"/>
				</td>
			</tr>
			<tr>
				<td class="tr-caption" style="text-align: center;">your_image_caption</td>
			</tr>
		</tbody>
	</table>

Standard figure tag with figcaption. Even if don’t have <a href="/ar/1/"> tag, image still displayed into Lightbox.

Writing format:

<figure>
<img alt="your_image_title" title="your_image_title" src="your_image_link" class="">
<figcaption>your_image_caption</figcaption>
</figure>

Gallery (Swipe)

Multiple images with swipe style. Best for mobile view. Lighter than carousel.

Additional caption text

Writing format:

<div class="gallery swipe portrait">
  <div class="swipe-outer r"><div class="swipe-inner">
    <img alt="Igniplex Swipe Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV_URvjV4709PbVsiTycHlf0NXtjdjysih2FgTULnPETr_RLTEj-Y3bcS3-rdzKULAT2Fp8Etzrwz9z4FHp74TR2tbBgsC1Qk8g8-NNfk8epy60YjPTKWzFT4od3seRDkKuIFr1_wYVZVWnebzcM4LHLlOImRK4am5hSTIf2aZH8l91arFxd9xHORX2A/s1600/cat-01.jpeg" title="Igniplex Swipe Image">
    <img alt="Igniplex Swipe Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIaZ2zzaDJfdfG6DgmmW1UYOruezNTSq1-kSag_DSSCHYIw39x5yozLO1RaON_Di79bH_erTMGK9JnvSi0vNAODpBWQkKc-2o1AYedOMJi5cROkQtN-Io7pbHYqB98xdmtIF683LuUCqrpCzigvkOdsjln__e5SN9Jo3yoLUCzNoUlFDdfAVrg-00RAQ/s1600/cat-02.jpeg" title="Igniplex Swipe Image">
    <img alt="Igniplex Gallery Style 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1Hn1jP02Rvgbylmmb2qD3ZZ7-Zz92aOA_F4hd8ZmBNhBWVD6z7MirQViJrERSIw5xgdcSvvihaERmB8TlZl85bS8voBu3DHNMsJ8FSDjWy-HYxYKldX-YN45fesf7hNjGxKhLrtYV2z0bwNKT6zAjzcuYXzzINJ88AjXQUqOwSTCM0XqbjogOowQTg/s1600/cat-03.jpeg" title="Igniplex Swipe Image">
    <img alt="Igniplex Swipe Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDaD-lLO1apNOysUr-awjE2ZBUx_IKIBDvMtwE5wcbsFn5F3Cyyt8uGni3bECbeMm5Byf6y-4JrOXHmj0mlBvBGZ9TlNWz3NBE4sJE4FHHOXeD2lKpArgW6rC2sUDzZf0OrX5LCLaRLOgYCZGQJb2qhAxFhW7Y1mVPgcND8pTwYlt6sCCbPEH4Uba8tA/s1600/cat-04.jpeg" title="Igniplex Gallery Style 1">
    <img alt="Igniplex Swipe Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAdn5lnmVf2hrHZf1Qqxo4b_qfhVhZeSD2KjX9ppXlLFcMLj5XNfOFCMnhe6EWbjjTPn3mtwb8dLwfY1p-VFK_T-niZoBy1FCvYAeXn6WiXIt0_zpkQ9o5tQqPTMdiIV6oU7zKOltR6bH1efFZYPcQNynIkkbxUq93x5lmBiUV-Z74dZoj4Oam5lyRfQ/s1600/cat-05.jpeg" title="Igniplex Swipe Image">
  </div><div class="swipe-arrow"><button aria-label="Previous" class="tx-75 tx-sm arrow prev round h f a">❮</button><button aria-label="Next" class="tx-75 tx-sm arrow next round f a">❯</button></div></div>
  <div class="caption">Additional caption text</div>
</div>

Syntax Highlighter

Used to define lines of computer code (HTML, CSS, PHP, Javascript, Jquery or etc.) in posts.

Your code here

Writing format:

<pre class="html">
<code>Your code here</code>
</pre>

Change class='html' to define another code format, i.e. class='css', class='js', class='php', class='jquery', etc

B. Multi Tab Syntax

HTML
CSS
JS

<html>
  <head>
    <title>Igniel</title>
  </head>
  <body>
    ....
    ....
  </body>
</html>

.post-body pre {
  background-color: #333;
  border-left: 5px solid #009688;
  padding: 0;
  margin: .5em auto;
}

!function() {
  // Estimated Reading Time by igniel.com
  const post = document.querySelector('.post-body')[0],
    tx = post.innerText,
    wpm = 225,
    wd = tx.trim().split(/\s+/).length,
    tm = Math.ceil(wd / wpm);
  if (document.querySelector('.read-time')) {
    document.querySelector('.read-time i').innerText = tm;
  }
}();

Writing format:


<div class="tabs syntax">
  <ul>
    <li class="current">HTML</li>
    <li>CSS</li>
    <li>JS</li>
  </ul>
  <div class="content visible">
    <pre class="html"><code>sample_code</code> </pre>
  </div>
  <div class="content">
    <pre class="css"><code>sample_code</code> </pre>
  </div>
  <div class="content">
<pre class="js"><code>sample_code</code> </pre> 
  </div>
</div>

Dropcaps

The drop cap will resize the first letter of the paragraph so that it drops one or more lines down. Many types of print media use drop caps such as books, magazines, newspapers and so on because they can add to the visual appeal.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.

Writing format:

<span class="drop">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit.

you can use automatic dropcap on panel setting.

Table

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, so as not to damage the layout, the table will automatically have a scroll function.

No.	Items	Types
1	Giniplexwp	Themes
2	Ignielwp	Themes
3	Fletrowp	Themes
4	Medianwp	Themes
5	Plus-uiwp	Themes

Writing format:

<table>
<thead><tr><th>No.</th> <th>Items</th> <th>Types</th></tr></thead>
<tbody>
<tr><td>1</td> <td>Giniplexwp</td> <td>Themes</td></tr>
<tr><td>2</td> <td>Ignielwp</td> <td>Themes</td></tr>
<tr><td>3</td> <td>Fletrowp</td> <td>Themes</td></tr>
<tr><td>4</td> <td>Medianwp</td> <td>Themes</td></tr>
<tr><td>5</td> <td>Plus-uiwp</td> <td>Themes</td></tr> 
</tbody>
</table>

Ordered List

Is a list with number.

One list
Two list
Three list
Four list
Five list

Unordered List

One list
Two list
Three list
Four list
Five list

Nested

Three

Two
Three

Button

A. Fill

Writing format:

<button>Button</button> <button class="download">Download</button> <button class="demo">Demo</button> 
<p><button class="round">Button Round</button> <button class="download round">Download Round</button> <button class="demo round">Demo Round</button></p>

B. Outline

Writing format:

<button class="outline">Button</button> <button class="outline download">Download</button> <button class="outline demo">Demo</button>
<p><button class="outline round">Button Round </button> <button class="outline download round">Download Round</button> <button class="outline demo round">Demo Round</button></p>

Box

Box default

Box green

Box blue

Box red

Box yellow

Writing format:

<div class="box">Box default</div>

Changes class='box' to define another code format, i.e. class='box green', class='box blue', class='box red' or class='box yellow'

Tabs

Create multi tab with unlimited content. You can add up to as many as you want because the title will be scrollable.

First Tab
Second Tab
Third Tab
Fourth Tab

Content of the first tab (1st).

Content of the second tab (2nd).

Content of the third tab (3rd).

Content of the fourth tab (4th).

Writing format:

<div class="tabs">
  <ul>
    <li class="current">First Tab</li>
	<li>Second Tab</li>
	<li>Third Tab</li>
    <li>Fourth Tab</li>
  </ul>
  <div class="content visible">
    Content of the first tab (1st).
 </div>
  <div class="content">
    Content of the second tab (2nd).
  </div>
  <div class="content">
    Content of the third tab (3rd).
  </div>
  <div class="content">
    Content of the fourth tab (4th).
  </div>
</div>

Accordion

Hide or reveal contents. Very common in FAQ (Frequently Asked Question) section.

Accordion Open By Default

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Accordion

Writing format:

<details class="accordion" open="open">
  <summary>Accordion Open By Default</summary>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</details>
<details class="accordion">
  <summary>Accordion</summary>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</details>

Spoiler

Show / hide content with click event to trigger.

Spoiler

Writing format:

<details class="spoiler">
  <summary>Spoiler</summary>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</details>

YouTube

Lazy load YouTube video will make your pages lighter.

Writing format:

<div class="youtubelazy" data-embed="pJ7m3nkC268"><figure><img alt="Youtube video player" src="https://img.youtube.com/vi/pJ7m3nkC268/sddefault.jpg" title="Youtube video player" class="lazyloaded"></figure></div>