Typography and Codes

Typography and Codes

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

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

Typography and Codes

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

Typography and Codes

INFO!
if dont have Icon SVG CategoryIcon 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.

Typography and Codes

INFO!
if dont have Icon SVG MenuIcon 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.

(1) Sample Content
(2) Sample Content
(3) Sample Content
(4) Sample Content
(5) Sample Content

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>

75
Typography and Codes
Typography and Codes
All Documentation info or About How to Setting Themes and Typografy Code for Ignielwp Themes. you can see this if you still dont know..Change Logo SVGYou can Change Logo on …
Share to other apps:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Your email address will not be published.

CAPTCHA