Typography and Codes

igniel.demos.web.id

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

Contents!

Change Logo SVG Change Icon SVG Add Icon SVG Category Add Icon SVG Menu Note Block Syntax Highlighter Multi Tab Syntax Button Tabs

Change Logo SVG

You can Change Logo on Panel Setting Themes, Before you change logo, first convert your Image Logo to svg. go to here to read how to convert your image. after you done convert, now go to Panel Setting Themes and add your svg to Header –> SVG Banner Logo

igniel.demos.web.id

Change Icon SVG

You can Change Icon on Panel Setting Themes, Before you change Icon, first Convert your Icon to Base64 Image. go to here and copy the link. after you done, now go to Panel Setting Themes and add your Svg Icon to Header –> Url SVG Icon Logo

Add Icon SVG Category

You can Add Icon SVG Category on Category Setting. go to here find your icon svg, add your svg on Category –> SVG Icon

igniel.demos.web.id

INFO!
if dont have Icon SVG Category… Icon SVG Category use Default Svg Category. so… you want add icon or not… up to you.
Default Icon SVG is

Add Icon SVG Menu

You can Add Icon SVG Menu on Menu Setting. go to here find your icon svg, add your svg on Menu –> SVG Icons.

igniel.demos.web.id

INFO!
if dont have Icon SVG Menu… Icon SVG Menu use Default Svg Menu. so… you want add icon or not… up to you.
Default Icon SVG is

Most of these features can only be used in ‘TEXT‘ mode, or can you switch to ‘VISUAL‘ mode while using some of these features.

Note Block

This feature serves to add important info, warning sentences, tips sentences or success sentences, there are styles that you can try including:

INFO! This Sample Note Description

TIPS! This Sample Note Description

WARNING! This Sample Note Description

SUCCESS! This Sample Note Description

Writing format:

<div class="box info"><strong>INFO!</strong> This Sample Note Description </div>

Change class="box info" to define another code format, i.e. class="box tips", class="box warning", class="box success", etc

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><i class="copy"></i></pre>

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

Multi Tab Syntax

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://igniel.demos.web.id/",
  "name": "Ignielwp",
  "alternateName": "Ignielwp",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://igniel.demos.web.id/?s={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

Writing format:

