{"id":1717,"date":"2013-04-15T07:45:35","date_gmt":"2013-04-15T07:45:35","guid":{"rendered":"http:\/\/herbal-mall.com\/?page_id=1717"},"modified":"2013-06-05T06:18:59","modified_gmt":"2013-06-05T06:18:59","slug":"typography","status":"publish","type":"page","link":"https:\/\/herbal-mall.com\/ar\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"<p>GavernWP allows to access a lot of additional typography elements created with <a title=\"Shortcodes settings\" href=\"http:\/\/codex.wordpress.org\/Shortcode_API\" target=\"_blank\">Shortcodes<\/a> use. The use is very simple thanks to <a title=\"Typography button\" href=\"http:\/\/www.gavick.com\/documentation\/wordpress-themes\/gavernwp-framework\/typography\/\" target=\"_blank\">an additional button<\/a> in a posts editor.<\/p>\n<p>Below, there are all elements available in theme&#8217;s typography. Typography elements can be divided into three main groups:<\/p>\n<ul>\n<li>typography elements,<\/li>\n<li>interactive elements,<\/li>\n<li>elements prepared especially for a particular theme.<\/li>\n<\/ul>\n<h2>Warnings \/ Infos \/ Notices \/ Errors<\/h2>\n<p>These elements are used for highlighting text fragments together with their importance \/ type of information by using appropriate colors.<\/p>\n<p class=\"gk-warning\">Warning and error text example using Shortcodes<\/p>\n<p class=\"gk-info\">Info text example using Shortcodes<\/p>\n<p class=\"gk-notice\">Notice text example using Shortcodes<\/p>\n<h2>Labels<\/h2>\n<p>Labels are useful for marking the importance of the text fragment or a word given. In the case of longer texts, we recommend to use elements from\u00a0<em>Warnings \/ Infos \/ Notices<\/em>\u00a0group.<\/p>\n<p>This is a paragraph with the <strong class=\"gk-label\" data-style=\"style1\">labeled text<\/strong> using the first style.<\/p>\n<p>This is a paragraph with the <strong class=\"gk-label\" data-style=\"style2\">labeled text<\/strong> using the second style.<\/p>\n<p>This is a paragraph with the <strong class=\"gk-label\" data-style=\"style3\">labeled text<\/strong> using the third style.<\/p>\n<p>This is a paragraph with the <strong class=\"gk-label\" data-style=\"style4\">labeled text<\/strong> using the fourth style.<\/p>\n<h2>Badges<\/h2>\n<p>Badges in their look are similar to Labels, however, you may use them mainly for highlighting shorter texts, e.g. numerical values.<\/p>\n<p>This is a paragraph with the badge <strong class=\"gk-badge\" data-style=\"style1\">12<\/strong> using the first style.<\/p>\n<p>This is a paragraph with the badge <strong class=\"gk-badge\" data-style=\"style2\">12<\/strong> using the second style.<\/p>\n<p>This is a paragraph with the badge <strong class=\"gk-badge\" data-style=\"style3\">12<\/strong> using the third style.<\/p>\n<p>This is a paragraph with the badge <strong class=\"gk-badge\" data-style=\"style4\">12<\/strong> using the fourth style.<\/p>\n<h2>Code listings<\/h2>\n<p>We recommend to use an element creating code listings in one out of three styles available for presenting source codes:<\/p>\n<pre class=\"gk-code\" data-style=\"style1\"><code>function helloWorld() {\nalert('Hello World!');\n}<\/code><\/pre>\n<pre class=\"gk-code\" data-style=\"style2\"><code>function helloWorld() {\nalert('Hello World!');\n}<\/code><\/pre>\n<pre class=\"gk-code\" data-style=\"style3\"><code>function helloWorld() {\nalert('Hello World!');\n}<\/code><\/pre>\n<h2>Text blocks<\/h2>\n<p>Text blocks are useful for generating an element highlighting a particular part of an\u00a0 entry:<\/p>\n<div class=\"gk-textblock\" data-style=\"style1\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.<\/div>\n<div class=\"gk-textblock\" data-style=\"style2\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.<\/div>\n<div class=\"gk-textblock\" data-style=\"style3\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.<\/div>\n<p class=\"gk-numblock\" data-style=\"style1\"><span>01<\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.<\/p>\n<p class=\"gk-numblock\" data-style=\"style2\"><span>02<\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.<\/p>\n<p class=\"gk-numblock\" data-style=\"style3\"><span>03<\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.<\/p>\n<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.\u00a0<div class=\"gk-floated\" data-align=\"left\">Lorem ipsum dolor sit amet<\/div>\n<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.\u00a0<div class=\"gk-floated\" data-align=\"right\">Lorem ipsum dolor sit amet<\/div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.\u00a0<div class=\"gk-floated\" data-align=\"center\">Lorem ipsum dolor sit amet<\/div>\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.<\/p>\n<h2>Quote and Citations<\/h2>\n<p>Quotes elements are useful for highlighting the author of a sentence given:<\/p>\n<blockquote class=\"gk-quote\" data-style=\"style1\"><p>The content of the quote in style 1. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.<\/p><cite>Author<\/cite><\/blockquote>\n<blockquote class=\"gk-quote\" data-style=\"style2\"><p>The content of the quote in style 2. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.<\/p><cite>Author<\/cite><\/blockquote>\n<blockquote class=\"gk-quote\" data-style=\"style3\"><p>The content of the quote in style 3. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.<\/p><cite>Author<\/cite><\/blockquote>\n<blockquote class=\"gk-quote\" data-style=\"style4\"><p>The content of the quote in style 4. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.<\/p><cite>Author<\/cite><\/blockquote>\n<h2>Lists<\/h2>\n<p>Ordered and unordered lists:<\/p>\n<div class=\"gk-columns\" data-column-count=\"4\">\n<div><ol data-style=\"style1\">\n<li>item1<\/li>\n<li>item2<\/li>\n<li>item3<\/li>\n\n<\/ol><\/div>\n<div><ol data-style=\"style2\">\n<li>item1<\/li>\n<li>item2<\/li>\n<li>item3<\/li>\n\n<\/ol><\/div>\n<div><ol data-style=\"style3\">\n<li>item1<\/li>\n<li>item2<\/li>\n<li>item3<\/li>\n\n<\/ol><\/div>\n<div><ol data-style=\"style4\">\n<li>item1<\/li>\n<li>item2<\/li>\n<li>item3<\/li>\n\n<\/ol><\/div>\n<\/div>\n<div class=\"gk-columns\" data-column-count=\"4\">\n<div><ul data-style=\"style1\">\n<li>item1<\/li>\n<li>item2<\/li>\n<li>item3<\/li>\n\n<\/ul><\/div>\n<div><ul data-style=\"style2\">\n<li>item1<\/li>\n<li>item2<\/li>\n<li>item3<\/li>\n\n<\/ul><\/div>\n<div><ul data-style=\"style3\">\n<li>item1<\/li>\n<li>item2<\/li>\n<li>item3<\/li>\n\n<\/ul><\/div>\n<div><ul data-style=\"style4\">\n<li>item1<\/li>\n<li>item2<\/li>\n<li>item3<\/li>\n\n<\/ul><\/div>\n<\/div>\n<h2>Buttons<\/h2>\n<p>Buttons in many different variations:<\/p>\n<p><button class=\"gk-button\" data-style=\"style1\">Your text<\/button> <button class=\"gk-button\" data-style=\"style2\">Your text<\/button> <button class=\"gk-button\" data-style=\"style3\">Your text<\/button> <button class=\"gk-button\" data-style=\"style4\">Your text<\/button> <button class=\"gk-button\" data-style=\"style5\">Your text<\/button> <button class=\"gk-button\" data-style=\"style6\">Your text<\/button> <button class=\"gk-button\" data-style=\"style7\">Your text<\/button> <button class=\"gk-button\" data-style=\"style8\">Your text<\/button><\/p>\n<p>&nbsp;<\/p>\n<p>The same buttons as links:<\/p>\n<p><a href=\"#\" class=\"gk-button\" data-style=\"style1\">Your text<\/a> <a href=\"#\" class=\"gk-button\" data-style=\"style2\">Your text<\/a> <a href=\"#\" class=\"gk-button\" data-style=\"style3\">Your text<\/a> <a href=\"#\" class=\"gk-button\" data-style=\"style4\">Your text<\/a> <a href=\"#\" class=\"gk-button\" data-style=\"style5\">Your text<\/a> <a href=\"#\" class=\"gk-button\" data-style=\"style6\">Your text<\/a> <a href=\"#\" class=\"gk-button\" data-style=\"style7\">Your text<\/a> <a href=\"#\" class=\"gk-button\" data-style=\"style8\">Your text<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Legends<\/h2>\n<p>Elements with legend useful while creating text blocks in a frame provided with an appropriate title.<\/p>\n<div class=\"gk-legend\" data-style=\"style1\"><strong>Legend style 1<\/strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.<\/div>\n<h2>Raw text<\/h2>\n<p>An element useful for generating text without formatting:<\/p>\n<pre class=\"gk-raw\" data-style=\"style1\">Your text<\/pre>\n<h2>Tooltips<\/h2>\n<p>Tooltips may occur in two forms: a link to a different website with a tooltip or a text connected with the text:<\/p>\n<a href=\"URL\" class=\"gk-tooltip\" data-style=\"style1\">Style I<dfn>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/dfn><\/a>\n<a href=\"URL\" class=\"gk-tooltip\" data-style=\"style2\">Style II<dfn>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/dfn><\/a>\n<a href=\"URL\" class=\"gk-tooltip\" data-style=\"style3\">Style III<dfn>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/dfn><\/a>\n<a href=\"URL\" class=\"gk-tooltip\" data-style=\"style4\">Style IV<dfn>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.<\/dfn><\/a>\n<h2>Other typography elements<\/h2>\n<p>Elements which could not be groupped to other categories.<\/p>\n<p>Columns allow to place text in multicolumn layout:<\/p>\n<div class=\"gk-columns\" data-column-count=\"3\">\n<div>Content for the first column<\/div>\n<div>Content for the second column<\/div>\n<div>Content for the third column<\/div>\n\n<\/div>\n<p>You can also adjust the columns width using the\u00a0<strong>width<\/strong>\u00a0attribute:<\/p>\n<div class=\"gk-columns\" data-column-count=\"3\">\n<div style=\"width: 50%;\">Content for the first column<\/div>\n<div style=\"width: 25%;\">Content for the second column<\/div>\n<div style=\"width: 25%;\">Content for the third column<\/div>\n\n<\/div>\n<p>Toggle text &#8211; elements useful for creating blocks with text to toggle:<\/p>\n<div class=\"gk-toggle closed\"><h3>Header text<\/h3><div>Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.<\/div><\/div>\n<div class=\"gk-toggle opened\"><h3>Header text<\/h3><div>Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.<\/div><\/div>\n<p>Shortcode pageurl allows to place an address to a blog:<\/p>\nhttps:\/\/herbal-mall.com\/ar\n<p>A link to a RSS channel:<\/p>\n<a class=\"gk-rss\" href=\"URL\"><i class=\"icon-bullhorn\"><\/i>Link text<\/a>\n<p>A link to a PDF document:<\/p>\n<a class=\"gk-pdf\" href=\"http:\/\/docs.google.com\/viewer?url=URL\"><i class=\"icon-file\"><\/i>Text of the link<\/a>\n<p>A private note in an entry, visible for an author only:<\/p>\n\n<p>Mail illegible for bots creating data bases for spammers:<\/p>\n<a href=\"mailto:&#101;&#109;&#97;&#105;&#108;&#46;&#116;&#111;&#64;&#111;&#98;&#102;&#117;&#115;&#99;&#97;&#116;&#101;&#46;&#99;&#111;&#109;\">&#101;&#109;&#97;&#105;&#108;&#46;&#116;&#111;&#64;&#111;&#98;&#102;&#117;&#115;&#99;&#97;&#116;&#101;&#46;&#99;&#111;&#109;<\/a>\n<p>Content visible for logged in users only:<\/p>\n<div class=\"gk-members\"><strong>Members only<\/strong>Content for the members only<\/div>\n<p>Related posts:<\/p>\n<ol class=\"gk-related\"><li>No related posts found<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>GavernWP allows to access a lot of additional typography elements created with Shortcodes use. The use is very simple thanks to an additional button in a posts editor. Below, there are all elements available in theme&#8217;s typography. Typography elements can be divided into three main groups: typography elements, interactive elements, elements prepared especially for a&hellip;<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"template.fullwidth.php","meta":{"footnotes":""},"class_list":["post-1717","page","type-page","status-publish","hentry","no-sidebar"],"_links":{"self":[{"href":"https:\/\/herbal-mall.com\/ar\/wp-json\/wp\/v2\/pages\/1717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/herbal-mall.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/herbal-mall.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/herbal-mall.com\/ar\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/herbal-mall.com\/ar\/wp-json\/wp\/v2\/comments?post=1717"}],"version-history":[{"count":0,"href":"https:\/\/herbal-mall.com\/ar\/wp-json\/wp\/v2\/pages\/1717\/revisions"}],"wp:attachment":[{"href":"https:\/\/herbal-mall.com\/ar\/wp-json\/wp\/v2\/media?parent=1717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}