<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" checked>
<pre class="sintax"><code><i class="pre-meta">&lt;!DOCTYPE <i class="pre-keyword">html</i>&gt;</i><br><i class="pre-tag">&lt;<i class="pre-name">html</i> <i class="pre-attr">dir</i>=<i class="pre-string">'ltr'</i> <i class="pre-attr">lang</i>=<i class="pre-string">'en'</i>&gt;</i><br>  <i class="pre-tag">&lt;<i class="pre-name">head</i>&gt;</i><br>    <i class="pre-tag">&lt;<i class="pre-name">title</i>&gt;</i>Sample Page<i class="pre-tag">&lt;/<i class="pre-name">title</i>&gt;</i><br>  <i class="pre-tag">&lt;/<i class="pre-name">head</i>&gt;</i><br><br>  <i class="pre-comment">&lt;!--[ &lt;body&gt; open ]--&gt;</i><br>  <i class="pre-tag">&lt;<i class="pre-name">body</i>&gt;</i><br>    <i class="pre-tag">&lt;<i class="pre-name">p</i>&gt;</i>Sample content here!<i class="pre-tag">&lt;/<i class="pre-name">p</i>&gt;</i><br>  <i class="pre-tag">&lt;/<i class="pre-name">body</i>&gt;</i><br>  <i class="pre-comment">&lt;!--[ &lt;/body&gt; close ]--&gt;</i><br><i class="pre-tag">&lt;/<i class="pre-name">html</i>&gt;</i></code><i class="copy"></i></pre>
</div>
<div class="preC-2">
<pre class="sintax"><code><i class="pre-comment">/* Standar CSS */</i><br><i class="pre-selector-pseudo">::selection</i>{<i class="pre-attribute">color</i>:<i class="pre-number">#fff</i>;<i class="pre-attribute">background</i>:<i class="pre-built_in">var</i>(--linkC)}<br>*, <i class="pre-selector-pseudo">::after</i>, <i class="pre-selector-pseudo">::before</i>{-webkit-<i class="pre-attribute">box-sizing</i>:border-box;<i class="pre-attribute">box-sizing</i>:border-box}<br><i class="pre-selector-tag">h1</i>, <i class="pre-selector-tag">h2</i>, <i class="pre-selector-tag">h3</i>, <i class="pre-selector-tag">h4</i>, <i class="pre-selector-tag">h5</i>, <i class="pre-selector-tag">h6</i>{<i class="pre-attribute">margin</i>:<i class="pre-number">0</i>;<i class="pre-attribute">font-weight</i>:<i class="pre-number">700</i>;<i class="pre-attribute">font-family</i>:<i class="pre-built_in">var</i>(--fontH);<i class="pre-attribute">color</i>:<i class="pre-built_in">var</i>(--headC)}<br><i class="pre-selector-tag">h1</i>{<i class="pre-attribute">font-size</i>:<i class="pre-number">1.9rem</i>}<br><i class="pre-selector-tag">h2</i>{<i class="pre-attribute">font-size</i>:<i class="pre-number">1.7rem</i>}<br><i class="pre-selector-tag">h3</i>{<i class="pre-attribute">font-size</i>:<i class="pre-number">1.5rem</i>}<br><i class="pre-selector-tag">h4</i>{<i class="pre-attribute">font-size</i>:<i class="pre-number">1.4rem</i>}<br><i class="pre-selector-tag">h5</i>{<i class="pre-attribute">font-size</i>:<i class="pre-number">1.3rem</i>}<br><i class="pre-selector-tag">h6</i>{<i class="pre-attribute">font-size</i>:<i class="pre-number">1.2rem</i>}<br><i class="pre-selector-tag">a</i>{<i class="pre-attribute">color</i>:<i class="pre-built_in">var</i>(--linkC);<i class="pre-attribute">text-decoration</i>:none}<br><i class="pre-selector-tag">a</i><i class="pre-selector-pseudo">:hover</i>{<i class="pre-attribute">opacity</i>:.<i class="pre-number">9</i>;<i class="pre-attribute">transition</i>:opacity .<i class="pre-number">1s</i>}</code><i class="copy"></i></pre>
</div>
<div class="preC-3">
<pre class="sintax"><code><i class="pre-punctuation">{</i><br>  <i class="pre-attr">"@context"</i><i class="pre-punctuation">:</i> <i class="pre-string">"https://schema.org"</i><i class="pre-punctuation">,</i><br>  <i class="pre-attr">"@type"</i><i class="pre-punctuation">:</i> <i class="pre-string">"WebSite"</i><i class="pre-punctuation">,</i><br>  <i class="pre-attr">"url"</i><i class="pre-punctuation">:</i> <i class="pre-string">"https://igniel.demos.web.id/"</i><i class="pre-punctuation">,</i><br>  <i class="pre-attr">"name"</i><i class="pre-punctuation">:</i> <i class="pre-string">"Ignielwp"</i><i class="pre-punctuation">,</i><br>  <i class="pre-attr">"alternateName"</i><i class="pre-punctuation">:</i> <i class="pre-string">"Ignielwp"</i><i class="pre-punctuation">,</i><br>  <i class="pre-attr">"potentialAction"</i><i class="pre-punctuation">:</i> <i class="pre-punctuation">{</i><br>    <i class="pre-attr">"@type"</i><i class="pre-punctuation">:</i> <i class="pre-string">"SearchAction"</i><i class="pre-punctuation">,</i><br>    <i class="pre-attr">"target"</i><i class="pre-punctuation">:</i> <i class="pre-string">"https://igniel.demos.web.id/?s={search_term_string}"</i><i class="pre-punctuation">,</i><br>    <i class="pre-attr">"query-input"</i><i class="pre-punctuation">:</i> <i class="pre-string">"required name=search_term_string"</i><br>  <i class="pre-punctuation">}</i><br><i class="pre-punctuation">}</i></code><i class="copy"></i></pre>
</div>
</div>

Button

Writing format:

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

Tabs

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

Writing format:

<fieldset class="ignielMultiTab">
<input id="tab1" name="mTab" type="radio" checked="checked"/><label for="tab1">Tab 1</label><input id="tab2" name="mTab" type="radio"/><label for="tab2">Tab 2</label><input id="tab3" name="mTab" type="radio"/><label for="tab3">Tab 3</label><input id="tab4" name="mTab" type="radio"/><label for="tab4">Tab 4</label><input id="tab5" name="mTab" type="radio"/><label for="tab5">Tab 5</label>
<div class="content">
<div class="tab1">
(1) Sample Content
</div>
<div class="tab2">
(2) Sample Content
</div>
<div class="tab3">
(3) Sample Content
</div>
<div class="tab4">
(4) Sample Content
</div>
<div class="tab5">
(5) Sample Content
</div>
</div>
</fieldset>

Igniel v1.0

Typography and Codes

Change Logo SVG

Change Icon SVG

Add Icon SVG Category

Add Icon SVG Menu

Note Block

Syntax Highlighter

Multi Tab Syntax

Button

Tabs

1 Comments

Cancel

Demo Site for Login

Sidebar position